In this article I will explain with an example, how to implement
Menu using Layout page in
ASP.Net Core (.Net Core 8)
MVC.
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
{
public IActionResult Index()
{
return View();
}
}
Adding Layout Page
In order to create a Layout Page in
ASP.Net Core MVC, you need to follow the below steps:
Inside the Solution Explorer, Right Click on the Views folder and then add a New Folder named Shared.
Now, Right Click on the Shared folder and then select the Add, then New Item option from the context menu.
Finally, from the Add New Item dialog window select Razor Layout and give a suitable Name and click on the Add Button.
![ASP.Net Core MVC: Implement Menu using Layout page]()
Inside the Layout Page, 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>
View
Now inside the Controller class, Right Click inside the Action method and click on the Add View option in order to create a View for the Controller.
![ASP.Net Core MVC: Implement Menu using Layout page]()
In order to use
Layout Page, the “Use a Layout Page”
CheckBox needs to be checked and the path of the
Layout Page must be set.
![ASP.Net Core MVC: Implement Menu using Layout page]()
Finally, click the Add button, and the View is created.
@{
ViewData["Title"] = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
Screenshots
Desktop View
![ASP.Net Core MVC: Implement Menu using Layout page]()
Mobile View
![ASP.Net Core MVC: Implement Menu using Layout page]()
Downloads
