Skip to main content

Layout Views

Layout views in MVC are similar to Master pages in ASP.Net. Layout view contains page template. Layout view contains common part of page such as header, sidebar, menu and footer.
Generally there are few layout view and multiple views. If we want same header , footer and side bar on multiple pages then we can create one layout view which contains header, footer and sidebar.
After that we create multiple views for specific pages and then we link layout view with views. Content of view is merged with layout view and combined html is sent to browser.
We use @RenderBody() method in Layout view to merge output of specific view. I am using the project which I have developed in my article First MVC Application. Please see that project before reading further.

Open project in visual studio and right click on Shared folder and click on Add –> View (Shared folder is under Views folder)

Provide view name as “_Layout”, we can use any name here. Click on Add. Now, we will add html markup in Layout view. In article First MVC Application , we have copy paste same html on multiple views for similar format.
Below is the markup of Layout view:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.4.1.js"></script>
<script src="~/Scripts/umd/popper.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-info navbar-dark">
<a class="navbar-brand" href="#">Logixn</a>
<div class="col-8">
<ul class="navbar-nav">
    <li class="nav-item">
        <a class="nav-link" href="/home/index">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="/home/about">About</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="/home/contact">Contact</a>
    </li>
</ul>
</div>
</nav>
<div class="container-fluid">
@RenderBody()

</div>
</body>
</html>

In above Layout view, method @RenderBody() is used. This method will insert html output of indvidual view at the same location where it is used.

Now we will delete existing views Index, About and Contact from Home folder which is located under Views folder.

Now open Home Controller and right click on Index() action method and select Add View:

Select checkbox ‘Use a layout page’. Since now we have layout view so we will use that.Click on highlighted button to select layout view:

Below is the markup of Index view:

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>

Layout property in Index view links it to layout view. Now we will add some html to this Index view.

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

<div class="jumbotron">
    <h2>Welcome to MVC application</h2>
</div>

During request processing for Index action, @RenderBody() will be replaced by HTML of Index view and final merged HTML is sent in reponse to browser.

Now Press F5 and start debugging , below is the output of Index view :

Now we will add About and Contact view, below is the markup of both view:

About View

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

<div class="jumbotron">
    <h2>This is About page</h2>
</div>

Contact View

@{
    ViewBag.Title = "Contact";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="jumbotron">
    <h2>This is Contact page</h2>
</div>

You can download the project using below URL:

http://contents.logixn.com/projects/MVCApplicationLayout.rar