Lesson Tuesday

In this lesson, we'll learn a few ways to DRY up the project structure of our front-end files.

Layout Files


So far, our view files have contained a full HTML template, including both a <head> and a <body>. However, we usually only need to change the body of the page. We can turn this code into a layout view, which allows us to reuse the same code and content on multiple pages.

In addition to saving us some typing, layout views also give us a way to give our site a uniform look and feel.

Now let's create a layout file for our To-Do List, containing an HTML skeleton and some CSS to use throughout our application.

Inside the Views folder, create another folder named Shared. This name is a convention that states these views will be "shared" with the project's components. Inside that folder, create a file named _Layout.cshtml. The leading underscore is another naming convention that indicates the file is not intended to be used directly. Now let's add some code.

Views/Shared/_Layout.cshtml
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My To-Do List!</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="~/css/styles.css">
  </head>
  <body>
    @RenderBody()
  </body>
</html>

This is a standard HTML skeleton using Bootstrap and custom CSS. There's one new addition: the code @RenderBody() is where we'll load our views.

Now let's add a view that uses this layout.

Views/Home/Index.cshtml
@{
  Layout = "_Layout";
}

...

The code at the top of the page is called a Razor code block and it's another way to indicate Razor code. In this case, we're letting the page know that we want to use _Layout.cshtml as the layout file.

Now when we load the page, we'll see that Bootstrap, our custom CSS, and our custom page title have all been applied.

Partials


Let's look at one more feature of the Razor view engine before we move on: partial views. If we have a section of a page that we'd like to reuse, we can write it once in a partial view. Then we can insert that partial view where it's needed.

To illustrate, let's create a footer view that we can use.

Views/Shared/Footer.cshtml
<div id="footer">Bottom div content</div>

Let's also add some CSS that will fix the footer to the bottom of the page:

wwwroot/css/styles.css
div#footer {
    position:fixed;
    bottom:0px;
    left:0px;
    width:100%;
    color:#CCC;
    background:#333;
    padding:8px;
}

Finally, we add the following code where we want the partial to load. In this case, we want it to load underneath the page content, so we will put it in our layout file:

Views/Shared/_Layout.cshtml
<!DOCTYPE html>
<html>
  ...
  <body>
    @RenderBody()
    @await Html.PartialAsync("Footer")
  </body>
</html>

Now when we load up the page, there will be a footer on the bottom of the page. All we did was add this code to a view file:

@await Html.PartialAsync("Footer")

The name of the view file will be the argument of the Partial method. If we have a header partial in Header.cshtml, we'd use @await Html.PartialAsync("Header") to display it.

Just to clarify, we can use the code @await Html.PartialAsync("viewname") in any view, not just layout files. We can use this to construct our web pages in sections and stitch them together as needed. This makes our view code much DRYer.

Repository Reference

Follow the link below to view how a sample version of the project should look at this point. Note that this is a link to a specific commit in the repository.

Example GitHub Repo for To Do List

Layout view: A view that allows us to reuse the same code and content on multiple pages.

Partial view: Reusable section of code that can be inserted into other views.

Razor code block: A way to indicate Razor code that looks like this:

@{
}

Using Layouts

Views/Shared/_Layout.cshtml
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My To-Do List!</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="/css/styles.css">
  </head>
  <body>
    @RenderBody()
  </body>
</html>

Using the layout in a view:

Views/Home/Index.cshtml
@{
  Layout = "_Layout";
}

...

Using Partials

A sample partial for a footer:

Views/Shared/Footer.cshtml
<div id="footer">Bottom div content</div>

Adding the partial to another file:

Views/Shared/_Layout.cshtml
<body>
  @await Html.PartialAsync("Footer")
</body>

Lesson 9 of 11
Last updated more than 3 months ago.