MAUI Blazor导入JS并在首次渲染时执行document ready的问题

现有代码的问题 #

• 原生ES模块的import方法一次只能导入单个文件，无法一次性传入多个路径
• 未将JS.InvokeAsync("import")的返回值赋值给module变量，导致后续调用module.InvokeVoidAsync会触发空引用异常
• 直接依赖$(document).ready在Blazor中没必要，因为OnAfterRenderAsync(firstRender=true)执行时，DOM已经完成首次渲染

修正后的实现步骤 #

1. 调整JavaScript代码（推荐方式）

在main.js中把原$(document).ready内的逻辑封装成可导出的函数，方便Blazor调用：

// main.js
export function initPage() {
    // 原$(document).ready中的初始化逻辑移到这里
    $(function() {
        // 示例：初始化轮播、计数器等
        $('.owl-carousel').owlCarousel();
        $('.counter').counterUp();
    });
}

2. 修改C# Razor页面代码

private IJSObjectReference? module;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        // 逐个导入依赖的JS文件（或使用入口文件优化）
        await JS.InvokeVoidAsync("import", "/assets/js/jquery.3.6.min.js");
        await JS.InvokeVoidAsync("import", "/assets/js/bootstrap.min.js");
        await JS.InvokeVoidAsync("import", "/assets/js/imageloded.min.js");
        await JS.InvokeVoidAsync("import", "/assets/js/counterup.js");
        await JS.InvokeVoidAsync("import", "/assets/js/waypoint.js");
        await JS.InvokeVoidAsync("import", "/assets/js/magnific.min.js");
        await JS.InvokeVoidAsync("import", "/assets/js/isotope.pkgd.min.js");
        await JS.InvokeVoidAsync("import", "/assets/js/jquery-ui.min.js");
        await JS.InvokeVoidAsync("import", "/assets/js/nice-select.min.js");
        await JS.InvokeVoidAsync("import", "/assets/js/fontawesome.min.js");
        await JS.InvokeVoidAsync("import", "/assets/js/owl.min.js");
        await JS.InvokeVoidAsync("import", "/assets/js/slick-slider.min.js");
        await JS.InvokeVoidAsync("import", "/assets/js/wow.min.js");
        await JS.InvokeVoidAsync("import", "/assets/js/tweenmax.min.js");
        
        // 导入包含初始化函数的main.js，并保存模块引用
        module = await JS.InvokeAsync<IJSObjectReference>("import", "/assets/js/main.js");
        
        // 调用导出的初始化函数
        await module.InvokeVoidAsync("initPage");
    }
}

async ValueTask IAsyncDisposable.DisposeAsync()
{
    if (module is not null)
    {
        await module.DisposeAsync();
    }
}

优化建议 #

• 使用入口JS文件：创建一个app.js，在里面统一导入所有依赖和初始化逻辑，这样Blazor只需要导入一次app.js，减少网络请求：

  // app.js
  import './jquery.3.6.min.js';
  import './bootstrap.min.js';
  // ... 其他依赖导入
  import { initPage } from './main.js';
  
  // 直接执行初始化，或者导出供Blazor调用
  export function initApp() {
      initPage();
  }
  

  对应C#代码只需导入/assets/js/app.js，再调用initApp即可。

• 无需依赖$(document).ready：Blazor的OnAfterRenderAsync(firstRender=true)时机已经确保DOM渲染完成，直接执行初始化逻辑即可，不需要等待jQuery的ready事件。

内容的提问来源于stack exchange，提问作者Rob White