asp.net-mvc 如何将 Bootstrap 下拉样式应用于 ASP.NET MVC DropDownList？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26555493/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to apply Bootstrap dropdown style to an ASP.NET MVC DropDownList?
提问by Manuel
Given is the following MVC razor code which creates a dropdown from a list:
给定的是以下 MVC razor 代码，它从列表中创建一个下拉列表：
@Html.DropDownList("MyTestList", null, new { @class = "btn btn-default dropdown-toggle" })
This will create the following dropdown:
这将创建以下下拉列表：
When using the code from getbootstrap.com:
使用 getbootstrap.com 中的代码时：
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">test1</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">test2</a></li>
</ul>
</div>
It will show the dropdown like this:
它将显示如下下拉列表：
Question:
Is it possible to get the same look and feel when using @Html.DropDownListas when using the HTML code from MVC?
问题：是否可以在使用@Html.DropDownList时获得与使用 MVC 中的 HTML 代码时相同的外观和感觉？
回答by Mikael Nilsson
It is very much possible, and really easy. Please Read: DropDownList bootstrap styling
这是非常有可能的，而且非常容易。请阅读： DropDownList 引导程序样式
All you need is:
所有你需要的是：
@Html.DropDownList("movieGenre", "All", new { @class = "form-control"})
or
或者
@Html.DropDownListFor(model => model.MovieGenreModel, SelectList, new { @class = "form-control"})
回答by Joseph Woodward
It's not possible to use Razor's @Html.DropDownList()method to create the Bootstrap dropdown you've mentioned. Though it'ss easy enough to create your own HTML helper that renders the code necessary to create the aforementioned dropdown.
无法使用 Razor 的@Html.DropDownList()方法来创建您提到的 Bootstrap 下拉列表。尽管创建自己的 HTML 帮助程序很容易，该帮助程序呈现创建上述下拉列表所需的代码。
There are plenty of tutorials and guides (such as this one) that will take you through the process of creating a custom HTML Helper. They're really not that difficult to create and can really help speed up your development times and encourage code reuse.
有大量教程和指南（例如本指南）将带您完成创建自定义 HTML 帮助程序的过程。它们真的不难创建，并且可以真正帮助加快您的开发时间并鼓励代码重用。
Update:
更新：
Given the amount of attention this question is getting an the number of upvotes the (incorrect) answer below is getting, here is a long overdue (year and a half!) code sample with an image to demonstrate the differences.
考虑到这个问题的关注度和下面的（不正确的）答案所获得的赞成票一样多，这里有一个迟来的（一年半！）代码示例，其中包含一张图片来演示差异。
You can copy and paste this code into your solution and it should work.
您可以将此代码复制并粘贴到您的解决方案中，它应该可以工作。
The code:
编码：
public class BootstrapHtml
{
public static MvcHtmlString Dropdown(string id, List<SelectListItem> selectListItems, string label)
{
var button = new TagBuilder("button")
{
Attributes =
{
{"id", id},
{"type", "button"},
{"data-toggle", "dropdown"}
}
};
button.AddCssClass("btn");
button.AddCssClass("btn-default");
button.AddCssClass("dropdown-toggle");
button.SetInnerText(label);
button.InnerHtml += " " + BuildCaret();
var wrapper = new TagBuilder("div");
wrapper.AddCssClass("dropdown");
wrapper.InnerHtml += button;
wrapper.InnerHtml += BuildDropdown(id, selectListItems);
return new MvcHtmlString(wrapper.ToString());
}
private static string BuildCaret()
{
var caret = new TagBuilder("span");
caret.AddCssClass("caret");
return caret.ToString();
}
private static string BuildDropdown(string id, IEnumerable<SelectListItem> items)
{
var list = new TagBuilder("ul")
{
Attributes =
{
{"class", "dropdown-menu"},
{"role", "menu"},
{"aria-labelledby", id}
}
};
var listItem = new TagBuilder("li");
listItem.Attributes.Add("role", "presentation");
items.ForEach(x => list.InnerHtml += "<li role=\"presentation\">" + BuildListRow(x) + "</li>");
return list.ToString();
}
private static string BuildListRow(SelectListItem item)
{
var anchor = new TagBuilder("a")
{
Attributes =
{
{"role", "menuitem"},
{"tabindex", "-1"},
{"href", item.Value}
}
};
anchor.SetInnerText(item.Text);
return anchor.ToString();
}
}
Usage:
用法：
@using (Html.BeginForm("", "", FormMethod.Post))
{
var items = new List<SelectListItem>()
{
new SelectListItem() { Text = "Item 1", Value = "#" },
new SelectListItem() { Text = "Item 2", Value = "#" },
};
<div class="form-group">
@Html.Label("Before", new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.DropDownList("Name", items, "Dropdown", new { @class = "form-control"})
</div>
</div>
<br/>
<br/>
<br/>
<div class="form-group">
@Html.Label("After", new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@BootstrapHtml.Dropdown("dropdownMenu1", items, "Dropdown")
</div>
</div>
}
回答by user2592866
@using (Html.BeginForm("Index", "ELibrary"))
{
@Html.DropDownListFor(m => m.Status, new SelectList(Model.StatusItems, "key", "value"), "-- Status --", new { onchange = "this.form.submit();", @class = "form-control" })
}
You just have to add @class="form-control" . It works fine. but I have also enclosed it in a Html.Begin form();
你只需要添加 @class="form-control" 。它工作正常。但我也将它包含在一个 Html.Begin 表单（）中；
回答by Ahmad Aghazadeh
Try this code :
试试这个代码：
@Html.DropDownListFor(model => model.MovieGenreModel, SelectList,
new { @class = "form-control",aria_describedby="dropdownMenu1"})
回答by Adam Lee
I have got a bootstrap button working in ASP.net MVC with a real-life example that I am using at my current place of work.
我有一个在 ASP.net MVC 中工作的引导程序按钮，其中包含一个我在当前工作地点使用的真实示例。
<div class="dropdown" style="display:inline-block">
<button class="btn btn-warning dropdown-toggle" type="button" data-toggle="dropdown" value="@Model.Id" runat="server"><span class="glyphicon glyphicon-user"></span> Assign <span class="caret"></span></button>
<ul class="dropdown-menu" onclick="location.href='@Url.Action("AssignTicket", "Home", new {AssignId = Model.Id })'">
@foreach (var user in (IEnumerable<SelectListItem>)ViewBag.User)
{
<li>@user.Text</li>
}
</ul>
</div>
The View.user is getting the users name directly from the database. Jope this is what some of you were looking for.
View.user 直接从数据库中获取用户名。Jope 这就是你们中的一些人正在寻找的。
回答by AAW238
Adding @class = "form-control"doesn't work for @Html.DropDownListFor. That being said you can mirror the styles of the other "form-control"inputs by copying those styles (e.g. through Developer Tools) and then wrap the @Html.DropDownListForin a divthat you give an id (e.g. #my-selector). Style the child of the div, for example: #my-selector> select { ...normal bootstrap form-control styles}
添加@class = "form-control"对@Html.DropDownListFor. 话虽如此，您可以"form-control"通过复制这些样式（例如通过开发人员工具）来镜像其他输入的样式，然后将其包装@Html.DropDownListFor在div您提供 id 的 a 中（例如#my-selector）。为 的子项设置样式div，例如：#my-selector> select { ...normal bootstrap form-control styles}
回答by FunkMonkey33
I implemented your solution and it works.
我实施了您的解决方案，并且有效。
What is now needed is a BootstrapHtml.DropdownFor, instead of just dropdown. We really need to be able to update a model property when the dropdown selection is changed.
现在需要的是 BootstrapHtml.DropdownFor，而不仅仅是下拉菜单。当下拉选择更改时，我们确实需要能够更新模型属性。
