Asp.Net Core What Are Razor Pages Complete Guide

 Last Update:2025-06-23T00:00:00     .NET School AI Teacher - SELECT ANY TEXT TO EXPLANATION.    8 mins read      Difficulty-Level: beginner

Understanding the Core Concepts of ASP.NET Core What are Razor Pages

ASP.NET Core What are Razor Pages: Detailed Explanation

Overview of Razor Pages

  1. Routing and Pages: Razor Pages rely on a conventions-based routing system where each page in the Pages folder typically corresponds to a route in the application. For example, a page located at /Pages/About.cshtml responds to requests for /About.

  2. Separation of Concerns: Razor Pages separate presentation and logic while still providing a clean separation of concerns. The UI structure is defined within the .cshtml Razor page files, and the business logic is contained in a corresponding code-behind file (PageModel), with the name pattern of <pagename>Model.cs.

  3. Model-Binding and Data Validation: Razor Pages automatically binds the request data (form data, query strings, route data) to the properties defined in the PageModel. Built-in data validation mechanisms leverage DataAnnotations attributes for enforcing business rules and constraints.

  4. Direct Model Support in Razor Pages: Unlike the MVC pattern where the View interacts with the Model through the Controller, Razor Pages allow direct access to models within the view itself. This feature leverages the full potential of Razor syntax, making it more intuitive for developers to implement page-specific logic and presentation together.

Key Features and Benefits

  • Simplified Development: Razor Pages reduces the amount of boilerplate code required for typical web scenarios, enabling quicker development of simple and interconnected web applications.

  • Zero Action Methods: Unlike controller-based MVC, Razor Pages do not require separate action methods to handle HTTP requests. The HandleGetAsync, HandlePostAsync, HandlePutAsync, and HandleDeleteAsync methods in the PageModel handle requests directly.

  • Built-in Validation: Razor Pages support validation through annotations and validation messages directly within the view, which improves the user experience by providing real-time feedback.

  • Blazing Fast Performance: With Razor Pages being a part of ASP.NET Core, it benefits from optimized performance by using middleware pipelines, efficient model binding, and minimized HTTP requests.

  • Security Features: Razor Pages offer robust built-in security features including validation, authentication, and authorization which can be easily integrated into the application.

Implementing Razor Pages

To get started with Razor Pages in an ASP.NET Core project, follow these steps:

  1. Create a New ASP.NET Core Project: Use Visual Studio or the .NET CLI to create a new Razor Pages project.

    dotnet new webapp -n WebAppRazor

  2. Add a Razor Page: Within the Pages folder, create a new Razor Page by adding a .cshtml file (e.g., Index.cshtml) and an associated C# code-behind file (e.g., Index.cshtml.cs).

  3. Define the PageModel: In the code-behind file, define properties and methods to handle page-specific logic. Utilize built-in validation and model binding features to manage user inputs effectively.

  4. Configure Routing: By default, Razor Pages route is set-up automatically based on the file structure within the Pages folder. You can customize routes through the wwwroot folder or by using route constraints.

  5. Run and Test the Application: Use the .NET CLI or Visual Studio to run the application and test the functionality of your Razor Pages.

Example

Consider a simple Razor Page for creating a product:

Product.cshtml:

@page 
@model WebAppRazor.Pages.ProductModel 
@{
    ViewData["Title"] = "Add Product";
}

<h1>@ViewData["Title"]</h1>

<form method="post">
    <div>
        <label asp-for="Product.Name"></label>
        <input asp-for="Product.Name" />
        <span asp-validation-for="Product.Name"></span>
    </div>
    <div>
        <label asp-for="Product.Price"></label>
        <input asp-for="Product.Price" />
        <span asp-validation-for="Product.Price"></span>
    </div>
    <button type="submit">Add Product</button>
</form>

Product.cshtml.cs:

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using WebAppRazor.Models;

namespace WebAppRazor.Pages
{
    public class ProductModel : PageModel
    {
        [BindProperty]
        public Product Product { get; set; }

