Lesson 4
Building the Blog Layout
Introduction

Welcome to this lesson on building the blog layout in a Razor Pages application. So far in the course, you have explored basic Razor Pages applications, displayed a list of blog posts, and understood routing in Razor Pages. In this lesson, we will take your knowledge a step further by teaching you how to create a consistent layout structure for your blog and implement specific pages for your blog posts.

Layouts are crucial in web applications because they ensure a consistent look and feel across all pages. They help you maintain uniformity and significantly reduce code duplication by defining common elements like headers and footers.

By the end of this lesson, you will be able to set up a layout for your Razor Pages application, create a home page, and build a blog page to display your blog posts. Let’s get started!

Creating the Main Layout

The _Layout.cshtml file defines the common structure for your web pages. It usually contains elements like headers, navigation menus, and footers.

  1. Purpose and Role of the Layout File: The layout file allows you to define a consistent structure across different pages of your application. By using a layout, you avoid repeating the same header, footer, and other common elements on every page.

  2. Writing HTML and Razor Syntax for the Layout: Let's create _Layout.cshtml in the Pages/Shared folder:

    HTML, XML
    1<!DOCTYPE html>
2<html>
3<head>
4    <title>@ViewData["Title"] - My Blog</title>
5</head>
6<body>
7    <header>
8        <nav>
9            <a href="/">Home</a>
10            <a href="/Blog">Blog</a>
11        </nav>
12    </header>
13    <main>
14        @RenderBody()
15    </main>
16    <footer>
17        &copy; 2024 - My Blog
18    </footer>
19</body>
20</html>

    Explanation:

    • @ViewData["Title"]: Sets the title of the web page dynamically.
    • @RenderBody(): Placeholder for the content of the individual pages that use this layout.
Building the Home Page

Next, we'll create the home page, which will use the layout we just defined. To do that, let's adjust our Pages/Index.cshtml file as follows:

HTML, XML
1@page
2@{
3    Layout = "_Layout";
4}
5<h1>Welcome to the blog!</h1>
6<p>Check out our <a href="/Blog">latest blog posts</a>.</p>

Explanation:

  • @page: Defines this file as a Razor Page.
  • Layout = "_Layout";: Specifies that this page will use the _Layout.cshtml layout.
  • The HTML within <h1> and <p> tags provides content for the home page.
Implementing the Blog Page

The blog page will display a list of blog posts by leveraging a model.

  • First, let's create the Models/BlogPost.cs file:
C#
1using System;
2
3public class BlogPost
4{
5   public int Id { get; set; }
6   public string Title { get; set; }
7   public string Content { get; set; }
8   public DateTime CreatedAt { get; set; } = DateTime.Now;
9}

Explanation:

  • Properties like Id, Title, Content, and CreatedAt define the structure of a blog post.

  • Then, let's create the Pages/Blog/Index.cshtml file:

HTML, XML
1@page
2@model BlogIndexModel
3@{
4   Layout = "_Layout";
5}
6<!DOCTYPE html>
7<html>
8<head>
9   <title>Blog Posts</title>
10</head>
11<body>
12   <h1>Blog Posts</h1>
13   <ul>
14       @foreach (var post in Model.BlogPosts)
15       {
16           <li>
17               <h2>@post.Title</h2>
18               <p>@post.Content</p>
19               <p><small>@post.CreatedAt.ToShortDateString()</small></p>
20           </li>
21       }
22   </ul>
23</body>
24</html>

Explanation:

  • @model BlogIndexModel: Binds the page to its server-side logic in BlogIndexModel.
  • @foreach: Iterates over the list of blog posts to display them.
  1. Finally, let's create Pages/Blog/Index.cshtml.cs:
C#
1using Microsoft.AspNetCore.Mvc.RazorPages;
2using System.Collections.Generic;
3
4public class BlogIndexModel : PageModel
5{
6   public List<BlogPost> BlogPosts { get; set; }
7
8   public void OnGet()
9   {
10       BlogPosts = new List<BlogPost>
11       {
12           new BlogPost { Id = 1, Title = "First Post", Content = "This is the first blog post.", CreatedAt = DateTime.Now },
13           new BlogPost { Id = 2, Title = "Second Post", Content = "This is the second blog post.", CreatedAt = DateTime.Now }
14       };
15   }
16}

Explanation:

  • List<BlogPost>: Defines a list of blog posts.
  • OnGet(): Initializes the list of blog posts when the page is accessed.
Connecting the Pieces

To make sure everything runs smoothly, we need to configure our application to use Razor Pages in Program.cs.

C#
1var builder = WebApplication.CreateBuilder(args);
2builder.Services.AddRazorPages();
3var app = builder.Build();
4app.MapRazorPages();
5app.Run();
Lesson Summary

In this lesson, we've built a foundational layout for your blog using Razor Pages. Here's a quick recap:

  • Project Setup: Established the project structure.
  • Main Layout: Created _Layout.cshtml for a consistent structure.
  • Home Page: Built a welcoming home page.
  • Blog Page: Implemented a blog page to display posts, along with the model and server-side logic.
  • Connecting Everything: Configured Razor Pages in Program.cs.

This foundation will ensure that your blog maintains consistency and clarity in its structure. Now, you can proceed to the hands-on practice exercises. Your task is to implement these steps in your own Razor Pages application. Happy coding!

Enjoy this lesson? Now it's time to practice with Cosmo!
Practice is how you turn knowledge into actual skills.