如何在Blazor(.Net Core 5.0) WebAssembly应用中集成JqueryUI Tabs

一、正确配置静态文件引用（Index.html） #

关键要保证引用顺序：JQuery必须在JQuery UI之前加载，同时别忘了引入JQuery UI的样式文件。直接在wwwroot/index.html里按下面的方式添加：

<!-- 在<head>标签内添加JQuery UI样式 -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

<!-- 在<body>末尾、Blazor核心脚本之前添加JS文件 -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<script src="_framework/blazor.webassembly.js"></script>

如果想用本地文件，把对应JS和CSS放到wwwroot/lib目录下，把路径改成相对路径就行，比如/lib/jquery/jquery.min.js。

二、封装JS互操作方法 #

在wwwroot下新建js/jquery-ui-interop.js文件，把JQuery UI的调用逻辑封装成全局方法，方便Blazor组件调用。以常用的日期选择器为例：

// 初始化日期选择器
window.initDatePicker = function (elementId) {
    $(`#${elementId}`).datepicker({
        dateFormat: "yy-mm-dd",
        changeMonth: true,
        changeYear: true
    });
};

// 销毁日期选择器（避免内存泄漏）
window.destroyDatePicker = function (elementId) {
    $(`#${elementId}`).datepicker("destroy");
};

三、在Blazor组件中调用JQuery UI #

创建一个组件（比如DatePicker.razor），通过JS互操作来初始化和管理JQuery UI控件：

@inject IJSRuntime JSRuntime
@implements IAsyncDisposable

<input type="text" id="@_elementId" placeholder="选择日期" />

@code {
    // 生成唯一ID，避免多个组件冲突
    private string _elementId = $"datepicker-{Guid.NewGuid()}";

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        // 第一次渲染完成后再初始化，此时DOM元素已存在
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("initDatePicker", _elementId);
        }
        await base.OnAfterRenderAsync(firstRender);
    }

    // 组件销毁时清理JQuery UI控件
    public async ValueTask DisposeAsync()
    {
        await JSRuntime.InvokeVoidAsync("destroyDatePicker", _elementId);
    }
}

之后在其他页面直接引用这个组件就行：<DatePicker />

四、常见问题排查 #

• 引用顺序错误：如果出现$ is not defined或$(...).datepicker is not a function，检查JQuery是否在JQuery UI之前加载
• DOM未加载完成：别在OnInitializedAsync里调用JS方法，此时DOM元素还没渲染出来，必须在OnAfterRenderAsync中执行
• 静态文件无法访问：确保Startup.cs里已经配置了静态文件中间件（默认项目已包含）：

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // ...其他中间件
    app.UseStaticFiles(); // 这行必须存在
    // ...
}

内容的提问来源于stack exchange，提问作者Baljeet Kiroriwal