Question

以下是在Razor View中创建的下拉列表：

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>

但是如何定义这些列表项的操作，因为它是在剃刀上的先前代码上完成的？请帮忙解决一些代码......

Answer 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 Engine

<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>

Answer 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。但我试图在bootstrap上创建ul li，同时必须将所选选项显示为所选项目。所以我创建了那个代码。我想每个人都会喜欢这个。谢谢大家的尝试。

Answer 3

如果您将超链接的ID指定为如下属性：

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

然后将click事件附加到所有超链接并读回id：

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

   });

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

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

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

使用特定操作将Razor下拉列表转换为Bootstrap 3下拉列表

3 个答案: