Create Layout View:

To create a new layout view in Visual Studio, right click on shared folder -> select Add -> click on New Item..

In the Add New Item dialogue box, select MVC 5 Layout Page (Razor) and give the layout page name as "_myLayoutPage.cshtml" and click Add.

You will see _myLayoutPage.cshtml as shown below.

_myLayoutPage.cshtml:
            
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
</head>
<body>
    <div>
        @RenderBody()
    </div>
</body>
</html>

 

Now, add the <footer> tag with the RenderSection("footer",true) method alongwith some styling as shown below. Please notice that we made this section as required. This means any view that uses _myLayoutPage as its layout view must include a footer section.

_myLayoutPage.cshtml :
            
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div>
        @RenderBody()
    </div>
    <footer class="panel-footer">
        @RenderSection("footer", true)
    </footer>
</body>
</html>

 

Now, let's use this _myLayoutPage.cshtml with the Index view of HomeController.

You can add an empty Index view by right clicking on Index action method of HomeController and select Add View. Select Empty as a scaffolding template and _myLayoutPage.cshtml as layout view and click Add.

This will create Index.cshtml as shown below.

Index view:

@{
    ViewBag.Title = "Home Page";
    Layout = "~/Views/Shared/_myLayoutPage.cshtml";
}

    <h2>Index</h2>

 

So now, we have created Index view that uses our _myLayoutPage.cshtml as a layout view. We will now add footer section along with some styling because _myLayoutPage requires footer section.

Index view:

@{
    ViewBag.Title = "Home Page";
    Layout = "~/Views/Shared/_myLayoutPage.cshtml";
}

<div class="jumbotron">
    <h2>Index</h2>
</div>
<div class="row">
    <div class="col-md-4">
        <p>This is body.</p>
    </div>
    @section footer{
        <p class="lead">
            This is footer section.
        </p>
    }
</div>


 

Now, run the application and you will see Index view will contain body and footer part as shown below.

Thus, you can create new layout view with different rendering methods.