在DropDownListFor上添加搜索功能 [英] add search functionality on DropDownListFor

问题描述

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

I am wondering if any one could help me with a issue I am facing. I am trying to create a search on a DropDownListFor using razor.

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中，

I can do this using Html but I can not figure out how to do using razor. In 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属性之类的东西??

How can you create a search on a DropDownListFor and is there anything like subtext attribute...?

推荐答案

您正在使用名为引导选择.要在剃刀视图中使用它，请执行此操作.

You are using a bootstrap plugin called bootstrap-select. To use it in razor view, do this.

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

除了添加类selectpicker外，在剃须刀视图中请勿进行任何更改.现在，通过像这样在JavaScript中设置选项来初始化插件.

Don't change anything in the razor view except adding the class selectpicker. Now initialize the plugin by setting the options in JavaScript like this.

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

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

Demo: http://jsfiddle.net/codeandcloud/a5r2vyu2/1/
Documentation: https://silviomoreto.github.io/bootstrap-select/options/

要以剃刀语法添加data- *属性，请像这样将-替换为_.

To add data-* attributes in razor syntax replace - with _ like this.

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

阅读此和这个.

这篇关于在DropDownListFor上添加搜索功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！