Razor Pages

Introduction

Razor Pages is a page-based programming model in ASP.NET Core that makes building web UI easier and more productive. Razor Pages can make coding page-focused scenarios easier and more productive than using MVC.

Setting Up the Development Environment

Before you start, ensure you have the following installed:

• Visual Studio 2019 or later
• .NET Core SDK

https://dotnet.microsoft.com/download/dotnet-core

Creating a New Razor Pages Project

Open Visual Studio and create a new project:

• Select "Create a new project".
• Choose "ASP.NET Core Web Application" and click "Next".
• Name your project and select the location to save it. Click "Create".
• In the "Create a new ASP.NET Core Web Application" dialog, select "Web Application" and click "Create".

Understanding the Project Structure

The project template creates a simple project structure:

• Pages - Contains the Razor Pages.
• wwwroot - Contains static files like CSS, JavaScript, and images.
• Program.cs - Contains the entry point of the application.
• Startup.cs - Configures services and the app's request pipeline.

Creating a Razor Page

In this tutorial, we will create a simple Razor Page for a "Product". Add a new Razor Page named Product.cshtml in the Pages folder:

@page
@model ProductModel
@{
    ViewData["Title"] = "Product";
}

Product


    

        Name
        
    
    

        Price
        
    
    Save



    
Products List
    

        @foreach (var product in Model.Products)
        {
            
@product.Name - @product.Price
        }
    

Creating the Page Model

Now, create the Page Model class named Product.cshtml.cs in the Pages folder:

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

public class ProductModel : PageModel
{
    public Product Product { get; set; }
    public List Products { get; set; } = new List();

    public void OnGet()
    {
        // Initialize with some data
        Products = new List
        {
            new Product { Name = "Product1", Price = 10.0M },
            new Product { Name = "Product2", Price = 20.0M }
        };
    }

    public void OnPost()
    {
        Products.Add(Product);
    }
}

public class Product
{
    public string Name { get; set; }
    public decimal Price { get; set; }
}

Configuring the Application

Ensure that the Startup.cs file is correctly configured to use Razor Pages:

public void ConfigureServices(IServiceCollection services)
{
    services.AddRazorPages();
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Error");
        app.UseHsts();
    }

    app.UseHttpsRedirection();
    app.UseStaticFiles();

    app.UseRouting();
    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapRazorPages();
    });
}

Running the Application

Run the application by pressing F5 or clicking the "Run" button in Visual Studio. Navigate to https://localhost:5001/Product to see the Product page.

Conclusion

Congratulations! You have created a simple Razor Page with ASP.NET Core. This tutorial covered the basics of setting up a new project, creating a Razor Page, creating the Page Model, configuring the application, and running the application. From here, you can extend the Razor Page with more features and integrate it with a database.