        public IActionResult OnGet()
        {
            return Page();
        }

        public IActionResult OnPost()
        {
            if (!ModelState.IsValid)
            {
                return Page();
            }

            // Save product logic here

            return RedirectToPage("Success");
        }
    }
}

Model:

using System.ComponentModel.DataAnnotations;

namespace WebAppRazor.Models
{
    public class Product
    {
        [Required]
        public string Name { get; set; }

        [Required]
        [Range(1, 1000)]
        public decimal Price { get; set; }
    }
}

This simple example demonstrates creating a form using Razor Pages, including data binding and validation. By handling form submissions within the OnPost method, Razor Pages provide a streamlined way to manage web application logic.

Conclusion

Online Code run

🔔 Note: Select your programming language to check or run code at

💻 Run Code Compiler

Step-by-Step Guide: How to Implement ASP.NET Core What are Razor Pages

Step 1: Install .NET SDK

Firstly, ensure that you have installed the .NET SDK. At the time of writing, this would be the latest version of the SDK, which includes all necessary tools to create and run ASP.NET Core applications.

Step 2: Create a New ASP.NET Core Razor Pages Project

Using either the command line or Visual Studio, create a new project.

Using Command Line:

Open your command prompt or terminal and run the following command:

dotnet new razor -n MyRazorPagesApp
cd MyRazorPagesApp

Using Visual Studio:

  1. Open Visual Studio.
  2. Go to Create a new project.
  3. Search for and select Razor Pages Web App, then click Next.
  4. Name your project, e.g., MyRazorPagesApp, then click Create.
  5. In the project options, make sure that ASP.NET Core 6.0 (Long-Term Support) or later is selected if available.

Step 3: Understand the Generated Project Structure

When you generate a new Razor Pages project, it comes with several files and folders pre-configured.

  • Pages folder: Contains Razor Pages (.cshtml and .cshtml.cs files).
  • wwwroot folder: Contains static resources like CSS, JS, images.
  • appsettings.json: Configuration file.
  • Program.cs: Entry point of the application where services and middleware are configured.
  • _Layout.cshtml: The layout file used for consistent rendering across pages.
  • Startup.cs: Configures the request pipeline and services. (This may not be present in newer projects if everything is moved to Program.cs)

Step 4: Create a Simple Razor Page

Let's walk through creating a simple Razor Page.

Step 4.1: Add a New Razor Page

In Visual Studio:

  1. Right-click on the Pages folder in Solution Explorer.
  2. Click Add > Razor Page….
  3. Name it Index.cshtml and set the Template to Empty. (If Index already exists, choose another name, like HelloWorld)
  4. Click Add.

Using the Command Line: You can manually create the files or use the scaffolding tool:

dotnet new page -n HelloWorld -o Pages

This command creates a new Razor Page called HelloWorld.

Step 4.2: Write Code in the Razor Page

Edit the HelloWorld.cshtml.cs code-behind file.

HelloWorld.cshtml.cs

using Microsoft.AspNetCore.Mvc.RazorPages;

namespace MyRazorPagesApp.Pages
{
    public class HelloWorldModel : PageModel
    {
        public string Message { get; set; } = "Hello, world!";
        
        public void OnGet()
        {
            // You can add any initialization logic here
            Message += " Welcome to Razor Pages";
        }
    }
}

Step 4.3: Write HTML in the Razor View

Edit the HelloWorld.cshtml file.

HelloWorld.cshtml

@page
@model MyRazorPagesApp.Pages.HelloWorldModel
<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
</head>
<body>
    <h2>@Model.Message</h2>
</body>
</html>

Step 5: Run The Application

Now, you can run your application to see the Razor Page in action.

Using Command Line:

In the root directory of your project, run:

dotnet run

Open a browser and navigate to http://localhost:5000/helloworld (or the port given if it differs).

Using Visual Studio:

Press F5 or Ctrl + F5 to build and start the application. Once started, navigate to http://localhost:<PORT>/helloworld.

