Introduction

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.

Understanding Class Binding in Razor Pages

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:

  • 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.
Data Retrieval in 'OnGet'

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.

Validating Bound Data

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.

Error Handling and User Feedback

Handling Invalid Data:

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

Displaying Validation Messages:

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

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

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

Lesson Summary

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!

Sign up
Join the 1M+ learners on CodeSignal
Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal