如何在 Blazor 服务器应用程序中使用 Bootstrap-select [英] How to use Bootstrap-select in Blazor Server App

问题描述

我想在 Blazor Server 应用程序中使用 Bootstrap-select，我从 Bootstrap-select 网站执行了所有步骤(这是我的剃刀组件:

@page "/";<select class="selectpicker";数据实时搜索=真"><option data-tokens=番茄酱芥末">热狗、薯条和苏打水</option><option data-tokens=mustard">Burger, Shake and a Smile</option><option data-tokens="frosting">糖、香料和所有美好的事物</option></选择>

解决方案

您已经使用了库 javascript 文件，但缺少多个依赖项:jQuery 和 bootstrap js 文件.bootstrap-select 需要 Bootstrap js，Bootstrap js 需要 jQuery 和 popper.js

您需要阅读this了解如何完全添加 bootstrap js 文件.之后，您可以使用任何其他基于 Bootstrap 的 javascript 库.

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

查看下面的javascript代码:

window.InitSelectPicker = (dotnetHelper, callbackMethodName, pickerElementName) =>{//初始化指定的picker元素$(pickerElementName).selectpicker();//设置事件将选定的下拉值推送回 c# 代码$(pickerElementName).on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {dotnetHelper.invokeMethodAsync(callbackMethodName, $(pickerElementName).val());});}

注意 changed.bs.select 事件 被调用.这将获得选定的值.

查看带有 c# 代码的 razor 文件以初始化和回调选定的值:

//注入jsruntime调用javascript代码[注入] public IJSRuntime JSRuntime { get;放;}//保持回调选择的值公共字符串 SelectedValue { 获取；放;}//调用 javascript 方法来初始化选择选择器受保护的覆盖异步任务 OnAfterRenderAsync(bool firstRender){if (firstRender)//每页渲染只需要调用一次{await JSRuntime.InvokeVoidAsync("InitSelectPicker", DotNetObjectReference.Create(this), "OnSelectedValue", ".selectpicker");}}//将被javascript触发的方法，需要传递方法名[JSInvokable]公共无效 OnSelectedValue(字符串 val){SelectedValue = val;StateHasChanged();}

完整的源代码这里

I want to use Bootstrap-select in Blazor Server app, i did all steps from Bootstrap-select website(https://developer.snapappointments.com/bootstrap-select/) to my blazor server app and also install bootstrap-select package from NuGet package manager but there is no effect to select element. Is it possible to use Bootstrap-select in blazor app. I will be very thankful if somebody help.

It is my razor Component:

@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>

解决方案

You have used the library javascript files but are missing multiple dependencies: jQuery and bootstrap js files. bootstrap-select requires Bootstrap js and Bootstrap js requires jQuery and popper.js

You need to read this on how to fully add bootstrap js files. After that you can use any other Bootstrap based javascript library.

Preferably, you will also need to call the bootstrap-select init code after the page has rendered.

See the below javascript code:

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());
    });    
}

Note the changed.bs.select event being called. which will get the selected value.

See the razor file with c# code to init and callback selected value:

// 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();
}

Complete source code here

这篇关于如何在 Blazor 服务器应用程序中使用 Bootstrap-select的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！