You should see the message "Hello, world! Welcome to Razor Pages".

Step 6: Adding More Features to Your Page

Let's add some interactivity and data binding to your page.

Step 6.1: Update the Model with More Properties

Modify your HelloWorldModel to include additional properties.

HelloWorld.cshtml.cs

using Microsoft.AspNetCore.Mvc.RazorPages;
using System.ComponentModel.DataAnnotations;

namespace MyRazorPagesApp.Pages
{
    public class HelloWorldModel : PageModel
    {
        [BindProperty]
        public string Name { get; set; } = "";

        public string GreetingMessage { get; private set; } = "";

        public void OnGet()
        {
            GreetingMessage = "Welcome to Razor Pages!";
        }

        public void OnPost()
        {
            if (!string.IsNullOrEmpty(Name))
            {
                GreetingMessage = $"Hello, {Name}! Welcome to Razor Pages!";
            }
            else
            {
                GreetingMessage = "Name cannot be empty.";
            }
        }
    }
}

Step 6.2: Update the Razor View to Accept User Input

Modify your HelloWorld.cshtml file to include a form for user input.

HelloWorld.cshtml

@page
@model MyRazorPagesApp.Pages.HelloWorldModel
    
<!DOCTYPE html>
<html>
<head>
    <title>Hello World - Razor Pages</title>
</head>
<body>
    <h2>@Model.GreetingMessage</h2>

    <form method="post">
        <div>
            <label>Name:</label>
            <input asp-for="Name" />
            <span asp-validation-for="Name"></span>
        </div>
        <button type="submit">Submit</button>
    </form>

    @if (ModelState.IsValid && !string.IsNullOrEmpty(Model.Name))
    {
        <h3>Your greeting: @Model.GreetingMessage</h3>
    }
</body>
</html>

Step 6.3: Enable Client-Side Validation

To ensure client-side validation works, update your _Layout.cshtml file by adding the necessary script references.

Locate and modify the <head> section in _Layout.cshtml:

_Layout.cshtml

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - MyRazorPagesApp</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
    <!-- Add jQuery and Validation scripts -->
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/dist/jquery.validate.unobtrusive.min.js"></script>
</head>

Step 7: Test the Updated Page

Run your application again, and navigate to http://localhost:<PORT>/helloworld. You should now see a form to enter your name. After submission, the page displays a personalized greeting.

Summary

  1. Install .NET SDK: Necessary to develop .NET Core applications.
  2. Create ASP.NET Core Razor Pages Project: Set up your development environment.
  3. Explore Project Structure: Understand how files are organized.
  4. Create Simple Razor Page: Generate and configure a basic Razor Page.
  5. Add Interactivity: Include forms, model binding, and validation.
  6. Run the Application: Test and verify your work.

Top 10 Interview Questions & Answers on ASP.NET Core What are Razor Pages

Top 10 Questions and Answers on ASP.NET Core: Understanding Razor Pages

1. What are Razor Pages in ASP.NET Core?

2. How do Razor Pages differ from MVC in ASP.NET Core?

Answer: Razor Pages is a page-centric programming model, while MVC follows the Model-View-Controller pattern. In MVC, you handle UI logic in the Controller, which then passes the data to a View. Razor Pages simplify this by combining the Controller and View into a single page, known as a Razor Page. Each Razor Page handles its own request and contains its own model and UI logic, making it easier to manage small to medium projects.

3. What is the purpose of a Razor Page file?

Answer: The Razor Page file (.cshtml) is where you define the UI using Razor syntax. Razor allows you to embed C# code into HTML to dynamically generate web pages. The Razor Page file can also include directives, attributes, and other server-side code that work seamlessly with HTML. The corresponding .cshtml.cs file contains the page's code-behind, which includes the model, handlers, and any other logic required for the page.

4. How do I create a Razor Page in ASP.NET Core?

