Add CSS Class in razor Dropdownlist

Question

I am trying to add css class in existing razor dropdownList. Here is my code

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

I have to make the dropdown list a bootstrap dropdownlist like this...

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

What can i do?

Andrei V · Accepted Answer · 2014-01-27 09:54:53Z

4

Does this work?

@Html.DropDownList("customerCurrency", currencies, new { onchange = "setLocation(this.value);", @class="dropdown-menu" })

Taking a short look at the Bootstrap documentation for dropdowns, it appears that you need to apply the class dropdown. However, the dropdown rendering of the default Html helper might not correspond to the dropdown rendering required by the Bootstrap dropdown, hence your class does not have the desired effect.

EDIT (following your MVC4 comment):

To mimic the functionality of the Bootstrap dropdown, you could try using this:

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

You could also try to use Html.ActionLink instead of the "static" a element.

edited Jan 27, 2014 at 9:54

answered Jan 27, 2014 at 9:06

Andrei V

7,5187 gold badges48 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Sujit Over a year ago

The Class is added but the UI isn't changing as it should do. Looks like it doesn't work.Sorry

Andrei V Over a year ago

@user3239764, be sure to add the correct class name. I'm not familiar with Bootstrap. You might need to add the droptdown class instead of dropdown-menu.

Sujit Over a year ago

I have added the exact class. But whenever the class is added the dropdownlist is just gone. It should not be gone, but should add some styles on it.

Andrei V Over a year ago

@user3239764, I don't know what version of MVC you are using. If you are using MVC5, you should be able to render a Bootstrap dropdown by using this. If you are using an earlier version of MVC, then you are rendering the dropdowns using a different HTML layout. This layout (select) does not have the same structure as the Bootstrap one (ul, li, etc). In this case, you might have to mimic the Bootstrap layout in your view.

Sujit Over a year ago

I am using MVC4 . Is there any way to create those dropdownlinks, navs or etc on MVC4 using bootstrap-3 ? How can i dynamically add those data on the lists as i wrote on that functions above in the question ? any help with the code please...

|

Collectives™ on Stack Overflow

Add CSS Class in razor Dropdownlist

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related