MVC View common layouts

Common layouts

You can define a layout that is common to several views as a .cshtml file. You can also divide your template to contain header, footer etc. Use RenderSection and pass the section name as the first parameter and boolean value indicating if the section is required. Let’s create CommonLayout.cshtml file like this:

<html>
    <head>
        <title>@RenderSection("ProductHead", true)</title>
    </head>
 <body>
   <header>
       @RenderSection("ProductHeader", true)
   </header>

   Common view content 1
   @RenderBody()
   Common view content 2
<footer>
        @RenderSection("ProductFooter", true)
   </footer>
</body>

Then apply it in your view like show below. Shared folder contains views, layouts or partial views which will be shared among multiple views.

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

@section ProductHead
{
   Tab title
}

@section ProductHeader
{
<h2>View header</h2>
}

<body>
<h2>View body</h2>
<h2>Data from the view model: @Model.Name</h2>
</body>
@section ProductFooter
{
<h2>View footer section</h2>
}

The result is as follows: