Событие смены огня Blazor, когда изменяется значение Chosen - PullRequest
Новая
       38

Событие смены огня Blazor, когда изменяется значение Chosen

0 голосов
/ 09 ноября 2019

У меня есть следующий 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();
    ... 
}

Теперь, если я инициализирую выпадающий список с выбранным, то я не могу обнаружить изменения, но могу это сделать другим способом. Я использую Blazor GL - Server Side с .net core 3.0.1

Ответы [ 2 ]

1 голос
/ 11 ноября 2019

У меня такая же проблема. Мое временное исправление использует IJSRuntime для значения привязки вручную для этого компонента типа, который отображается 3-ю библиотеками 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);
        }
    }
0 голосов
/ 11 ноября 2019

Я реализую это по-разному, добавляя событие 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();
    }
}
...