如何将Bootstrap下拉样式应用于ASP.NET MVC DropDownList? [英] How to apply Bootstrap dropdown style to an ASP.NET MVC DropDownList?
问题描述
给出以下MVC剃刀代码,该代码从列表中创建一个下拉列表:
Given is the following MVC razor code which creates a dropdown from a list:
@Html.DropDownList("MyTestList", null, new { @class = "btn btn-default dropdown-toggle" })
这将创建以下下拉列表:
This will create the following dropdown:
使用getbootstrap.com中的代码时:
When using the code from 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:
问题:
使用@Html.DropDownList
时是否可以与使用MVC中的HTML代码时获得相同的外观?
Question:
Is it possible to get the same look and feel when using @Html.DropDownList
as when using the HTML code from MVC?
推荐答案
无法使用Razor的@Html.DropDownList()
方法创建您提到的Bootstrap下拉列表.尽管创建您自己的HTML帮助器很容易,该HTML帮助器将呈现创建上述下拉菜单所需的代码.
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.
有很多教程和指南(这样的),它将引导您完成创建自定义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.
更新:
鉴于此问题引起了人们的广泛关注,下面是(错误)答案得到了越来越多的赞成,这里是一个逾期很长(一年半!)的代码示例,其中有一个图像来演示这些差异.
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.
代码:
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();
}
}
用法:
@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>
}
这篇关于如何将Bootstrap下拉样式应用于ASP.NET MVC DropDownList?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!