如何将Blazor对象引用传递给Telerik Chat控件以调用实例方法？

核心问题分析 #

你当前的问题出在三个关键环节：

• Blazor中通过import传递参数的方式错误，import语句无法直接接收额外参数
• JavaScript中初始化ChatAgent时未传入正确的dotnet实例引用
• invokeMethodAsync调用实例方法时参数格式错误

步骤1：修正Blazor组件代码 #

修改OnAfterRenderAsync逻辑，先导入JS模块，再调用模块导出的初始化函数并传递DotNetObjectReference：

@page "/chat"
@rendermode InteractiveServer
@inject IJSRuntime JS
@implements IAsyncDisposable

<h3>Chat</h3>

<div id="chat"></div>

@code {
    private DotNetObjectReference<MyChatComponent>? _objRef;
    private IJSObjectReference? _jsModule;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            _objRef = DotNetObjectReference.Create(this);
            _jsModule = await JS.InvokeAsync<IJSObjectReference>("import", "./Components/Pages/MyChatComponent.razor.js");
            // 调用JS模块的初始化函数，传递组件引用
            await _jsModule.InvokeVoidAsync("initChat", _objRef);
        }
    }

    [JSInvokable]
    public async Task<string> AskAsync(string message)
    {
        // 这里替换为你的实际业务逻辑
        return await Task.FromResult($"You said: {message}");
    }

    // 释放资源，避免内存泄漏
    public async ValueTask DisposeAsync()
    {
        if (_jsModule != null)
        {
            await _jsModule.DisposeAsync();
        }
        _objRef?.Dispose();
    }
}

步骤2：修正JavaScript模块代码 #

将JS代码改为导出initChat函数，接收Blazor组件引用，初始化ChatAgent时传入该引用：

export function initChat(dotnet) {
    var chat = $("#chat").kendoChat({
        post: function (args) {
            agent.postMessage(args);
        }
    }).data("kendoChat");

    window.ChatAgent = kendo.Class.extend({
        init: function (chat, dotnetRef) {
            this.chat = chat;
            this.dotnet = dotnetRef;
            console.log('dotnet reference received:', dotnetRef);
        },
        postMessage: function (args) {
            var chatInstance = this.chat;
            
            // 调用Blazor组件的实例方法，无需传入组件名
            this.dotnet.invokeMethodAsync('AskAsync', args.text)
                .then(data => {
                    chatInstance.renderMessage({
                        type: "text",
                        text: data,
                        timestamp: new Date()
                    }, {
                        name: "Generellem"
                    });
                });
        }
    });

    // 创建ChatAgent实例时传入dotnet引用
    window.agent = new ChatAgent(chat, dotnet);

    // 初始化欢迎消息
    window.agent.chat.renderMessage({
        type: "text",
        text: "Hi, How can I help today?",
        timestamp: new Date()
    }, {
        name: "Generellem"
    });
}

关键修正点说明 #

• JS模块参数传递：通过导出函数的方式接收DotNetObjectReference，替代直接在import中传参的错误方式
• ChatAgent初始化：创建ChatAgent实例时明确传入dotnet引用，确保init函数能获取到有效引用
• invokeMethodAsync调用：调用实例方法时，第一个参数直接传方法名AskAsync即可，不需要传入组件类名（静态方法才需要类名）
• 资源释放：实现IAsyncDisposable接口，及时释放JS模块和DotNetObjectReference，避免内存泄漏

内容的提问来源于stack exchange，提问作者Joe Mayo