Blazor客户端组件调用JS函数无响应问题求助

核心错误点 #

• ES模块调用方式错误：你的JS文件使用export导出函数，属于ES模块，无法直接通过JSRuntime.InvokeVoidAsync("showAlert")全局调用，必须通过加载后的IJSObjectReference实例（即jsModule）调用模块内的函数。
• 异步操作未正确等待：InvokeVoidAsync是异步方法，在同步方法中调用会导致操作未执行完成或被忽略，必须用async/await处理异步流程。
• 拼写错误：System.Console.WrteLine中的WrteLine少写一个i，导致控制台输出失效（虽不影响JS调用，但属于代码疏漏）。

修正后的代码 #

Component.razor.cs

namespace MyApp.Web.Components.Select
{
    public partial class Select
    {
        [Parameter]
        public RenderFragment ChildContent { get; set; } = default!;

        [Inject]
        public IJSRuntime JSRuntime { get; set; } = default!;

        private IJSObjectReference? jsModule;


        public async Task OnClick()
        {
            await ShowAlertWindow();
        }

        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            // 仅首次渲染时加载模块，避免重复加载
            if (firstRender)
            {
                try
                {
                    jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./scripts/test.js");
                }
                catch (Exception ex)
                {
                    System.Console.WriteLine($"Failed to load JS module. Error: {ex}");
                }
            }
        }

        public async Task ShowAlertWindow()
        {
            System.Console.WriteLine("Showing Alert Window");
            // 先判断模块是否加载完成
            if (jsModule != null)
            {
                await jsModule.InvokeVoidAsync("showAlert", "hello");
            }
            else
            {
                System.Console.WriteLine("JS module not loaded yet");
            }
        }
    }
}

其他说明

• 保留原Component.razor和wwwroot/scripts/test.js代码不变，确保JS文件路径正确（./scripts/test.js对应wwwroot下的scripts/test.js）。
• 新增firstRender判断，避免每次组件渲染都重复加载JS模块，提升性能。
• 添加jsModule空值判断，防止模块未加载完成时调用导致空引用异常。

内容的提问来源于stack exchange，提问作者Musaffar Patel