Tutorial:Layout View In Razor Pages Asp.Net Core Article 2

Best Razor Pages in Asp .Net Core Part 1https://sagarjaybhay.com/asp-dot-net-core-razor-pages-by-sagar-jaybhay-part-1/

Layout View In Razor Pages Part 2

Layout View In Razor Pages concept mainly uses for a consistent look and feel. Suppose we have 100 different pages and we need to add same header and footer for this pages it is tedious work also same for if you want to add or remove something from these pages, this work is tedious so to overcome this situation Layout View In Razor Pages for a consistent look and feel.

Below is the common front end template image.

Layout View In Razor Pages
LayoutView In Razor Page

Also, these 100 pages may be required the same script files, CSS files so for that reason one place solution is _layout page or view.

This layout page act as the template for all pages which refer this page. A content page is a page that references the layout page. A content page is like a partial page is not the full page.

See the below image which contains _Layout.cshtml code

_Layout.cshtml in code
_Layout.cshtml in code

Code Of  _Layout.cshtml page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - asprazorpage</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">asprazorpage</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">
            © 2019 - asprazorpage - <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>

In this we have a common header, which contains common CSS and in body tag we have @RenderBody

Tag which dynamically places the content in the middle pane, after that below we have footer section and next to that we add common scripts required by all pages.

If you want to see simple template page looks like below

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link href="/css/site.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
       @RenderBody()
    </body>
</html>

@ RenderBody method makes the page as _layout page. Now the question comes in your mind how content page refers _layout page or more than one layout page is valid or not?

More than one _layout page is valid. For referring the layout page in the content page we need to add below tag in our content page

@{
    Layout = "_Layout";
}

But we can add this common task, which adds this Layout in _ViewStart.cshtml page which ultimately calls before every page renders on the browser.

_ViewStart.cshtml
_ViewStart.cshtml

Layout page typically named _layout.cshtml, In this leading underscore, prevent this page called directly from browser. If you see above image we specify Layout in _ViewStart.cshtml which is common practice, by doing this all page in that folder which contains that _ViewStart.cshtml refer this cshtml file and ultimately common layout is applied.

But if you want to specify a location of layout page you can do so in respective razor page also. By doing this, will override _ViewSart file instruction and refer your newly referring Layout page.

@{
    Layout = "Themes/MyTheme/_Layout";
}

Nested Layout Page:

In asp.net core razor pages nested layout page completely legal. By doing  Nesting your master layout will hold the child layout page.

_MainLayout.cshtml

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link href="/css/site.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        @RenderBody()
    </body>
</html>

_secondLayout.cshtml

@{
    Layout = "/_MainLayout";
}
<div class="main-one-col">
@RenderBody()
</div>

_thirdLayout.cshtml

@{
    Layout = "/_MainLayout";
}
<div class="main-two-col">
@RenderBody()
</div>
<div>
@RenderSection("RightCol")
</div>

In the above example master layout contains head section and style references and it contains two sub layout which _secondLayout.cshtml and _thiredlayout.cshtml.

Section In _Layout View in Razor Page

A layout can optionally reference one or more sections, by calling RenderSection. Sections provide a way to organize where certain page elements should be placed. Each call to RenderSection can specify whether that section is required or optional:

<script type="text/javascript" src="~/scripts/global.js"></script>

@RenderSection("Scripts", required: false)

If a required section isn’t found, an exception is thrown. Individual views specify the content to be rendered within a section using the @section Razor syntax. If a page or view defines a section, it must be rendered (or an error will occur).

GitHub Project Link: https://github.com/Sagar-Jaybhay/AspNerRazorPages

Sagar Jaybhay, from Maharashtra, India, is currently a Senior Software Developer. He has continuously grown in the roles that he has held in the more than seven years he has been with this company. Sagar Jaybhay is an excellent team member and prides himself on his work contributions to his team and company as a whole.

Related posts