如何将Bootstrap下拉样式应用于ASP.NET MVC DropDownList？

Question

给出以下MVC剃刀代码,它从列表中创建一个下拉列表:

@Html.DropDownList("MyTestList", null, new { @class = "btn btn-default dropdown-toggle" })

这将创建以下下拉列表:

使用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>

它将显示如下的下拉列表:

问题:@Html.DropDownList使用MVC中的HTML代码时,是否可以获得相同的外观和感觉？

Answer 1

这是非常可能的,而且非常简单.请阅读: DropDownList引导样式

所有你需要的是:

@Html.DropDownList("movieGenre", "All", new { @class = "form-control"})

要么

@Html.DropDownListFor(model => model.MovieGenreModel, SelectList, new { @class = "form-control"})

Answer 2

使用Razor的@Html.DropDownList()方法创建你提到的Bootstrap下拉列表是不可能的.虽然创建自己的HTML帮助程序很容易,但是它会创建创建上述下拉列表所需的代码.

有很多教程和指南(例如本教程)将指导您完成创建自定义HTML帮助程序的过程.它们真的不是那么难以创建,并且可以真正帮助加快开发时间并鼓励代码重用.

更新:

鉴于这个问题的关注程度正在得到以下(不正确的)答案得到的upvotes的数量,这是一个早就应该(一年半!)的代码示例,其中包含一个图像来演示差异.

您可以将此代码复制并粘贴到您的解决方案中,它应该可以运行.

代码:

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>

}

Answer 3

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

你只需要添加@ class ="form-control".它工作正常.但我也用Html.Begin形式()包含它;