ASP.NET Razor Pages is a popular framework for building dynamic web applications with C#.
One powerful feature of Razor Pages is the ability to create and use custom classes that help organize and manage the business logic of your applications. In this blog post, I’ll guide you through the process of creating a C# class in a Razor Page application, and then show how to use this class on a Razor Page to perform specific tasks.
Step 1: Setting Up the Project
First, ensure you have the .NET SDK installed on your computer. You can download it from the official .NET website. Once installed, you can create a new Razor Pages project using the following command in your terminal or command prompt:
dotnet new razorpages -n MyRazorApp
cd MyRazorAppThis command creates a new directory with a basic Razor Pages application.
Step 2: Creating a Custom Class
Navigate to the project directory and create a new folder named Models if it doesn’t already exist. This folder will store your custom classes. Inside this folder, create a new file called Product.cs. This file will contain a simple Product class that we’ll use throughout our Razor Pages.
Here’s how the Product.cs file might look:
namespace MyRazorApp.Models
{
public class Product
{
public int Id { get; set; }
public string Name { get; set; }
public decimal Price { get; set; }
public Product() { }
public Product(int id, string name, decimal price)
{
Id = id;
Name = name;
Price = price;
}
}
}This class represents a basic product with an ID, name, and price.
Step 3: Using the Class in a Razor Page
Now that we have our Product class, let’s use it in a Razor Page. Create or edit a Razor Page in the Pages directory. For this example, let’s modify the Index.cshtml.cs file, which is the code-behind for the Index.cshtml page.
In Index.cshtml.cs, include the Product model at the top, and then create a list of products that we can display on the page:
using MyRazorApp.Models;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.Collections.Generic;
public class IndexModel : PageModel
{
public List<Product> Products { get; set; }
public void OnGet()
{
Products = new List<Product>
{
new Product(1, "Apple", 0.60m),
new Product(2, "Banana", 0.40m),
new Product(3, "Cherry", 0.20m)
};
}
}Step 4: Displaying the Data on the Razor Page
With our Products list populated, we can now modify the Index.cshtml Razor Page to display this data. Here’s how you might set up the HTML and Razor syntax to show each product:
@page
@model IndexModel
<h1>Products</h1>
<ul>
@foreach (var product in Model.Products)
{
<li>@product.Name - @product.Price.ToString("C")</li>
}
</ul>This code will render a list of products with their names and prices formatted as currency.
Step 5: Running the Application
Finally, run your application to see the list of products on your Razor Page:
dotnet runNavigate to https://localhost:5001 (or whatever URL is shown in your command prompt) to see the output.
Conclusion
By creating custom classes in ASP.NET Razor Pages, you can organize your data handling more efficiently and make your code cleaner and easier to manage. This simple example demonstrates how to define a class, instantiate it, and display its data in a Razor Page. With these basics, you can expand your applications to handle more complex scenarios and larger data structures.