Blazor 选择下拉值更改时触发 onchange 事件

Question

我已经关注 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 核心 3.0.1 的服务器端

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>

Answer 2

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

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

• 表单.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); } }

Answer 3

您不能将 bind 指令（应该是 @bind）与 @onchange 指令一起使用，因为 @bind 指令告诉 Blazor 编译器在幕后为您创建 onchange 事件处理程序，并且两个相同类型的事件处理程序不是允许。

您可以使用此绑定版本，将属性绑定到 select 元素的 value 属性：

<select id="search" class="chosen-select" bind="@searchValue">
        ...
</select>
@Code
{
    private string searchValue {get; set:}
}

或者，改为将 searchValue 属性绑定到 select 元素的 value 属性，这里数据从属性流向 value 属性，并添加 @onchange 指令来更新属性（数据从 select 元素的 value 属性流向searchValue 属性）。 请注意，与第一个版本不同，下一个版本当然需要您手动管理绑定。

<select id="search" class="chosen-select" value="@searchValue" 
                                                 @onchange="UpdateValue">
   ...
</select>
    @Code
    {
        private string searchValue {get; set:}

        void UpdateValue(ChangeEventArgs e)
        {
           searchValue = e.Value.ToString();
           ... 
        }
    }

Answer 4

我通过在每个选项项上添加一个 onclick 事件来实现它的独特之处：

<select id="search" single class="chosen-select" value="@searchValue">
   @foreach(var value in values)
   {
      <option @onclick="() => OnItemClicked(value)>@value</option>
   }
</select>
@Code {
    private string searchValue;
    private IEnumerable<string> values = new string[]
    {
       // configure here your list of options
       "option1",
       "option2",
    }

    void OnItemClick(string value)
    {
       searchValue = value;
       StateHasChanged();
    }
}