Displaying a List of Blog Posts

Lesson 2

Introduction to Displaying Blog Posts with Razor Pages

Welcome back! In the previous lesson, you learned the basics of Razor Pages in ASP.NET Core. You set up a new project, understood the essential Program.cs file, and created and modified a simple Razor Page.

In this lesson, we'll build on that knowledge. Our goal is to display a list of blog posts on a web page using Razor Pages. By the end of this lesson, you will know how to create a model for blog posts, set up Razor Pages in Program.cs, create an HTML page to display the posts, and write the code to populate and pass data.

Let's get started!

Setting Up the BlogPost Model

First, let's create a model for the blog posts. A model in ASP.NET Core represents the structure of the data you will work with. In this case, our model will define what properties each blog post will have.

Create a new class file called BlogPost.cs in the Models folder and add the following code:

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}

Let's break it down:

Id: This is the unique identifier for each blog post.
Title: This property holds the title of the blog post.
Content: This property holds the main content of the blog post.
CreatedAt: This property records the creation date and time of the blog post, set to the current date and time by default.

This model will help us structure and manage the data for our blog posts.

Building the Index Page

First, let's create the Index page, which is responsible for displaying our blog posts. The Index.cshtml file is used for defining the HTML structure, while Index.cshtml.cs is used for the server-side logic.

Here is the code for the Index.cshtml file:

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

Explanation of the code:

The HTML structure includes a list (<ul>) that displays each blog post using a foreach loop (@foreach (var post in Model.BlogPosts)).
For each blog post, the title, content, and creation date are displayed.
The foreach loop is a control structure that allows you to iterate over a collection of items. In this case, we are iterating over a list of BlogPost objects. You can use any type that implements IEnumerable<T> as the collection for a foreach loop. Examples include arrays, lists, dictionaries, etc.

Building the Index Page: Server-Side Model

Next, let's look at the code for the Index.cshtml.cs file:

C#
1using Microsoft.AspNetCore.Mvc.RazorPages;
2using System.Collections.Generic;
3
4public class IndexModel : 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 of the code:

The IndexModel class inherits from PageModel, which is a base class for Razor Pages.
The BlogPosts property holds a list of BlogPost objects.
The OnGet() method initializes the BlogPosts list with two sample blog posts. This method is called when the page is accessed via a GET request.

When the page loads, the BlogPosts property is populated with a list of sample blog posts, which are then displayed in the HTML view.

Running and Testing the Application

When the application starts up, you should see a page titled "Blog Posts" with two sample blog posts listed.

Plain text
1Blog Posts
2
3First Post
4This is the first blog post.
510/10/2023
6
7Second Post
8This is the second blog post.
910/10/2023

This confirms that our application is successfully displaying a list of blog posts.

Lesson Summary

In this lesson, you learned how to display a list of blog posts using Razor Pages in ASP.NET Core. We covered:

Setting up a BlogPost model to structure our data.
Configuring Razor Pages in the Program.cs file.
Building the Index page by creating the HTML structure and server-side logic.
Running and testing the application to see the output.

Congratulations on completing this lesson and the entire course! You now have a solid foundation in creating and managing Razor Pages applications. Keep practicing and exploring more advanced concepts to enhance your skills further. Great job!

Enjoy this lesson? Now it's time to practice with Cosmo!

Practice is how you turn knowledge into actual skills.