Blazor fire onchange event when Chosen drop down value changes

4
votes

I have following html that works but when I render drop down with Chosen it stops working. because chosen do not update actual drop down value it creates its own element that holds selected value. but i can not access that so how to trigger the onchange event then?

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

Now if I initialize drop down with chosen then I can not detect on change but can other wise. I am using Blazor GL - Server Side with .net core 3.0.1

2
javascriptasp.net-coreblazorblazor-server-side
What is chosen-select? I only have heard of it as a jquery plugin. Which would mean you have 2 things (blazor and jquery) manipulating the <SELECT> in DOM at the same time and competing. Which is not a good idea. - David Masterson
Chosen is a library that adds search capabilities to drop down by adding an extra div. Now I know that when you change value in chosen it does not change in actual drop down but it is too common and we are so used to it that mostly every one needs it. - abdul qayyum
harvesthq.github.io/chosen - abdul qayyum
My point was that you have 2 frameworks trying to manage the DOM at the same time. Which WILL cause problems. It is easy to create a Blazor component with similar search functionality and then use that in your Blazor projects where it is needed. - David Masterson
You say, about js changes, _ but i can not access that_, and yes, you can access that via JS Interop. - dani herrera

2 Answers

4
votes

<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>
2
votes

I have the same problem. My temp fix is using IJSRuntime for manual binding value for this type component which is rendered by 3rd js libraries (Example: select2 library). - 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);
        }
    }