Welcome to the first lesson of our course. In this course, we will dive into how to bind and validate data efficiently and effectively.
Razor Pages provide a streamlined way to handle web applications. Data binding and validation are crucial as they ensure that the information your users submit is accurately captured and validated before any processing takes place. This reduces errors and enhances the overall user experience.
In this lesson, you will learn about data binding and validation in ASP.NET Razor Pages. By the end of this lesson, you will be able to bind a form input to a string field and validate its data effectively.
App/Pages/Create.cshtml is the HTML page where users can input data:
HTML, XML1@page 2@model CreateModel 3<form method="post"> 4 <div> 5 <label asp-for="Name"></label> 6 <input asp-for="Name" name="Name" /> 7 </div> 8 <button type="submit">Create</button> 9</form>
This form uses tag helpers to bind the Name field of the model. The asp-for attribute specifies the model field the input is bound to, and the name attribute ensures the data is correctly bound during form submission.
App/Pages/Create.cshtml.cs is the code-behind file for Create.cshtml:
C#1using Microsoft.AspNetCore.Mvc; 2using Microsoft.AspNetCore.Mvc.RazorPages; 3using System.ComponentModel.DataAnnotations; 4 5public class CreateModel : PageModel 6{ 7 [BindProperty] 8 [Required] 9 public string Name { get; set; } 10 11 public IActionResult OnPost() 12 { 13 if (!ModelState.IsValid) 14 { 15 return Page(); 16 } 17 18 // Handle form submission 19 return RedirectToPage("Index"); 20 } 21}
This class handles the form submission and validates the data. The [BindProperty] attribute binds the Name property to the form data. The [Required] property makes sure the field is required, which we'll explain in more details in the next section. The OnPost method processes the form submission, checking whether the ModelState is valid, and either handles the submission or redisplays the form for corrections.
The ModelState.IsValid property checks whether the model properties comply with the validation rules defined by the data annotations. If the validation rules are met, ModelState is considered valid, otherwise, it is invalid. If the validation fails, the form reloads so users can correct the errors.
Validating user input is crucial to maintain data integrity and application security. In Razor Pages, you can use data annotation attributes to enforce validation rules.
In the CreateModel class, we have already used the [Required] attribute to ensure that the Name field is not left empty:
C#1public class CreateModel : PageModel 2{ 3 [BindProperty] 4 [Required] 5 public string Name { get; set; } 6}
When the form is submitted, the [Required] attribute checks whether the Name field has a value. If not, the form does not proceed, and an error is displayed.
When the form is submitted, the OnPost method in Create.cshtml.cs is invoked. This method handles the submission and checks for validation errors.
C#1public IActionResult OnPost() 2{ 3 if (!ModelState.IsValid) 4 { 5 return Page(); 6 } 7 8 // Handle form submission 9 return RedirectToPage("Index"); 10}
The ModelState.IsValid property checks if the model properties comply with the validation rules defined by the data annotations - in this particular case that Name field is present (as it is required). If the validation fails, the form reloads so users can correct the errors.
In this lesson, we covered the basics of data binding and validation in Razor Pages. You learned how to:
- Bind a form input to a string field using the
[BindProperty]attribute. - Apply data validation using data annotation attributes.
- Handle form submission and validate the bound data.
Next, you'll have the opportunity to practice these concepts through exercises. Keep experimenting and applying what you've learned to strengthen your understanding.
Great job on completing this lesson! Get ready to dive into the practice exercises and reinforce your knowledge.