只需使用指定的操作将 Razor 下拉列表转换为 Bootstrap3 下拉列表答案

【问题标题】：Simply Convert Razor Dropdown List to Bootstrap3 Dropdown List with specified actions只需使用指定的操作将 Razor 下拉列表转换为 Bootstrap3 下拉列表
【发布时间】：2014-01-27 12:08:18
【问题描述】：

这是在 Razor 视图中创建的下拉列表：

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

我需要制作一个 Bootstrap-3 下拉列表，例如：

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

但是如何定义这些列表项的操作，就像在剃刀上的先前代码中所做的那样？请帮助一些代码...

【问题讨论】：

为什么不制作自己的 HtmlHelper 来生成您想要的 HTML？
在这种情况下，我不想编写任何 javascript 或帮助程序。有什么方法可以编写在 bootstrap html 元素中定义的操作，如先前剃刀视图中定义的那样？

标签： asp.net asp.net-mvc twitter-bootstrap razor twitter-bootstrap-3

【解决方案1】：

您可以为此编写扩展方法：

namespace Your.Namespace.Goes.Here {
    public static class HtmlExtensions {
        public static string BootstrapDropdown(this HtmlHelper helper, /* params go here */) {
            // list generation code goes here
        }
    }
}

然后，您必须在 Views/Web.config 中将扩展方法注册到 Razor 引擎

<system.web.webPages.razor>
    <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
    <pages pageBaseType="System.Web.Mvc.WebViewPage">
        <namespaces>
            <add namespace="System.Web.Mvc" />
            <add namespace="System.Web.Mvc.Ajax" />
            <add namespace="System.Web.Mvc.Html" />
            <add namespace="System.Web.Optimization"/>
            <add namespace="System.Web.Routing" />

            <add namespace="Your.Namespace.Goes.Here" />
        </namespaces>
    </pages>
</system.web.webPages.razor>

【讨论】：

【解决方案2】：

因为我不想使用任何完美答案的 javascript-

<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" href="#">
    @foreach(var just_currency in currencies)
    {
        if(just_currency.Selected==true)
        {
            @just_currency.Text
        }
    }
    <i class="fa fa-angle-down pull-right"></i>
</a>
<ul class="dropdown-menu" >

    @foreach(var currency in currencies)
    {
        <li><a href="@currency.Value" >@currency.Text</a></li>

    }     

</ul>

@Dropdownlist 创建 HTML 下拉列表为select option。但我试图在引导程序上创建ul li，同时所选选项必须显示为所选项目。所以我创建了那个代码。我想每个人都会喜欢这个。谢谢大家的尝试。

【讨论】：

这是否会将列表中的项目标记为活动？看起来它只是设置了按钮的文本，并且在打开下拉列表时列表中没有活动项目。

【解决方案3】：

如果您将 id 作为属性分配给超链接，如下所示：

<ul class="dropdown-menu" >
    @foreach(var currency in Model.AvailableCurrencies)
    {
         <li><a href="" id="@currency.Id">@currency.Name</a></li>
    }     
</ul>

然后给所有的超链接附加一个点击事件，并把id读回来：

$(".dropdown-menu li a").click(function(){
      event.preventDefault();
      var id = $(this).attr('id');
      setLocation(id)

   });

请参阅此 jsFiddle 以获得完整的工作示例：

http://jsfiddle.net/srz7A/1/

请注意，在上面的演示中，setLocation 只将 id 写入控制台。

【讨论】：