Asp.net mvc 如何将引导下拉样式应用于ASP.NET MVC下拉列表？

以下是从列表中创建下拉列表的MVC razor代码：

@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代码时相同的外观？

不可能使用Razor的

@Html.DropDownList（）

方法创建您提到的引导下拉列表。尽管创建自己的HTML帮助程序非常简单，可以呈现创建上述下拉列表所需的代码

有很多教程和指南（）将引导您完成创建自定义HTML帮助程序的过程。它们真的不难创建，可以帮助您加快开发速度并鼓励代码重用

更新：

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>

}

考虑到这个问题的关注度和下面（不正确的）答案的得票率，这里有一个早就应该得到的（一年半！）代码示例，用一张图片来演示它们之间的差异

您可以将此代码复制并粘贴到您的解决方案中，它应该可以工作

代码：

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>

}

公共类BootstrapHtml
{
公共静态MvcHtmlString下拉列表（字符串id、列表selectListItems、字符串标签）
{
var按钮=新标记生成器（“按钮”）
{
属性=
{
{“id”，id}，
{“类型”，“按钮”}，
{“数据切换”，“下拉列表”}
}
};
按钮。添加CSSClass（“btn”）；
按钮。添加CSSClass（“btn默认值”）；
按钮。AddCssClass（“下拉切换”）；
按钮。SetInnerText（标签）；
button.InnerHtml+=“”+BuildCaret（）；
var wrapper=新标记生成器（“div”）；
wrapper.AddCssClass（“下拉列表”）；
wrapper.InnerHtml+=按钮；
wrapper.InnerHtml+=BuildDropdown（id，selectListItems）；
返回新的MvcHtmlString（wrapper.ToString（））；
}
私有静态字符串BuildCaret（）
{
var插入符号=新标记生成器（“span”）；
插入符号。添加CSSClass（“插入符号”）；
返回插入符号ToString（）；
}
私有静态字符串构建下拉列表（字符串id，IEnumerable项）
{
var列表=新标记生成器（“ul”）
{
属性=
{
{“类”，“下拉菜单”}，
{“角色”，“菜单”}，
{“aria labelledby”，id}
}
};
var listItem=新标记生成器（“li”）；
添加（“角色”、“演示文稿”）；
items.ForEach（x=>list.InnerHtml+=““+BuildListRow（x）+“”；
return list.ToString（）；
}
私有静态字符串BuildListRow（SelectListItem项）
{
var anchor=新标记生成器（“a”）
{
属性=
{
{“角色”、“菜单项”}，
{“tabindex”，“-1”}，
{“href”，item.Value}
}
};
anchor.SetInnerText（item.Text）；
返回anchor.ToString（）；
}
}

用法：

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>

}

@使用（Html.BeginForm（“，”，FormMethod.Post））
{
var items=新列表（）
{
新建SelectListItem（）{Text=“Item 1”，Value=“#”}，
新建SelectListItem（）{Text=“Item 2”，Value=“#”}，
};
@Label（“Before”，new{@class=“col-md-2控制标签”}）
@DropDownList（“Name”，items，“Dropdown”，new{@class=“form control”}）






@Label（“After”，new{@class=“col-md-2控制标签”}）
@BootstrapHtml.Dropdown（“dropdownMenu1”，项，“Dropdown”）
}

---

您只需添加@class=“表单控件”。它很好用。但我也将其封装在一个Html.beginform（）中

这是非常可能的，而且非常简单。请阅读：

您所需要的只是：

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

或

添加

@class=“form control”

不适用于

@Html.DropDownListFor

。也就是说，您可以通过复制其他

“表单控件”

输入的样式（例如通过开发人员工具），然后将

@Html.DropDownListFor

包装在一个

div

中，您可以给它一个id（例如

#我的选择器

）。设置

div的子项的样式，例如：
#我的选择器
>选择{…正常引导表单控件样式}
尝试以下代码：

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

我有一个在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>


分配

@foreach（在（IEnumerable）ViewBag.user中的变量用户）
{
@用户文本
}


View.user直接从数据库获取用户名。
Jope这正是你们中的一些人想要的。
类似于Html.DropDownList的扩展方法将有助于创建所需的Html输出。我使用了相同的代码，但它不适用于我。我在标签中加入了bootstrap，并添加了以下代码：Dropdown
你知道为什么吗？如果可能的话，我总是尝试包含一个代码示例，但是在这个例子中，我的时间紧迫。如果一个代码示例可以帮助您，那么我很高兴