Validating Data in Razor Pages

Introduction

Welcome to the lesson on "Validating Data in Razor Pages." In this lesson, we will focus on the importance of data validation in web applications and how to implement it using Razor Pages in ASP.NET Core . Previously, you learned the basics of binding data in Razor Pages and applied simple validation rules using attributes like [Required] . This lesson will build on that knowledge by diving deeper into setting up and handling validation for user inputs. Our goal is to ensure that the data entering your application is consistent, correct, and usable. Let's start by examining the starter code provided. This code sets up a basic ASP.NET Core Razor Pages project with a registration form that accepts an email address. We'll use this form to demonstrate how to implement and handle data validation.

Understanding Data Annotations for Validation

Data annotations are attributes you can apply to model properties to enforce validation rules. Some common validation attributes include [Required], [EmailAddress], and [StringLength] . These annotations help you ensure that the data users submit meets certain criteria before processing it in your application. [Required] : Ensures that a field is not empty. [EmailAddress] : Validates that a field contains a valid email address format. [StringLength(maximumLength)] : Specifies the maximum length of a string property. When you annotate your model properties with these attributes, ASP.NET Core automatically performs validation checks against them when the form is submitted.

Implementing Validation in Razor Pages

To illustrate how to implement validation, let's use the Email field in the registration form. In the Register.cshtml file you can notice how the form uses the asp-for and asp-validation-for tags. Register.cshtml : HTML @page @model RegisterModel <form method="post"> <label asp-for="Email"></label> <input asp-for="Email" name="Email" /> <span asp-validation-for="Email" class="text-danger"></span> <button type="submit">Register</button> </form> @if (Model.RegistrationSuccessful) {<p>Registration successful! Your email: @Model.Email</p>} else if (Model.RegistrationAttempted && !Model.RegistrationSuccessful) {<p class="text-danger">Registration failed. Please correct the errors and try again.</p>} The asp-for tag helper automatically binds the input element to the Email property in your model, and the asp-validation-for tag displays validation errors for that property.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Next, let's look at how to handle validation in the code-behind file of the Razor Page. Let's look at the RegisterModel class:

public IActionResult OnPost()
{
    RegistrationAttempted = true;

    if (!ModelState.IsValid)
    {
        RegistrationSuccessful = false;
        return Page();
    }

    // Registration logic - For testing purposes, we'll assume registration is always successful
    RegistrationSuccessful = true;
    return Page();
}

public IActionResult OnPost()
{
    RegistrationAttempted = true;

    if (!ModelState.IsValid)
    {
        RegistrationSuccessful = false;
        return Page();
    }

    // Registration logic - For testing purposes, we'll assume registration is always successful
    RegistrationSuccessful = true;
    return Page();
}

In the OnPost method, we check if the ModelState is valid. If it is not valid (i.e., there are validation errors), we set RegistrationSuccessful to false and return the Page, allowing the user to correct their input.

When validation errors are present, they need to be communicated to the user effectively. This is where the asp-validation-for tag comes in handy. It automatically displays error messages next to the input fields that failed validation.

We've already seen individual validation messages in the Register.cshtml file:

HTML

<span asp-validation-for="Email" class="text-danger"></span>

<span asp-validation-for="Email" class="text-danger"></span>

This tag will display validation errors related to the Email property in a red text format.

Adding Additional Validation Rules

To further demonstrate how versatile validation in Razor Pages can be, let's add an additional validation rule for password complexity to our registration form.

First, update the RegisterModel in Register.cshtml.cs:

public class RegisterModel : PageModel
{
    [BindProperty]
    [Required]
    [EmailAddress]
    public string Email { get; set; }

    [BindProperty]
    [Required]
    [StringLength(100, MinimumLength = 6, ErrorMessage = "Password must be between 6 and 100 characters.")]
    public string Password { get; set; }

    public bool RegistrationSuccessful { get; set; }
    public bool RegistrationAttempted { get; set; }

    public void OnGet()
    {
        // Set both flags to `false` on page open, we'll set them to `true` after the form is submitted and if it passes validation
        RegistrationSuccessful = false;
        RegistrationAttempted = false;
    }

    public IActionResult OnPost()
    {
        RegistrationAttempted = true;
        
        if (!ModelState.IsValid)
        {
            RegistrationSuccessful = false;
            return Page();
        }

        // Registration logic - For testing purposes, we'll assume registration is always successful
        RegistrationSuccessful = true;
        return Page();
    }
}

public class RegisterModel : PageModel
{
    [BindProperty]
    [Required]
    [EmailAddress]
    public string Email { get; set; }

    [BindProperty]
    [Required]
    [StringLength(100, MinimumLength = 6, ErrorMessage = "Password must be between 6 and 100 characters.")]
    public string Password { get; set; }

    public bool RegistrationSuccessful { get; set; }
    public bool RegistrationAttempted { get; set; }

    public void OnGet()
    {
        // Set both flags to `false` on page open, we'll set them to `true` after the form is submitted and if it passes validation
        RegistrationSuccessful = false;
        RegistrationAttempted = false;
    }

    public IActionResult OnPost()
    {
        RegistrationAttempted = true;
        
        if (!ModelState.IsValid)
        {
            RegistrationSuccessful = false;
            return Page();
        }

        // Registration logic - For testing purposes, we'll assume registration is always successful
        RegistrationSuccessful = true;
        return Page();
    }
}

Then, update Register.cshtml to include a password field:

HTML

<form method="post">
    <label asp-for="Email"></label>
    <input asp-for="Email" name="Model.Email" />
    <span asp-validation-for="Email" class="text-danger"></span>

    <label asp-for="Password"></label>
    <input asp-for="Password" type="password" name="Model.Password" />
    <span asp-validation-for="Password" class="text-danger"></span>
    
    <button type="submit">Register</button>
</form>

<form method="post">
    <label asp-for="Email"></label>
    <input asp-for="Email" name="Model.Email" />
    <span asp-validation-for="Email" class="text-danger"></span>

    <label asp-for="Password"></label>
    <input asp-for="Password" type="password" name="Model.Password" />
    <span asp-validation-for="Password" class="text-danger"></span>
    
    <button type="submit">Register</button>
</form>

Now, the form includes a password field that requires the password to be between 6 and 100 characters. If the validation rules are violated, the appropriate error message will be displayed next to the input.

In this lesson, you learned the importance of validating data in Razor Pages applications. We covered:

An overview of common data annotations and how they work
How to set up validation in the .cshtml file
How to handle validation in the code-behind and check if ModelState is valid
Displaying validation errors in the UI
Adding additional validation rules to your model and Razor Pages

Congratulations on successfully completing this lesson and the course! Data validation is crucial in ensuring that the data entering your application is correct and reliable.

Keep practicing by adding more validation rules and exploring custom validation attributes to deepen your understanding and improve your web applications. Happy coding!

Introduction

Understanding Data Annotations for Validation

Implementing Validation in Razor Pages

Join the 1M+ learners on CodeSignal

Handling Validation in the Code-Behind

Displaying Validation Errors in the UI

Adding Additional Validation Rules

Lesson Summary