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#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}
Item
class contains properties such as ItemName
, Description
, and Price
. This class will be used to represent the data from our form.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#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#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#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, XML1<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, XML1<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:
[BindProperty]
attribute.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!