Basics of Binding and Validating Data in Razor Pages

Welcome to the first lesson of our course. In this course, we will dive into how to bind and validate data efficiently and effectively.

Razor Pages provide a streamlined way to handle web applications. Data binding and validation are crucial as they ensure that the information your users submit is accurately captured and validated before any processing takes place. This reduces errors and enhances the overall user experience.

In this lesson, you will learn about data binding and validation in ASP.NET Razor Pages. By the end of this lesson, you will be able to bind a form input to a string field and validate its data effectively.

App/Pages/Create.cshtml is the HTML page where users can input data:

@page
@model CreateModel
<form method="post">
    <div>
        <label asp-for="Name"></label>
        <input asp-for="Name" name="Name" />
    </div>
    <button type="submit">Create</button>
</form>

This form uses tag helpers to bind the Name field of the model. The asp-for attribute specifies the model field the input is bound to, and the name attribute ensures the data is correctly bound during form submission.

App/Pages/Create.cshtml.cs is the code-behind file for Create.cshtml:

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

public class CreateModel : PageModel
{
    [BindProperty]
    [Required]
    public string Name { get; set; }

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

        // Handle form submission
        return RedirectToPage("Index");
    }
}

This class handles the form submission and validates the data. The [BindProperty] attribute binds the Name property to the form data. The [Required] property makes sure the field is required, which we'll explain in more details in the next section. The OnPost method processes the form submission, checking whether the ModelState is valid, and either handles the submission or redisplays the form for corrections.

The ModelState.IsValid property checks whether the model properties comply with the validation rules defined by the data annotations. If the validation rules are met, ModelState is considered valid, otherwise, it is invalid. If the validation fails, the form reloads so users can correct the errors.