当Blazor中的下拉框值发生改变时，如何触发onchange事件？

Question

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

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

如果我使用chosen来初始化下拉菜单，那么我就无法检测到on change事件，但其他方式可以。 我正在使用带有.NET Core 3.0.1的Blazor GL - 服务器端。

- abdul qayyum

---

选择的选择是什么？我只听说过它作为一个jquery插件。这意味着您有两个东西（Blazor和jQuery）同时在DOM中操作<SELECT>并竞争。这不是一个好主意。 - David Masterson

Chosen是一个库，通过添加额外的div来为下拉列表添加搜索功能。现在我知道当您更改Chosen中的值时，实际下拉列表中的值不会更改，但这太常见了，我们已经习惯了它，几乎每个人都需要它。 - abdul qayyum

https://harvesthq.github.io/chosen/ - abdul qayyum

我的观点是，您有两个框架同时尝试管理DOM。这将会导致问题。很容易创建一个具有类似搜索功能的Blazor组件，然后在需要时在您的Blazor项目中使用它。 - David Masterson

你说，关于 js 的更改，但我无法访问到它，是的，你可以通过 JS 互操作访问到它。 - dani herrera

Answer 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>

- TK sharma

---

无法在同一元素上使用bind和onchange，因为bind实现了自己的onchange事件。 - Joshua Holden

Joshua是正确的，而且你的下拉菜单中没有包括chose-select类； - Giovanni Romio

Answer 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());
  });
  

  } }

• class function:

      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);
          }
      }
  

- Nguyễn Văn Biên