Nse Nse - 5 months ago 147
HTML Question

How to use ASP.NET DropDownList in Bootstrap navbar

I have an ASP.NET web page and I'm using Bootstrap for the UI. In the navbar I want to use an ASP.NET DropDownList but I can't get it to render like a Bootstrap DrowDown. Currently my navbar looks like this:

enter image description here

when I want it to look more like this:

enter image description here

Here is my HTML for the navbar:

<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" runat="server" href="~/">Application name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a runat="server" href="~/">Home</a></li>
<li><a runat="server" href="~/About">About</a></li>
<li><a runat="server" href="~/Contact">Contact</a></li>
</ul>

<ul class="nav navbar-nav navbar-right">
<li>
<asp:DropDownList runat="server" ID="ddlLanguage" AutoPostBack="true" CssClass="k-dropdown">
<asp:ListItem Text="English" Value="en-us" />
<asp:ListItem Text="Francais" Value="fr" />
</asp:DropDownList>
</li>
<asp:LoginView runat="server" ViewStateMode="Disabled">
<AnonymousTemplate>
<li><a runat="server" href="~/Account/Login">Log in</a></li>
</AnonymousTemplate>
<LoggedInTemplate>
<li><a runat="server" href="~/admin">Admin</a></li>
<li><a runat="server" href="~/Account/Manage" title="Manage your account">Hello, <%: Logic.HelperFunctions.GetUser.FirstName %>!</a></li>
<li>
<asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" />
</li>
</LoggedInTemplate>
</asp:LoginView>
</ul>
</div>


So I want the DropDownList for language to render on the right and centered vertically. How do I adjust the CSS? The CssClass of the server control doesn't seem to have an effect, and I need the control to be a server control, as the server changes the language of the site based on the AutoPostback from selecting a language option.

Nse Nse
Answer

I figured it out. The main problem is that the ASP.NET control renders the DropDown options as an element while Bootstrap expects an

  • element for its DropDown list. I rendered my options manually as
  • elements and use JavaScript to perform the postback. My solution is posted below.

    <ul class="nav navbar-nav navbar-right">
    <li class="k-dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><asp:Literal runat="server" Text="<%$Resources:Resources, Language%>" /><span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="#" onclick="javascript:__doPostBack('en-us','')">English</a></li>
            <li><a href="#" onclick="javascript:__doPostBack('fr','')">français</a></li>
            <li><a href="#" onclick="javascript:__doPostBack('es','')">Español</a></li>
        </ul>
    </li>
    </ul>
    
  • Comments