在razor Dropdownlist中添加CSS类

时间:2014-01-27 09:00:58

标签: asp.net css asp.net-mvc razor twitter-bootstrap-3

我正在尝试在现有的razor dropdownList中添加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>

我该怎么办?

1 个答案:

答案 0 :(得分:4)

这有用吗?

@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元素。