Organizing and Using Validation Attributes

Welcome to the final lesson of this course on binding and validating data in Razor Pages. In the previous lessons, we covered the basics of data binding and validation, explored advanced data binding techniques, and learned how to validate data to ensure its integrity.

In this lesson, we will focus on combining things altogether and building a full application using the techniques that we've learned. Let's dive in!

Let's apply these validation attributes to our User model. The User model will include validation for Name and Age.

User.cs

using System.ComponentModel.DataAnnotations;

public class User
{
    [Required(ErrorMessage = "Name is required.")]
    public string Name { get; set; }

    [Range(18, 100, ErrorMessage = "Age must be between 18 and 100.")]
    public int Age { get; set; }
}

In this code:

• The [Required] attribute on the Name property ensures that the name is not left empty, displaying an error message if it is.
• The [Range] attribute on the Age property ensures the age is between 18 and 100; otherwise, an error message will be shown.

As a quick reminder, the [BindProperty] attribute is used to bind form input data to model properties. In our previous lessons, we looked at how to use this attribute to link form data to model properties.

Let's see how we bind data to the UserProfileModel class using the [BindProperty] attribute:

UserProfile.cshtml.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

public class UserProfileModel : PageModel
{
    [BindProperty]
    public User UserInput { get; set; }

    public void OnGet()
    {
        UserInput = new User(); // Initialize with default values
    }

    public IActionResult OnPost()
    {
        if (!ModelState.IsValid)
        {
            ViewData["Message"] = "Input data is invalid, check it and try again.";
            return Page();
        }

        // Save user profile logic

        ViewData["Message"] = "User profile saved successfully.";
        return Page(); // Stay on the same page and display a success message
    }
}

Here:

• The [BindProperty] attribute is used to bind form input data to the UserInput property.
• The OnGet() method initializes the UserInput with default values.
• The OnPost() method handles the form submission and checks if the model state is valid before proceeding with the save logic.

To ensure that the input data meets the specified validation rules, we need to validate the form data on the server side. When the form is submitted, the server checks if the data is valid using ModelState.IsValid.

If the data is not valid, we will display an error message to the user. Let's see how we implement this in our UserProfileModel class.

UserProfile.cshtml.cs

public IActionResult OnPost()
{
    if (!ModelState.IsValid)
    {
        ViewData["Message"] = "Input data is invalid, check it and try again.";
        return Page();
    }

    // Save user profile logic

    ViewData["Message"] = "User profile saved successfully.";
    return Page();
}

In this method:

• ModelState.IsValid checks if the model has passed all validation rules.
• If the model is not valid, it returns to the page and displays an error message.
• If the model is valid, it will save the user profile and display a success message.

To provide user feedback when validation errors occur, we use the asp-validation-for tag helper in Razor Pages. This tag helper automatically displays validation error messages associated with a specific model property.

Let's incorporate this into our UserProfile page:

UserProfile.cshtml

@page
@model UserProfileModel
<form method="post">
    <div>
        <label asp-for="UserInput.Name">User Name</label>
        <input asp-for="UserInput.Name" name="UserInput.Name" />
        <span asp-validation-for="UserInput.Name" class="text-danger"></span>
    </div>
    <div>
        <label asp-for="UserInput.Age">Age</label>
        <input asp-for="UserInput.Age" name="UserInput.Age" />
        <span asp-validation-for="UserInput.Age" class="text-danger"></span>
    </div>
    <button type="submit">Save</button>
</form>

@if (ViewData["Message"] != null)
{
    <div class="alert">
        @ViewData["Message"]
    </div>
}

Here:

• The asp-validation-for tag helper is used to display validation messages next to the form inputs.
• If the form input does not meet the validation requirements, the appropriate error message will be displayed.

Let's put everything together and see how it all works:

1. Model (User.cs)

   • Define the User model with validation attributes.

2. Code-Behind (UserProfile.cshtml.cs)

   • Bind the form input data to the UserInput property using [BindProperty].
   • Handle form submission in the OnPost() method and validate the data.
   • Display validation messages and feedback using ViewData.

3. View (UserProfile.cshtml)

   • Create a form with input fields for Name and Age.
   • Use the asp-validation-for tag helper to show validation messages.

When you run this example, you can test with both valid and invalid data to see how the validation works in action. Invalid data will show error messages, while valid data will save the user profile and display a success message.

In this lesson, we covered the key concepts of organizing and using validation attributes in Razor Pages:

• Implementing validation attributes in the model.
• Binding data using [BindProperty].
• Handling server-side validation in the code-behind.
• Validation messages are displayed on the UI using asp-validation-for.

Congratulations on completing this course! You've learned the essential skills needed to bind and validate data in Razor Pages. Remember to practice what you've learned by applying these skills to your own projects. Happy coding!