intern_layout_e learn.md - brainchildservices/curriculum GitHub Wiki

Slide 1

Layout design:

On the Internet you will discover many web sites with a consistent look and feel:

  • Every page have the same header
  • Every page have the same footer
  • Every page have the same style and layout

With Web Pages this can be done very efficiently. You can have reusable blocks of content (content blocks), like headers and footers, in separate files.

You can also define a consistent layout for all your pages, using a layout template (layout file).

Many websites have content that is displayed on every page (like headers and footers).

Slide 2

With Web Pages you can use the @RenderPage() method to import content from separate files.

Content block (from another file) can be imported anywhere in a web page, and can contain text, markup, and code, just like any regular web page.

Using common headers and footers as an example, this saves you a lot of work. You don't have to write the same content in every page, and when you change the header or footer files, the content is updated in all your pages.

Slide 3

This is how it looks in code:

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

Slide 4

In the Below image you can see both the pages have Same Navbar and Footer, the only change is happened to the Contents only.

image

A layout page contains the structure, but not the content, of a web page. When a web page (content page) is linked to a layout page, it will be displayed according to the layout page (template).

Each content page must start with a Layout directive.

Slide 5

This is how it looks in code:

    @page
        @model IndexModel
        @{
            ViewData["Title"] = "Home page";
            Layout = "~/Pages/Shared/_Layout.cshtml";
        }

    <div class="text-center">
        <h1 class="display-4">Welcome</h1>
        <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
    </div>

Slide 6

With ASP.NET, files with a name that starts with an underscore cannot be browsed from the web.

If you want to prevent your content blocks or layout files from being viewed by your users, rename the files to:

_header.cshtml

_footer.cshtml

_Layout.cshtml

Slide 7

RenderSection

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)

@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

Slide 8

Example :

    @page
        @model IndexModel
        @{
            ViewData["Title"] = "Home page";
            Layout = "~/Pages/Shared/_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>}

Slide 9

  • Navigation bar:
  • For Admin -- Homepage is Admin Index page : Admin dashboard
  1. Facilitator(/Facilitator)
  2. Courses(/Course)
  3. Learners(/Learner)
  • For Facilitator -- Homepage is Facilitator/Index
  1. Facilitator(/Facilitator/Index)
  2. Courses(/Course)
  3. Learners(/Learner)
  • For Learner -- Homepage is Learner/Index
  1. Facilitator(Facilitator/Index)
  2. Courses(/Course/Index)
  3. Learners(/Learner/Index)
  • Create three Layouts under Pages Shared folder:
    • _AdminLayout
    • _FacilitatorLayout
    • _LearnerLayout
⚠️ **GitHub.com Fallback** ⚠️