What is Layout?

The main focus of the developers will be to maintain a consistent look and fell across the application (ie., all the pages within our website/application). To achieve this, Razor View Engine support a concept with a feature called “layouts”. Which can allow us to define a common template, and then we can able to inherit its look and feel across all the views/pages on our Application to make consistent look and feel.

MVC layout is same like as masterpage concept in webforms.

1. RenderBody:

What is it?

As per below example, the layout view contains html Doctype, head and body elements as like other view/page. The main difference is call to RenderBody() and RenderSection() methods in the layout.

RenderBody acts like a placeholder for other views. For example, Index.cshtml is a view which rendered layout view,where the RenderBody() method is being called.

Syntax : @RenderBody()

Example :

_Layout.cshtml

<!DOCTYPE html>
<html>
<head><title></title></head>
<body><div class=”body-content”>@RenderBody()<footer> …</footer></div>
</body>
</html>

Index.cshtml

//We can render layout in our view by calling “Layout=~/Views/Shared/_Layout.cshtml”

@{ Layout=~/Views/Shared/_Layout.cshtml}

//The below content will be render inside the @RenderBody section in layout

<div><h5>This content will be placed in the @RenderBody() section</h5></div>

2. RenderSection

What is it?

The layout have only contain one RenderBody method, but can have multiple sections. RenderSection method is used to create sections in layout. RenderSection runs code blocks which we define in our content pages.

Syntax : @RenderSection(“section name”, Boolean value)

Explanation :

In ASP.NET MVC by default, sections are mandatory. To handle this/make this optional, just we need to utilize the second parameter “false”.

@RenderSection(“scripts”, false) – Make the Scripts-RenderSection non-mandatory in all the pages/views which included  _Layout.cshtml

@RenderSection(“scripts”, true) – Make the Scripts-RenderSection mandatory in all the pages/views which included  _Layout.cshtml

Example :

_Layout.cshtml

<!DOCTYPE html>
<html>
<head><title>….</title></head><body><div class=”body-content”>
@RenderBody()
@RenderSection(“scripts”, required: false)
</div>
</body>
</html>

Index.cshtml

@{ Layout=~/Views/Shared/_Layout.cshtml}

@section scripts {<script type=”text/javascript”>alert(‘Dotnet-helpers’);</script>}

3. RenderPage

What is it?

RenderPage method is used to render other exists view in our application.In simple, the method allows us to render
code from an other view.
A layout page can have multiple RenderPage method.

Syntax: @RenderPage(“~/Views/Shared/_LoginPartial.cshtml”,model)

Explanation :

This method takes either one or two parameters.The first parameter refer the physical location of the file and second is an optional array of objects/model that can be passed into the view.

Where to Use?

If we want to keep the footer and header in separate view. In this scenario, we need to call two separate view in to the layout using RenderPage method.

Example:

Create two view partial views under the shared folder to make it as shared.

view 1 : _Header.cshtml
view 2 : _Footer.cshtml

_Layout.cshtml :

<!DOCTYPE html>
<html>
<head><title>….</title></head><body>
<div class=”header-content”>@RenderPage(“~/shared/_Header.cshtml”)</div>
<div class=”body-content”>@RenderBody()</div>
<div class=”header-content”>@RenderPage(“~/shared/_Footer.cshtml”)
</div>
</body>
</html>

Points to Remember :

  • The layout have only contain one RenderBody method, but can have multiple sections.
  • RenderSection runs code blocks which we define in our content pages.
  • RenderPage method is used to render other exists view in our application.

Other Popular Articles