我想知道是否有人可以帮我解决我面临的问题。我正在尝试使用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上创建搜索,是否有像subtext属性...?
答案 0 :(得分:13)
您正在使用名为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"
})