In this article I will explain with an example, how to implement Menu using Layout page in ASP.Net MVC Razor.
A Responsive Menu will be populated inside the Layout page using Bootstrap in ASP.Net MVC Razor.
Note: For beginners in ASP.Net MVC, please refer my article ASP.Net MVC Hello World Tutorial with Sample Program example.
 
 
Controller
The Controller consists of the following Action method.
Action method for handling GET operation
Inside this Action method, simply the View is returned.
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
}
 
 
View
1. Now you will need to Right Click inside the Controller class and click on the Add View option in order to create a View for the Controller.
Implement Menu using Layout page in ASP.Net MVC
 
2. You will need to provide a suitable Name to the View. In order to use Layout Page and hence the “Use a Layout Page” CheckBox needs to be checked.
Note: The Path of the Layout Page is left blank as it will be automatically generated.
 
Implement Menu using Layout page in ASP.Net MVC
 
Once you click Add button, the following View is created along with the Layout Page as shown below.
Implement Menu using Layout page in ASP.Net MVC
 
View
Following is the HTML Markup of the generated View.
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
 
<h2>Index</h2>
 
Layout Page
The following Layout Page is automatically generated. The RenderBody function replaces the content of the View inside the Layout Page.
The Layout Page consists of a Bootstrap Responsive Menu which consists of a Sub-Menu under the Services menu item.
An additional feature i.e., selecting the Parent Menu when the child Sub-Menu is selected, is implemented using jQuery.
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
</head>
<body>
    <link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'
          media="screen" />
    <div class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                        aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">ASPSnippets</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <div id="Menu1">
                    <ul class="nav navbar-nav">
                        <li><a class="selected" href="#">Home</a></li>
                        <li>
                            <a class="popout" href="#">Services</a><ul class="level2 dropdown-menu">
                                <li><a class="" href="#">Consulting</a></li>
                                <li><a class="" href="#">Outsourcing</a></li>
                            </ul>
                        </li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
    <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
    <script type="text/javascript">
        $(function () {
            //Remove the style attributes.
            $(".navbar-nav li, .navbar-nav a, .navbar-nav ul").removeAttr('style');
 
            //Apply the Bootstrap class to the Submenu.
            $(".dropdown-menu").closest("li").removeClass().addClass("dropdown-toggle");
 
            //Apply the Bootstrap properties to the Submenu.
            $(".dropdown-toggle").find("a").eq(0).attr("data-toggle", "dropdown").attr("aria-haspopup", "true").attr("aria-expanded", "false").append("<span class='caret'></span>");
 
            //Apply the Bootstrap "active" class to the selected Menu item.
            $("a.selected").closest("li").addClass("active");
            $("a.selected").closest(".dropdown-toggle").addClass("active");
        });
    </script>
    <div>
        @RenderBody()
    </div>
</body>
</html>
 
 
Screenshots
Desktop View
Implement Menu using Layout page in ASP.Net MVC
 
Mobile View
Implement Menu using Layout page in ASP.Net MVC
 
 
Downloads
Download Code