在 DropDownListFor 上添加搜索功能

Question

我想知道是否有人可以帮助我解决我面临的问题。我正在尝试使用剃刀在 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 来做到这一点，但我不知道如何使用 razor。 在 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 上创建搜索，是否有类似 subtext 属性的东西...？

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/

要在 razor 语法中添加 data-* 属性，请将 - 替换为 _，如下所示。

@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"
})

阅读this 和this。