Geek asks and answers

Just convert the Razor drop-down list to the Bootstrap3 drop-down list with the specified actions

Here's a drop-down list created in 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);"  })

I need to make a Bootstrap-3 Like dropdown:

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

But how to determine the effect of these list items, how is this done on the previous code on the razor? Please help with some code ...

+3
source share
3 answers

As I did not want to use any javascript, which is the perfect answer -

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

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

Razor Engine Views/Web.config

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

If you assign an identifier to your hyperlinks as an attribute like this:

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

Then attach the click event to all hyperlinks and read the id:

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

   });

See this jsFiddle for a complete working example:

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

Note that setLocation writes id only to the console in the above demo.

0
source

More articles:


All Articles