在DropDownListFor上添加搜索功能

Question

我想知道是否有人可以帮我解决我面临的问题。 我正在尝试使用razor在DropDownListFor上创建搜索。

private List<SelectListItem> LoadStockitems()
{
    List<SelectListItem> selectItems = new List<SelectListItem>();
    foreach (var role in GetStockItemsFromDB())
    {
        SelectListItem listItem = new SelectListItem();
        listItem.Value = role.StockCode;
        listItem.Text = role.Description;
        selectItems.Add(listItem);
    }
    return selectItems;
}

ViewBag.AllStockList  = LoadStockitems();

视图

@Html.DropDownListFor(x =>
    x.StockCode,
    (IEnumerable<SelectListItem>)ViewBag.AllStockList,
    new {
        @class = "form-control",
        @Value = @Model.Description,
        onchange = "this.form.submit();"
})

我可以使用Html做到这一点，但我无法弄清楚如何使用剃须刀。 在HTML中，

@using (Html.BeginForm("Hello", "Hello"))
{
    <div class="form-group">
        <label class="control-label"> Select A Customer </label>
        <select class="selectpicker bs-select form-control"
                name="CustomerID"
                onchange="this.form.submit()"
                data-show-subtext="true"
                data-live-search="true">
            @foreach (var Customer in @Model.CustomerSelect)
            {
                <option value="@Customer.CustomerID"
                        data-subtext="@Customer.ContactName">
                    @Customer.Name
                </option>
            }
        <select>
        <input type="hidden" name="SearchButton" value="true">
    </div>
}

如何在DropDownListFor上创建搜索，是否有像su​​btext属性...？

Answer 1

您正在使用名为bootstrap-select的引导程序插件。 要在剃须刀视图中使用它，请执行此操作。

@Html.DropDownListFor(x =>
    x.StockCode,
    (IEnumerable<SelectListItem>)ViewBag.AllStockList,
    new
    {
        @class = "form-control selectpicker",
        @Value = @Model.Description,
        onchange = "this.form.submit();"
})

除了添加类selectpicker之外，不要更改剃刀视图中的任何内容。 现在通过像这样在JavaScript中设置选项来初始化插件。

$(document).ready(function() {
    $('.selectpicker').selectpicker({
        liveSearch: true,
        showSubtext: true
    });
});

演示： http ： //jsfiddle.net/codeandcloud/a5r2vyu2/1/
文档： https ： //silviomoreto.github.io/bootstrap-select/options/

要添加数据- *在剃刀语法属性replace -用_这样。

@Html.DropDownListFor(x =>
    x.StockCode,
    (IEnumerable<SelectListItem>)ViewBag.AllStockList,
    new
    {
        @class = "form-control selectpicker",
        @Value = @Model.Description,
        onchange = "this.form.submit();",
        data_show_subtext="true",
        data_live_search="true"
})

阅读本文和此内容 。