Displaying a List of Blog Posts

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!

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:

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;
}

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.

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:

@page
@model IndexModel
<!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 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.

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

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

public class IndexModel : 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 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.

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

Blog Posts

First Post
This is the first blog post.
10/10/2023

Second Post
This is the second blog post.
10/10/2023

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

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!