In this session of ASP.NET Core tutorial, we are going to create a form with Tag Helpers, then we are going to validate the created form with Tag Helpers. During previous session, we discussed about creating form with Html Helpers, also we introduced several type of Data Annotation for model validation. Moreover, in Session 38 we already discussed about form validation with detail. During this session, we will show you how to create form and validate it with Tag Helpers.
Create Form with Tag Helper
For creating a form, we need to use asp-controller, asp-action, asp-for, asp-items and some more tag helper. Actually, via Tag Helper we can bind Html Tags to our models and properties.
In this session, we are going to create a new Model for our Web App, which we call it Category. Then for CRUD (Create, Read, Update and Delete) operations we will create a new Controller that we call it CategoryController. The Controller will have an Action Method with name of Create, which needs a View with the same name in Views/Category path.
Category Model code under Views folder:
|
1 2 3 4 5 6 7 8 9 10 11 |
public class Category { public string ID { get; set; } public string CategoryName { get; set; } public string Description { get; set; } public CategoryActiveOptions Active { get; set; } } |
Also, as you can see above, Active property type is CategoryActiveOptions. This type is an enum class with required options. below piece of code is related to the enum class.
|
1 2 3 4 5 6 7 8 9 10 |
public enum CategoryActiveOptions { Yes, No } } |
Moreover, below code is related to CategoryController and Create Action Method.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
public class CategoryController : Controller { public IActionResult Create() { return View(); } [HttpPost] } |
Having said that, the related view (Views/Category/Create.cshtml) should be bound to Category Model. Furthermore, the View is created with the above mentioned Tag Helper. Also, The Form Tag is bound to the controller and Action Method with asp-controller and asp-action. Moreover, the Inputs and Labels are bound to the respective properties through asp-for Tag Helper. Furthermore, we can use asp-items for loading select items.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
@model Category @{ ViewBag.Title = "Create New Category"; } <form asp-controller="Category" asp-action="Create" method="post"> <div> <label asp-for="CategoryName"></label> <input asp-for="CategoryName" /> </div> <div> <label asp-for="Description" ></label> <input asp-for="Description" /> </div> <div> <label asp-for="Active" ></label> <select asp-for="Active" asp-items="Html.GetEnumSelectList<CategoryActiveOptions>()"></select> </div> <div><button type="submit">Create</button></div> </form> |
Worth mentioning that, we can add Bootstrap classes for making the form more user friendly.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
@model Category @{ ViewBag.Title = "Create New Category"; } <form asp-controller="Category" asp-action="Create" method="post" class="mt-5 offset-3 col-6 border border-primary pt-2 pb-2 px-2 py-2"> <div> <label asp-for="CategoryName" class="form-label"></label> <input asp-for="CategoryName" class="form-control" /> </div> <div> <label asp-for="Description" class="form-label"></label> <input asp-for="Description" class="form-control" /> </div> <div> <label asp-for="Active" class="form-label"></label> <select asp-for="Active" class="form-select" asp-items="Html.GetEnumSelectList<CategoryActiveOptions>()"></select> </div> <div><button type="submit" class="btn btn-primary mt-2">Create</button></div> </form> |
Form Validation with Tag Helper
As mentioned earlier, we can set our required conditions to the model with Data Annotations. As we already discussed about several type of Data Annotation same as RegularExpression, Compare, StringLength and etc. In this session, we just introduce two more Data Annotation. MaxLength and MinLength, as their names imply are related to minimum and maximum allowed characters of the property which can be used instead of StringLength.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
public class Category { public string ID { get; set; } [Required] [Display(Name = "Category Name")] [MaxLength(50)] [MinLength(3)] public string CategoryName { get; set; } [RegularExpression(@"^(\w*\ *\.*\-*\\*\/*)*$", ErrorMessage = "Comment does not accept some special characters")] public string Description { get; set; } [Required] public CategoryActiveOptions Active { get; set; } } |
After adding Data Annotations to the Model, we need to add asp-validation-for for each property to display its validation error. Moreover, we can use asp-validation-summery to display the summery of form validation errors. This Tag Helper has three options (All, ModelOnly and None) that we select All to display all the validation errors.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
@{ ViewBag.Title = "Create New Category"; } <form asp-controller="Category" asp-action="Create" method="post" class="mt-5 offset-3 col-6 border border-primary pt-2 pb-2 px-2 py-2"> <div> <label asp-for="CategoryName" class="form-label"></label> <input asp-for="CategoryName" class="form-control" /> <span asp-validation-for="CategoryName" class="text-danger"></span> </div> <div> <label asp-for="Description" class="form-label"></label> <input asp-for="Description" class="form-control" /> <span asp-validation-for="Description" class="text-danger"></span> </div> <div> <label asp-for="Active" class="form-label"></label> <select asp-for="Active" class="form-select" asp-items="Html.GetEnumSelectList<CategoryActiveOptions>()"></select> <span asp-validation-for="Active" class="text-danger"></span> </div> <div><button type="submit" class="btn btn-primary mt-2">Create</button></div> <div asp-validation-summary="All" class="text-danger"></div> </form> |
Also, we can use ModelState.IsValid to detect whether passed model is valid or not. This method should be check in Create Action Method that is decorated with HttpPost verb.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
public class CategoryController : Controller { public IActionResult Create() { return View(); } [HttpPost] public IActionResult Create(Category category) { if (ModelState.IsValid) { } return View(); } } |