在 razor 下拉列表中添加 CSS 类

Posted 2023-03-06

【中文标题】在 razor 下拉列表中添加 CSS 类

【英文标题】：Add CSS Class in razor Dropdownlist

【发布时间】：2014-02-18 00:59:40

【问题描述】：

我正在尝试在现有的 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>

我能做什么？

【参考方案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 元素。

【讨论】：

类已添加，但 UI 并未按应有的方式更改。好像不行。抱歉

@user3239764，请务必添加正确的类名。我不熟悉引导程序。您可能需要添加 droptdown 类而不是 dropdown-menu。

我已经添加了确切的类。但是每当添加类时，下拉列表就消失了。它不应该消失，而是应该在上面添加一些样式。

@user3239764，我不知道你使用的是什么版本的 MVC。如果您使用的是 MVC5，您应该能够使用 this 呈现 Bootstrap 下拉菜单。如果您使用的是早期版本的 MVC，那么您将使用不同的 HTML 布局呈现下拉菜单。此布局 (select) 与 Bootstrap 布局 (ul、li 等) 的结构不同。在这种情况下，您可能必须在视图中模仿 Bootstrap 布局。

我正在使用 MVC4 。有没有办法使用 bootstrap-3 在 MVC4 上创建那些下拉链接、导航等？正如我在问题上面的函数中所写的那样，如何在列表中动态添加这些数据？请对代码有任何帮助...