Creating Form & Form Validation with Tag Helper – Session 44

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:

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.

Moreover, below code is related to CategoryController and Create Action Method.

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.

Worth mentioning that, we can add Bootstrap classes for making the form more user friendly.

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.

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.

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.

If you need more details, watch this session video. Also, for being updated about our coming sessions, follow us on Instagram, Facebook, Telegram or YouTube. Moreover, you can have access to list of all sessions HERE and you can download this session source code from our GitHub.

You can download this Session Slides form HERE.

0.00 avg. rating (0% score) - 0 votes


0 0 votes
Article Rating

Inline Feedbacks
View all comments