In this article I will explain with an example, how to use _layout.cshtml in ASP.Net MVC Razor.
The Layout Page (_layout.cshtml) of a View is used in scenario where there are multiple Views and there is some design which needs to be kept common, let’s say Header and Footer.
Basically, Layout Page (_layout.cshtml) shares the common design which is shared among all the Views in the project.
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.
![Using _layout.cshtml in ASP.Net MVC]()
2. You will need to provide a suitable Name to the View. In order to use Layout Page “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.
![Using _layout.cshtml in ASP.Net MVC]()
Once you click Add button, the following View is created along with the Layout Page as shown below.
![Using _layout.cshtml in ASP.Net MVC]()
View
Following is the HTML Markup of the generated View.
@{
ViewBag.Title = "Index";
}
<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.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<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>
@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
</ul>
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr/>
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
</body>
</html>
Adding another View
When adding another View, you will simply need to Browser and select the Layout Page created earlier and then click Add button.
![Using _layout.cshtml in ASP.Net MVC]()
Screenshot
![Using _layout.cshtml in ASP.Net MVC]()
Downloads
