Learn About Layout Page In ASP.NET MVC

As a developer, you always want to write that type of code or design which can be reusable again and again. In term of look and design of any website, we use Layout page to define the consistent look and feel across the whole application. There is some requirement to create a standard look and feel in which some data always show on every page like it can be Menu Bar, Logo of the application, Header, Footer, etc.

In that scenario, we always prefer to create a layout page in ASP.NET MVC that can be used with different View with custom and consistent look and feel.

So, basically Layout View is a part of UI where we define our common component which will be accessible throughout the application. It helps us and there is no need to rewrite the same code again and again.

Footer

As we know in the web application dynamic part always change but the static part like header, footer, sidebar are always same. So here Layout View comes in picture.

When you create a default ASP.NET MVC application then it creates default _Layout.cshtml page for the application. One more view exists and it is _ViewStart.cshtml. Here we define the default layout page for all Views if layout page is not defined.

See the default code for _Layout.cshtml and _ViewStart.cshtml page. You can see header and footer are defined, which will be available on every page.

_Layout.cshtml

<!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>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</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">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
@Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>

_ViewStart.cshtml

@{
Layout = "~/Views/Shared/_Layout.cshtml";
}

Create Multiple Layout Page in Same Application

If it is required to add the multiple layouts with different page in same application then you can add multiple layout pages in the same application. But at the time of calling the layout page, you need to define the layout page name inside the View.

To add a new Layout Page, simply add a partial view inside the Shared folder with a name and bind it with any particular View or you can also directly add the layout page.

Create Multiple Layout page

Made some changes in the newly added layout page.

_MyLayout.cshtml

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
</head>
<body>
<div>
This is my custom layout page
@RenderBody()
</div>
</body>
</html>

Here is the output.

output

Thanks for reading this article, hope you enjoyed it.