Building the Blog Layout

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!

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

   <!DOCTYPE html>
   <html>
   <head>
       <title>@ViewData["Title"] - My Blog</title>
   </head>
   <body>
       <header>
           <nav>
               <a href="/">Home</a>
               <a href="/Blog">Blog</a>
           </nav>
       </header>
       <main>
           @RenderBody()
       </main>
       <footer>
           &copy; 2024 - My Blog
       </footer>
   </body>
   </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.

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:

@page
@{
    Layout = "_Layout";
}
<h1>Welcome to the blog!</h1>
<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.

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

• First, let's create the Models/BlogPost.cs file:

using System;

public class BlogPost
{
   public int Id { get; set; }
   public string Title { get; set; }
   public string Content { get; set; }
   public DateTime CreatedAt { get; set; } = DateTime.Now;
}

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:

@page
@model BlogIndexModel
@{
   Layout = "_Layout";
}
<!DOCTYPE html>
<html>
<head>
   <title>Blog Posts</title>
</head>
<body>
   <h1>Blog Posts</h1>
   <ul>
       @foreach (var post in Model.BlogPosts)
       {
           <li>
               <h2>@post.Title</h2>
               <p>@post.Content</p>
               <p><small>@post.CreatedAt.ToShortDateString()</small></p>
           </li>
       }
   </ul>
</body>
</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.

3. Finally, let's create Pages/Blog/Index.cshtml.cs:

using Microsoft.AspNetCore.Mvc.RazorPages;
using System.Collections.Generic;

public class BlogIndexModel : PageModel
{
   public List<BlogPost> BlogPosts { get; set; }

   public void OnGet()
   {
       BlogPosts = new List<BlogPost>
       {
           new BlogPost { Id = 1, Title = "First Post", Content = "This is the first blog post.", CreatedAt = DateTime.Now },
           new BlogPost { Id = 2, Title = "Second Post", Content = "This is the second blog post.", CreatedAt = DateTime.Now }
       };
   }
}

Explanation:

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

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

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorPages();
var app = builder.Build();
app.MapRazorPages();
app.Run();

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!