Tuesday, November 24, 2015

Setting up a Bootstrap menu in ASP.NET MVC

If you want to set up a Bootstrap menu in ASP.NET MVC, obviously, the first part of doing that is to learn how to create a Bootstrap menu.

Of course, when you initially create an ASP.NET MVC project, the template will create a very basic Bootstrap menu for you, however, if you want to do something more sophisticated, you need to know how Bootstrap menus work as outlined here: http://www.w3schools.com/bootstrap/bootstrap_navbar.asp

Therefore, if you want to construct a Bootstrap menu with dropdown lists using ASP.NET MVC, you will probably end up with code similar to this:

<div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li>@Html.ActionLink("Home", "Index", "Home")</li>
            <li>@Html.ActionLink("About", "About", "Home")</li>
            <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    Dropdown Links Menu
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li>@Html.ActionLink("Link1", "Method1", "Link")</li>
                    <li>@Html.ActionLink("Link2", "Method2", "Link")</li>
                    <li>@Html.ActionLink("Link3", "Method3", "Link")</li>
                    <li>@Html.ActionLink("Link4", "Method4", "Link")</li>
                </ul>
            </li>
      </ul>

No comments:

Post a Comment