选用下降价值变化时，布拉泽尔火灾ondchange事件答案

【问题标题】：Blazor fire onchange event when Chosen drop down value changes选用下降价值变化时，布拉泽尔火灾ondchange事件
【发布时间】：2020-03-05 17:46:22
【问题描述】：

我有以下可以工作的 html，但是当我使用 Chosen 渲染下拉菜单时，它停止工作。因为 selected 不会更新实际的下拉值，所以它会创建自己的元素来保存选定的值。但是我无法访问，那么如何触发 onchange 事件呢？

<select id="search" single class="chosen-select" @onchange="UpdateValue" bind="@searchValue">
        ...
</select>
...In @Code
void UpdateValue(ChangeEventArgs e)
{
    searchValue = e.Value.ToString();
    ... 
}

现在，如果我用 selected 初始化下拉菜单，那么我无法检测到变化，但可以检测到其他方式。我正在使用 Blazor GL - 带有 .net core 3.0.1 的服务器端

【问题讨论】：

什么是选择-选择？我只听说过它是一个 jquery 插件。这意味着您有 2 个东西（blazor 和 jquery）同时在 DOM 中操作
Chosen 是一个通过添加额外的 div 将搜索功能添加到下拉列表的库。现在我知道，当您更改选择的值时，它不会在实际下拉列表中改变，但它太常见了，我们已经习惯了，几乎每个人都需要它。
harvesthq.github.io/chosen
我的意思是你有 2 个框架试图同时管理 DOM。这将导致问题。很容易创建具有类似搜索功能的 Blazor 组件，然后在需要它的 Blazor 项目中使用它。
你说，关于 js 的变化，_但我不能访问那个_，是的，你可以通过 JS Interop 访问。

标签： javascript asp.net-core blazor blazor-server-side

【解决方案1】：

<select @bind="productInfo.CategoryId" 
                                           @bind:event="oninput"
                                @onchange="categoryClick"
                                           class="form-control">
                            @if (categories is null)
                            {
                                <p><em>Loading</em></p>
                            }
                            else
                            {
                                @foreach (var item in categories)
                                {
                                    <option value="@item.Id">@item.CategoryName</option>
                                }
                            }
                        </select>

【讨论】：

不能在同一个元素上使用 bind 和 onchange，因为 bind 实现了它自己的 onchange 事件。

【解决方案2】：

我也有同样的问题。我的临时修复是使用IJSRuntime 为这种类型的组件手动绑定值，该组件由第三个 js 库（例如：select2 库）呈现。 - Component.razor：

<select id="Name" class="form-control select2">
    <option @key="key">...</option>
</select>

form.js：

window.forms = {

init: function () {
    $('.select2').select2();
},
selecte2BindOnChange2: function (id, dotnetHelper, nameFunc, namePro) {
$('#' + id).on('select2:select', function (e) {
    dotnetHelper.invokeMethodAsync(nameFunc, namePro, $('#' + id).val());
});

} }

类函数：

    public async Task InitFormAsync()
    {
        await _jSRuntime.InvokeVoidAsync("forms.init");
        var properties = this.GetType().GetProperties()
            .Where(c => c.GetCustomAttributes(false)
                .Any(ca => ca is FieldAttribute && ((FieldAttribute)ca).Type == FieldType.Combobox));
        foreach (var p in properties)
        {
            await _jSRuntime.InvokeVoidAsync("forms.selecte2BindOnChange2", p.Name, DotNetRef, "Change_" + this.GetType().Name, p.Name);
        }
    }

    [JSInvokable("Change_Model")]
    public void Change(string nameProperty, string value)
    {
        if (value == "null")
        {
            this.SetValue(nameProperty, null);
        }
        else
        {
            this.SetValue(nameProperty, value);
        }
    }

【讨论】：