如何在Blazor服务器应用程序中使用Bootstrap-select

Question

我想在Blazor Server应用程序中使用Bootstrap-select，我做了从Bootstrap-select网站(https://developer.snapappointments.com/bootstrap-select/)到我的blazor服务器应用程序的所有步骤，还从NuGet包管理器安装bootstrap-select包，但选择元素没有效果。是否可以在blazor应用程序中使用Bootstrap-select。如果有人能帮上忙，我将非常感谢。

​

它是我的剃刀组件：

@page "/"

    <select class="selectpicker" data-live-search="true">
      <option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
      <option data-tokens="mustard">Burger, Shake and a Smile</option>
      <option data-tokens="frosting">Sugar, Spice and all things nice</option>
    </select>

Answer 1

您已经使用库javascript文件，但缺少多个依赖项: jQuery和bootstrap js文件。引导选择需要引导js，引导js需要jQuery和popper.js

您需要阅读this，了解如何完全添加引导程序js文件。在此之后，您可以使用任何其他基于Bootstrap的javascript库。

最好还需要在页面呈现之后调用bootstrap-select初始化代码。

参见下面的javascript代码：

window.InitSelectPicker = (dotnetHelper, callbackMethodName, pickerElementName) => {

    // initialize the specified picker element
    $(pickerElementName).selectpicker();

    // setup event to push the selected dropdown value back to c# code
    $(pickerElementName).on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
        dotnetHelper.invokeMethodAsync(callbackMethodName, $(pickerElementName).val());
    });    
}

注意被调用的changed.bs.select event。它将获得选定的值。

参见包含要初始化和回调选定值的c#代码的剃刀文件：

// inject jsruntime to call javascript code
[Inject] public IJSRuntime JSRuntime { get; set; }

// hold the callback selected value
public string SelectedValue { get; set; }

// call the javascript method to init the select picker
protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender) // only needs to be called once per page render
    {
        await JSRuntime.InvokeVoidAsync("InitSelectPicker", DotNetObjectReference.Create(this), "OnSelectedValue", ".selectpicker");
    }
}

// method which will be triggered by javascript, need to pass the method name 
[JSInvokable]
public void OnSelectedValue(string val)
{
    SelectedValue = val;
    StateHasChanged();
}

完整的源代码here