In this article I will provide a simple Tutorial with an example on how to use Layout Page with View in ASP.Net MVC Razor.
The Layout Page 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 or may be Right content.
This Layout Page concept is very similar to the Master Pages in ASP.Net Web Forms.
Note: For beginners in ASP.Net MVC, please refer my article ASP.Net MVC Hello World Tutorial with Sample Program example.
 
 
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 (Master) Pages 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 (Master) Pages In ASP.Net MVC
 
Once you click Add button, the following View is created along with the Layout Page as shown below.
Using Layout (Master) Pages 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>&copy; @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 (Master) Pages In ASP.Net MVC
 
 
Screenshot
Using Layout (Master) Pages In ASP.Net MVC
 
 
Downloads
Download Code