Create Layout View in Asp.Net MVC Razor View

  Total Views : 2891
  Comments : 0
 
  Keywords : Asp.net mvc layout view in razor, Create layout template in asp.net mvc, Render layout view in asp.net mvc razor view, Create page layout views with masterpage in asp.net mvc razor

Layout in razor view is similar to Master page in ASP.NET Webforms and they are use to maintain constant look and feel throughout entire application. Let’s see simple example to create Layouts in asp.net mvc razor view engine.

Adding Layout

Let’s start with adding layout in Shared folder. For adding layout right click on shared folder and select View from it

 

Add layout view in asp.net mvc razor view

 

After clicking on View from above list a new dialog will pop up for asking view name (You might be thinking why we are adding View for Layout because layout is basically a View.). Here we are adding view name as _layoutdemo.cshtml that would be like as shown below 

 

give name for add view in asp.net mvc razor view

 

After giving name just click on Add button our layout view (_layoutdemo.cshtml) will create in shared folder like as shown

 

layout file shared folder structure in asp.net mvc

  Now open our layout file(_layoutdemo.cshtml) that would contain code like as shown below 

 

@{

Layout = null;

}

 

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width"/>

<title>_layoutdemo </title>

<head>

<body>

<div>

</div>

</body>

</html>

Adding RenderSection in Layout

Now let’s add RenderSection on Layout which we have created (_layoutdemo.cshtml). Generally RenderSection will be placed in our Layout like @RenderSection. Syntax of RenderSection like as shown below

 

@RenderSection(string name)

This RenderSection will render a content of named section and specifies whether the section is required or not and RenderSection() is optional in Layout view. Here we are adding headers and footers section that would be like as shown below

 

@RenderSection("headers")

 

@RenderSection("footers")

Once we add RenderSection in our layout page (_layoutdemo.cshtml) that will be like as shown below

 

@{

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width"/>

<title>_layoutdemo</title>

</head>

<body>

<table border="1px" style="width: 100%; text-align: center;">

<tr>

<td>

@RenderSection("headers")

</td>

</tr>

<tr>

<td style="height: 500px;">

@RenderBody()

// RenderBody

</td>

</tr>

<tr>

<td>

@RenderSection("footers")

</td>

</tr>

</table>

</body>

</html>

In above code if you observe we have RenderBody() property. It works as ContentPlaceHolder that we use in asp.net webforms and render the portion of the child view that is not within a named section. Layout view must include RenderBody() method.

 

After completion of adding RenderSections in Layout now we will add a Controller and View

Adding Controller

Let's start with adding Controller and naming it as TestRazorController for that right click on Controllers folder à select Add à click on controller à Give name as TestRazorController and select template as Empty MVC Controller and click add. Once our controller created that would be like as shown below

 new controller in asp.net mvc razor view application

 

Now open newly created controller that would contain code like as shown below 

 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

 

namespace Tutorial5.Controllers

{

public class TestRazorController : Controller

{

//

// GET: /TestRazor/

public ActionResult Index()

{

return View();

}

}

}

Adding View

 Now we will add view for TestRazorController with name Index for that right click on controller à select Add View and give name as Index and click Add. Once we add view (Index.cshtml) that will be like as shown below 

 

@{

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width"/>

<title>Index</title>

</head>

<body>

<div>

</div>

</body>

</html>

Adding Section in View and Rendering Sections

Now let’s add Section in Index.cshtml. @section is for defining a content to override from a shared view. Here we will add 2 sections in this view one is Header and another one is Footer. Generally our @Section syntax will be like as shown below 

 

@section “Section name”

{
// content

}

Here we need to define Layout which we are going to use in our view like as shown below

 

@{

Layout = "~/Views/Shared/_layoutdemo.cshtml";

}

In case if we didn't define Layout option we will get error like as shown below 

 

Error in view page in case if we miss to mention layout in asp.net mvc razor application

 

Once we add both header and footer sections and layout options our view Index.cshtml will be like as shown below 

 

@{

Layout = "~/Views/Shared/_layoutdemo.cshtml";

}

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width"/>

<title>Index</title>

</head>

<body>

<div>

<table style="width: 100%">

<tr>

<td>

@section headers{

<h1>Header Content</h1>

}

</td>

</tr>

<tr>

<td>

@section Footers{

<h1>Footer Content</h1>

}

</td>

</tr>

</table>

</div>

</body>

</html>

Now lets Run Index page and check how our view look like that would be like as shown below

 

Output of Layout view in asp.net razor view with example

This way we can use Layouts in our asp.net mvc application.

 Comments (0)

Be the first to give your valuable feedback

Leave a comment

  • Default Tutlane User