在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，但我无法弄清楚如何使用剃刀做。 在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搜索，并有像潜台词属性什么...？

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/

要添加数据 - *属性在剃刀语法与_这样的替换-。

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