CODEWITHSUNDEEP
asp.netasp.net-mvctwitter-bootstraprazortwitter-bootstrap-3
Sujit
Sujit

Reputation: 790

Simply Convert Razor Dropdown List to Bootstrap3 Dropdown List with specified actions

Here is the Dropdown 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 Dropdown List Like:

<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 define the action of those list items as it is done on previous code on razor? Please help with some code...

Upvotes: 3

Views: 3167

Answers (3)

Sujit
Sujit

Reputation: 790

As i did not want to use any javascript that 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 creates HTML dropdownlist as select option. But i was trying to create ul li on bootstrap and in the mean time the selected option must to be shown as selected item. So I created that code. I think everyone will like this. Thanks everybody for trying.

Upvotes: 1

hutchonoid
hutchonoid

Reputation: 33305

If you assign an id 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 a click event to all the hyperlinks and read the id back out:

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

   });

Please see this jsFiddle for a full working example:

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

Please note that the setLocation only writes the id out to the console in the above demo.

Upvotes: 0

mstaessen
mstaessen

Reputation: 1317

You could write extension methods to do so:

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

You must then register the extension methods to the Razor Engine in your 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>

Upvotes: 1

Related Questions