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.
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.
Writing HTML and Razor Syntax for the Layout:
Let's create _Layout.cshtml
in the Pages/Shared
folder:
HTML, XML1<!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 © 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.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, XML1@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.<h1>
and <p>
tags provides content for the home page.The blog page will display a list of blog posts by leveraging a model.
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, XML1@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.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.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();
In this lesson, we've built a foundational layout for your blog using Razor Pages. Here's a quick recap:
_Layout.cshtml
for a consistent structure.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!