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:
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.
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, XML1@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:
<ul>
) that displays each blog post using a foreach
loop (@foreach (var post in Model.BlogPosts)
).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:
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:
IndexModel
class inherits from PageModel
, which is a base class for Razor Pages.BlogPosts
property holds a list of BlogPost
objects.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.
Plain text1Blog 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.
In this lesson, you learned how to display a list of blog posts using Razor Pages in ASP.NET Core. We covered:
BlogPost
model to structure our data.Program.cs
file.Index
page by creating the HTML structure and server-side logic.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!