Bootstrap-select: Is it support asp.net core Blazor?

[imprathamesh]

Hello, I am using this from last 1 year. this is the best js library to perform combobox.
I want to know is it works in asp.net core blazor spa ?

[Aveline67]

a quick but working fix blazor 5.0 preview 7 and bootstrap-select 1.13.18:

1. in main.js:

function dirtyFix(){
    $('select').selectpicker();
}

1. inside the component having selects

    public partial class myComponent
    {
        [Inject]
        IJSRuntime JSRuntime { get; set; }
        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            if (firstRender)
            {
                await JSRuntime.InvokeVoidAsync("dirtyFix");
            }
        }
    }

[Aveline67]

It is related to how jquery and blazor interacts, it it not a direct issue from bootstrap-select

[imprathamesh]

yeah. I tried but it does not showing list which is coming from database. it show nothing in dropdown. but if i put static option in select then it will shows all data and applied selectpicker css and js works fine.

where is exact problem then. can you put sample code here

[Pir-2]

Hello,

I have exactly the same problem.
As the moment I have an await in async method (OnInitializedAsync, OnAfterRenderAsync), the select is empty.

Do you have a fix ?

Thanks !

[angelru]

The same issue, any solution?

[Pir-2]

Yes, it's work for me now, but I'm not sure if it's the best solution :

My HTML select :
<select class="form-control selectpicker" data-live-search="true" name="selCustomer" @bind-value="Appointment.FkCustomerId" @bind-value:event="onchange"> @foreach (Customer customer in Customers) { <option value="@customer.Id">@customer.Firstname @customer.Lastname</option> } </select>

My customer list is initialized inside the "OnInitializedAsync" method and filled on the "OnAfterRenderAsync" method (in the firstRender == true condition).
Don't forget to init the plugin with a JS.InvokeAsync method !

`
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
Customers = await ViewModel.GetCustomersAsync(); //Fill the customers list from my datasource
}

if (Customers.Count > 0)
{
    await JS.InvokeAsync<string>("InitSelectPickerPlugin");
}

await base.OnAfterRenderAsync(firstRender);

}
`

In my JS file :
window.InitSelectPickerPlugin = () => { $('select').selectpicker(); }

Hope this help you.

[angelru]

@Pir-2
If you go multiple times to the page where you initialize the component, aren't multiple selections added?

[Pir-2]

@angelru no ! But my select is in a Bootstrap modal (I don't know if this is important for this problem)

[NicolasCARPi]

It is related to how jquery and blazor interacts, it it not a direct issue from bootstrap-select