在 razor 下拉列表中添加 CSS 类

Question

我正在尝试在现有的 razor 下拉列表中添加 css 类。这是我的代码

var webHelper = EngineContext.Current.Resolve<IWebHelper>();

var currencies = Model.AvailableCurrencies.Select(x => new SelectListItem
    {
        Text = x.Name,
        Value = webHelper.ModifyQueryString(Url.RouteUrl("ChangeCurrency", new { customercurrency = x.Id }), "returnurl=" + HttpUtility.UrlEncode(HttpContext.Current.Request.RawUrl), null),
        Selected = x.Id.Equals(Model.CurrentCurrencyId)                                  
    });

@Html.DropDownList("customerCurrency", currencies, new { onchange = "setLocation(this.value);" })

我必须将下拉列表设置为像这样的引导下拉列表...

<li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" href="#">USD&nbsp;
                                <i class="fa fa-angle-down pull-right"></i>
    </a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a>USD</a>
                                </li>
                                <li>
                                    <a>BDT</a>
                                </li>
                                <li>
                                    <a>EU</a>
                                </li>
                            </ul>
                        </li>

我能做什么？

Answer 1

这行得通吗？

@Html.DropDownList("customerCurrency", currencies, new { onchange = "setLocation(this.value);", @class="dropdown-menu" })

看一下Bootstrap documentation for dropdowns，看来您需要应用类dropdown。但是，默认 Html 助手的下拉渲染可能与 Bootstrap 下拉所需的下拉渲染不对应，因此您的类没有达到预期的效果。

编辑（根据您的 MVC4 评论）：

要模仿 Bootstrap 下拉菜单的功能，您可以尝试使用：

<li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" href="#">USD&nbsp;
        <i class="fa fa-angle-down pull-right"></i>
    </a>
    <ul class="dropdown-menu">
        @foreach(var currency in Model.AvailableCurrencies)
        {
             <li><a href="your new target">@currency.Name</a></li>
        }     
    </ul>
</li>

您也可以尝试使用 Html.ActionLink 代替“静态”a 元素。