Introduction

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!

Creating the Main Layout

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:

    Explanation:

    • @ViewData["Title"]: Sets the title of the web page dynamically.
    • @RenderBody(): Placeholder for the content of the individual pages that use this layout.
Building the Home Page

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:

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.
Implementing the Blog Page

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

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

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:

Explanation:

  • @model BlogIndexModel: Binds the page to its server-side logic in BlogIndexModel.
  • @foreach: Iterates over the list of blog posts to display them.
  1. Finally, let's create Pages/Blog/Index.cshtml.cs:

Explanation:

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

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

Lesson Summary

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!

Sign up
Join the 1M+ learners on CodeSignal
Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal