Razor Pages Introduction 🎯

Welcome to our deep dive into the world of ASP.NET! Today, we're going to explore Razor Pages, a powerful feature that simplifies building web applications in ASP.NET Core. Let's get started!

What are Razor Pages? 📝

In essence, Razor Pages is a page-based model that allows you to create web applications using C# and HTML. It offers an alternative to the MVC (Model-View-Controller) architecture, making it easier for beginners to grasp and understand.

Advantages of Razor Pages 💡

Simplified structure: Razor Pages eliminates the need for a separate Controller class, reducing the amount of boilerplate code.
Easier navigation: The built-in routing system simplifies navigation between pages.
Model binding: Razor Pages allows automatic model binding for form submissions.

Components of a Razor Page 📝

A Razor Page consists of two main files:

Page Model: This C# class contains the page's logic and data.
.cshtml file: This file contains the HTML markup and Razor syntax for the page's view.

Creating a Simple Razor Page 🎯

Step 1: Creating a new Razor Page

To create a new Razor Page, right-click your project in Visual Studio and select Add > New Item. In the Search box, type Razor Page and hit Enter. Select Page and click Add. Give your page a name and click Add.

Step 2: Understanding the generated code

Upon creating a new Razor Page, you'll find two files: Index.cshtml and IndexModel.cs.

Index.cshtml contains the page's HTML and Razor syntax.
IndexModel.cs is the C# class that contains the page's logic.

IndexModel.cs

csharp

using Microsoft.AspNetCore.Mvc;
using System.Diagnostics;

namespace YourNamespace.Pages
{
    public class IndexModel : PageModel
    {
        public void OnGet()
        {
            // Your code here
        }
    }
}

Index.cshtml

html

@{
    ViewData["Title"] = "Home Page";
}

<h1>Welcome to your Razor Page!</h1>

Adding Interactivity with Razor Syntax 💡

Razor syntax lets you embed C# code directly into your HTML markup. This allows for dynamic content generation and interaction with the page's data.

Example: Displaying a User's Name 🎯

IndexModel.cs

csharp

public class IndexModel : PageModel
{
    [BindProperty]
    public string UserName { get; set; }

    public void OnGet()
    {
    }

    public void OnPost()
    {
        UserName = HttpContext.Request.Form["UserName"].ToString();
    }
}

Index.cshtml

html

@{
    ViewData["Title"] = "Home Page";
}

<h1>Welcome, @Model.UserName!</h1>

<form method="post">
    <input type="text" name="UserName" placeholder="Enter your name" />
    <button type="submit">Submit</button>
</form>

In this example, we've created a simple form that accepts a user's name. Upon form submission, the user's name is stored in the UserName property of the page model and displayed on the page.

Quiz 📝

That's it for today! We've covered the basics of Razor Pages and created a simple interactive page. In the next lesson, we'll dive deeper into Razor syntax and explore more advanced features of Razor Pages. Happy coding! 🎉