Answer: To create a Razor Page in ASP.NET Core, follow these steps:

  • Create a new ASP.NET Core project and select "Web Application (Model-View-Controller)" with Razor Pages selected or choose "Web Application" and select "Razor Pages" as the project template.
  • In the solution explorer, add a new Razor Page by right-clicking the Pages folder and selecting "Add" -> "Razor Page".
  • Give your page a name and choose the layout or template you want to use.
  • Once created, you'll have a .cshtml and .cshtml.cs file for your page. You can start adding HTML and C# code to these files.

5. What is a Page Model in Razor Pages?

Answer: The Page Model in Razor Pages is the code-behind class corresponding to the Razor Page (.cshtml). It contains properties that represent the data to be displayed and methods (handlers) that handle user interactions. The Page Model is part of the MVVM (Model-View-ViewModel) pattern, where the ViewModel corresponds to the Page Model in the context of Razor Pages. It facilitates separating concerns and adheres to the Single Responsibility Principle.

6. Can I use MVC controllers and Razor Pages in the same ASP.NET Core project?

Answer: Yes, you can use both MVC controllers and Razor Pages in the same ASP.NET Core project. ASP.NET Core provides a unified routing system that allows you to mix MVC and Razor Pages within the same application. This enables you to use MVC for more complex operations and Razor Pages for simpler, page-based scenarios. You can configure routing in the Startup.cs or Program.cs file to handle requests for both controllers and Razor Pages.

7. What is the default route for Razor Pages?

Answer: The default route for Razor Pages is configured in the Program.cs file (or Startup.cs in older versions of ASP.NET Core) using the MapRazorPages() method. By default, Razor Pages are mapped to the root URL and the URLs are based on the page file structure. For example, a Razor Page located at /Pages/Products/Index.cshtml can be accessed via the URL /Products. You can customize routing using attributes or the route configuration.

8. How can I validate input in a Razor Page?

Answer: You can validate input in a Razor Page by using data annotation attributes on the properties of the Page Model. Attributes like [Required], [StringLength], and [Range] can be applied to the properties to enforce validation rules. Razor Pages integrate with the ASP.NET Core validation system, and you can display validation messages in the Razor Page using the ValidationSummary tag helper or individually for each property. Additionally, you can implement custom validators for more complex validation scenarios.

9. How do I pass data from a Razor Page to a View Component?

Answer: To pass data from a Razor Page to a View Component in ASP.NET Core, you can follow these steps:

  • Define a View Component and create a method in the View Component class to render the component. You can pass data to the method as parameters.
  • In the Razor Page, use the Component.InvokeAsync tag helper or the ViewComponent tag helper to invoke the View Component and pass the required data.
  • The View Component method will receive the data and can use it to generate the HTML output.
  • Example:
// Razor Page (.cshtml)
@await Component.InvokeAsync("ProductList", new { category = Model.SelectedCategory })

// View Component (ProductListViewComponent.cs)
public IViewComponentResult Invoke(string category)
{
    var products = _productService.GetProductsByCategory(category);
    return View(products);
}

10. What are the key benefits of using Razor Pages in ASP.NET Core?

Answer: The key benefits of using Razor Pages in ASP.NET Core include:

  • Simplified Development: Razor Pages reduces the amount of ceremony required to create web UIs by combining the Controller and View into a single page.
  • Rapid Prototyping: The Page-based model allows for quicker development and easier prototyping, particularly for simple applications.
  • Model-Binding and Validation: Razor Pages provide built-in support for model binding and validation, making it easier to handle user input.
  • Familiar Razor Syntax: Razor Pages utilize the Razor syntax, which is familiar to developers working with ASP.NET MVC and Web Forms.
  • Seamless Integration with MVC: Razor Pages can be used alongside MVC in the same project, providing flexibility in the choice of programming model based on the application's requirements.
  • Enhanced Developer Experience: Razor Pages offer a streamlined and intuitive development experience, making it easier for developers to build modern web applications.

You May Like This Related .NET Topic

📥 Download Code ▶️ Watch Online 📖 Read Description

Login to post a comment.