Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

Layout view in razor pages project

Suggested Videos
Part 1 - ASP.NET Core razor pages introduction | Text | Slides
Part 2 - ASP.NET core 3.0 project file | Text | Slides

The common sections of a web application like Header, Footer and Navigation menu are defined in the layout view. Each razor page will then inject it's page specific content in the layout view. 


layout view in razor pages project


We discussed the basics of a layout view in Part 28 of ASP.NET Core MVC tutorial for beginners

Both, ASP.NET Core MVC project and Razor pages project support layout views. The differences are very minor.

Layout View or Layout Page

The first question that comes to our mind is should we call it layout view or layout page. Technically a razor page is a .cshtml file that has @page directive. This directive makes the .cshtml file a razor page. A razor view on the other hand does not have @page directive. Similarly, a layout view also does not have @page directive, so technically, it should be called a layout view and not a layout page.

Razor pages project layout view example

The following is the code from the layout view, generated by the ASP.NET Core Web Application template.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - RazorPagesTutorial</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">
                    RazorPagesTutorial
                </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
                            flex-sm-row-reverse">
                    <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">
            &copy; 2019 - RazorPagesTutorial -
            <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>

    @RenderSection("Scripts", required: false)
</body>
</html>

Bootstrap in Razor Pages Project

ASP.NET Core razor project uses Bootstrap 4 for styling. You can see the reference to Bootstrap css file in the head section of the layout view.

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

Static files in razor pages

By default, an asp.net core mvc or razor pages application will not serve static files. To be able to serve static files like JavaScript, CSS and Images
  • These files must be present in wwwroot folder and this folder must be in the root project folder
  • UseStaticFiles() middleware must be added to the Http request processing pipeline. This is the middleware that can serve static files.
We add middleware to the Http request processing pipeline in the Configure() method of the Startup class.

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Error");
        app.UseHsts();
    }

    app.UseHttpsRedirection();
    app.UseStaticFiles();

    app.UseRouting();

    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapRazorPages();
    });
}

We discussed static files middleware in detail in Part 12 of ASP.NET Core MVC tutorial.

Razor page specific title

<title> element in the <head> section sets the page title. The <head> section is defined in the layout view. So, it is the layout view that has to set the page specific title. How will the layout view know the title of each specific razor page.

Well, a razor page can pass it's specific title using ViewData

@{
    ViewData["Title"] = "Home page";
}

The layout retrieves the title from ViewData and sets it as the page title.

<head>
    <title>@ViewData["Title"] - RazorPagesTutorial</title>
</head>

Navigation menu in asp.net core razor pages project

The following section in the layout view defines the navigation menu. This is a Bootstrap 4 responsive navigation menu. On a large screen device like a Desktop the menu is fully expanded. On a small screen device like a mobile the menu is collapsed into a hamburger menu.

<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
    <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>

asp-page tag helper

As far as razor pages are concerned, the piece of HTML that stands out is the asp-page tag helper. This tag helper sets an anchor element's href attribute value to a specific page.

In the following example, asp-page points to Index.cshtml razor page

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

Generated HTML

<a class="nav-link text-dark" href="/">Home</a>

We discussed Tag Helpers from Parts 35 to 40 in ASP.NET Core MVC tutorial.

asp-append-version tag helper

This tag helper can be used as an attribute to provide cache-busting behavior for static files. For example, we could use it on an <img> or <script> element to provide cache-busting behavior for images and JavaScript files.

<script src="~/js/site.js" asp-append-version="true">
</script>

We discussed asp-append-version tag helper in Part 37 of ASP.NET Core Tutorial.

Razor layout page RenderBody

Each razor page plugs-in it's page specific content at the location where we have @RenderBody() method call.

<div class="container">
    <main role="main" class="pb-3">
        @RenderBody()
    </main>
</div>

Sections in a Layout View

A layout view in ASP.NET Core can also include one or more sections. A section can be optional or mandatory. It provides a way to organise where certain page elements should be placed.

For example, an individual razor page can plug-in custom JavaScript files using the following Scripts section. The JavaScript files will then be rendered just before the closing </body> tag.

<html>
    <body>
        @*Rest of the the HTML*@

        @RenderSection("Scripts", required: false)
    </body>
</html>

We discussed Sections in Layout View in Part 29 of ASP.NET Core MVC Tutorial.

Add new razor page

We want a new razor page that displays a list of employees. We want all razor pages related to Employees in the Employees folder. So add a new folder with name Employees in the Pages folder. Next add a new razor page withe name Index.cshtml.

add new razor page

The following list item on the Layout view, displays Employees menu item.

<li class="nav-item">
    <a class="nav-link text-dark" asp-page="/Employees/Index">
        Employees
    </a>
</li>

Navigating to /Employees/Index serves Index.cshtml razor page in the Employees folder. Since, Index.cshtml is the default, navigating to /Employees will also serve Index.cshtml razor page.

asp.net core razor pages tutorial

2 comments:

  1. Hello Venkat sir, you are an amazing online teacher.
    I can't describe in words!! Thank you very much
    Please create core API tutorials

    ReplyDelete
  2. aww the way of your teaching is proving off to a real good start for me.
    keep making tutorials for us. you're doing a great job and providing us an immense help in the world of programming.

    ReplyDelete

It would be great if you can help share these free resources