Blazor结合Select2时@bind无法取值始终返回Null求助

问题核心在于：Select2 是基于 jQuery 的第三方 DOM 插件，它会替换原生 <select> 的结构，导致 Blazor 的双向绑定（@bind）无法感知其选择变化——因为 Blazor 依赖原生表单元素的事件，而 Select2 的操作不会自动触发 Blazor 能识别的更新。

具体修复步骤 #

1. 清理冲突的手动选中属性

移除 <option> 上的 selected="@(_selectedLanguage == i18nCode.Code)"，因为 @bind 或 value 绑定会自动处理选中状态，手动设置会和绑定逻辑冲突，导致初始值和后续更新异常。

修改后的 <select> 代码：

<select class="form-select" data-control="select2" data-placeholder="Select an option" 
        id="I18NCodeSelect" data-dropdown-parent="#kt_modal_add_form"
        value="@_newModel.CodeI18NId">
    <option value="">Select I18N Code</option>
    @if (i18nCodes != null && i18nCodes.Any())
    { 
        @foreach (var i18nCode in i18nCodes)
        {
            <option value="@i18nCode.Id">@i18nCode.Code</option>
        }
    }
    else
    {
        <option value="" disabled>Loading languages...</option>
    }
</select>
<p>You selected: @_newModel.CodeI18NId</p>

2. 通过 JSInterop 监听 Select2 选择事件

利用 Blazor 的 JS 互操作，监听 Select2 的选择事件，直接通知 Blazor 更新绑定值。

组件 C# 代码添加交互逻辑

@inject IJSRuntime JSRuntime

// ... 其他代码 ...

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        // 初始化 Select2 并绑定回调
        await JSRuntime.InvokeVoidAsync("initSelect2WithCallback", "I18NCodeSelect", DotNetObjectReference.Create(this));
    }
}

[JSInvokable]
public void UpdateSelectedCode(string selectedValue)
{
    _newModel.CodeI18NId = selectedValue;
    StateHasChanged(); // 通知 Blazor 更新 UI
}

添加 JavaScript 初始化逻辑

将以下代码放入项目的 wwwroot/js 目录下的脚本文件（如 select2-blazor.js），并在 _Host.cshtml 或 index.html 中引入（需确保先引入 jQuery 和 Select2 的脚本）：

function initSelect2WithCallback(selectId, dotNetRef) {
    $('#' + selectId)
        .select2()
        .on('select2:select', function (e) {
            // 获取选中值并调用 Blazor 方法更新
            var selectedValue = e.params.data.id;
            dotNetRef.invokeMethodAsync('UpdateSelectedCode', selectedValue);
        });
}

3. 额外注意事项

• 确保 jQuery 和 Select2 的脚本引入顺序正确：先引入 jQuery，再引入 Select2。
• 若需要设置初始选中值，直接在组件初始化时给 _newModel.CodeI18NId 赋值即可，无需手动操作 <option>。

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