Welcome back!

In the previous lesson, you learned the basics of binding and validating data in Razor Pages, including setting up a Razor Pages project, using the [BindProperty] and [Required] attribute..

Today, we're going to dive deeper into data binding techniques, particularly focusing on class binding and advanced validation in Razor Pages. By the end of this lesson, you'll be able to implement class binding and use sophisticated validation techniques in your Razor Pages applications.

Class binding is a technique where you bind a form to a class rather than individual properties. This is particularly useful when dealing with complex forms that require multiple inputs.

In this lesson, we'll use the Item class as an example. Class binding allows us to handle multiple related form fields as a single unit, making our code cleaner and more maintainable.

Let’s take a look at the Item class and its usage in the UpdateModel class:

C#
Copy to clipboard
1public class Item 
2{
3    public string? ItemName { get; set; }
4    public string? Description { get; set; }
5    public decimal? Price { get; set; }
6}
7
8public class UpdateModel : PageModel 
9{
10    [BindProperty]
11    public Item ProductItem { get; set; } = new Item();
12    
13    // Other methods...
14}

• The Item class contains properties such as ItemName, Description, and Price. This class will be used to represent the data from our form.
• In the UpdateModel, we apply the [BindProperty] attribute to the ProductItem property. This attribute tells Razor Pages to bind form data to the ProductItem object when the form is submitted.

The OnGet method is used to prepopulate the form with data. Here, we have hard-coded an example item. In a real application, you might fetch data from a database.

C#
Copy to clipboard
1public void OnGet(int id) 
2{
3    ProductItem = new Item 
4    {
5        ItemName = "Example Item", 
6        Description = "Sample Description",
7        Price = 9.99m
8    };
9}

Validation ensures that the data entered by users meets predefined criteria. We use data annotations in the Item class to enforce these rules. You can apply attributes like [Required], [Range], etc., to properties in the Item class. For now, we will use just the [Required] annotation and learn other annotations in the next lessons. This annotation comes with an optional error message - if the field is not provided, the provided error message will be thrown.

C#
Copy to clipboard
1public class Item 
2{
3    [Required(ErrorMessage = "Item Name is required")]
4    public string? ItemName { get; set; }
5
6    public string? Description { get; set; }
7
8    public decimal? Price { get; set; }
9}

Handling Invalid Data:

• When data validation fails, we return the page and display error messages.

  C#
  Copy to clipboard
  1public IActionResult OnPost() 
  2{
  3    if (!ModelState.IsValid) 
  4    {
  5        return Page();
  6    }
  7
  8    // Handle valid data
  9    return Page();
  10}

Displaying Validation Messages:

• The asp-validation-summary tag displays a summary of all validation errors in the form.

  HTML, XML
  Copy to clipboard
  1<div asp-validation-summary="ModelOnly"></div>

• The asp-validation-for tag displays validation messages for individual fields and is placed next to the corresponding input fields.

  HTML, XML
  Copy to clipboard
  1<label asp-for="ProductItem.ItemName"></label>
  2<input asp-for="ProductItem.ItemName" name="ProductItem.ItemName" />
  3<span asp-validation-for="ProductItem.ItemName"></span>
  4
  5<label asp-for="ProductItem.Description"></label>
  6<input asp-for="ProductItem.Description" name="ProductItem.Description" />
  7<span asp-validation-for="ProductItem.Description"></span>
  8
  9<label asp-for="ProductItem.Price"></label>
  10<input asp-for="ProductItem.Price" name="ProductItem.Price" />
  11<span asp-validation-for="ProductItem.Price"></span>

These tags help users identify and correct input errors before submitting the form.

In this lesson, we explored advanced data binding techniques in Razor Pages. You learned how to:

• Implement class binding using the [BindProperty] attribute.
• Validate bound data using data annotations.
• Handle validation errors and provide user feedback.

These techniques enhance the robustness and user-friendliness of your Razor Pages applications. Be sure to complete the following practice tasks to reinforce your understanding of these concepts.

Keep practicing, and stay tuned for our next lesson where we will further build on these foundations. Happy coding!