Learn About Layout View In Razor Pages

Introduction

In this article, we are going to discuss the Layout view in Razor pages. This article can be used by beginners, intermediate, and professionals.

This is the second article on the ASP.NET Core Razor pages series. In the first article, we have created a “Hello World” application using .Net 5 and Razor pages. I recommend reading the first article before the second article. You can find the first article here.

In this article, we are going to cover,

What is Layout View
How to pass title value from Razor pages to the layout view
Static files used on the Layout view
Render Body and Render Section
Tages (asp-area, asp-page) in Razor Layout.
How to add a new menu using Razor Layout view.

The first question that comes to mind is,

What is Layout View?

“Common sections are defined in the layout view like header, footer, menu, etc and then each project-specific content can be plugged in the layout view”.

Suppose we have web applications that have many pages with the same Header, Footer, and Menu, in this case, we should use the Layout view. Each page-specific content can be plugged into the “page – content” section of the below image.

Both project Asp.net Core MVC and Razor pages support layout view. The differences are very minor.

The next question that comes to mind is.

Should we call it Layout Page or Layout View?

@Page directive makes the “.cshtml” file as Razor page. Let’s open the layout view code and see that this tag is available or not.

Layout view is located at : pages/Shared/_layout.cshtml.

Layout view name starts with _ (underscore) which means its shared view.

Double click on _Layout.cshtml file and see that @page is available or not?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - RazorPages</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-page="/Index">RazorPages</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2021 - RazorPages - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
@await RenderSectionAsync("Scripts", required: false)
</body>
</html>

No, the Layout view does not have @page directive hence technically speaking, we can say it's a Layout view, not a Layout page.

How to pass Title from Razor page to LayoutView?

In the layout view, we have below code,

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - RazorPages</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>

Title value set from dynamic property ViewData[“Title”]. Value of viewdata is set on the Razor page. Let’s the open index.cshtml file to prove it.

@page
@model IndexModel
@{
ViewData["Title"] = "Home page";
}
<div class="text-center">
<h1 class="display-4">@Model.Message</h1>
<p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

We can see that ViewData[“Title”] value is set in the razor page which is passed in the layout view.

Static Files in Layout

Let us analyzed added static files in Layout view,

<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />

All static files are store in the lib folder. Asp.net Core MVC and Razor pages are not served static files directly. There are two conditions to server static files.

The first condition is static files should be residing in the wwwroot folder.

The second condition is it should be added to the HTTP middleware pipeline. Click on the startup.cs file and select configure method to see the pipeline.

In the lib folder, we have css files that help us to create a responsive web application.

It also has javascript files added in the layout view.

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>

Renderbody()

We can have only one Rendor body section but can have multiple render sections in the layout view.

The Render body is used to inject razor page content in the layout view page.

Render Section()

The Render section is used to inject content in the define section from the razor to the layout view. Multiple sections can be added from the razor page to the layout view. The render section is optional if not required.

Let’s see the below code to understand asp-area and asp-page tags,

<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
</li>
</ul>
</div>

There are many tags available in asp. core. In the above code, we notice two tags,

asp-page
asp-area

We will try to understand these tags,

asp-area

We all know why the area is used in .Net. To set the area name this attribute is used so routing will work properly.

Please note this attribute available with Razor pages and MVC pages with small changes.

asp-page

This attribute can be used with razor pages to set anchor href value to a specific page.

Forward slash (“/”) with the name of the page is set to this attribute. In our code, we have set Index page hence code would be,

<a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>

How to add a new Menu?

Right Click on Pages - Add - Razor Pages.

Select Razor Page - Empty and click on add button.

Provide an appropriate name and click on Add button.

New member empty razor Page added.

We will set the page title and sample message on the member page.

@page
@model RazorPages.Pages.MemberModel
@{
ViewData["Title"] = "Member";
}
<div class="text-center">
<h1 class="display-4">Welcome to Member page !!!!</h1>
</div>

Next, we will add a new Menu in Layout view – header section,

<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-page="/Index">RazorPages</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Member">Member</a>
</li>
</ul>
</div>
</div>
</nav>
</header>

Here we have added a new <li> for member and set the asp-page value as “\member”.

Let’s execute code and see the output,

Member menu has been added. Now click on Member Menu and see the output.

That’s all for this article. I hope you enjoy and learn something about the Layout view in Razor pages.