In 2017 I was working on a school management system where I stuck with a problem in which I have to map Student and his/her addresses. There may be more than one addresses for a single student first I decide to use simple JQuery and JS to create controls programmatically and validate that fields using JS and then convert that form into JSON object and send it to controller. But suddenly my senior came to me and said we have to add some other things as well like Student’s previous Education records and then his/her Degrees and Certifications that form was going a bit complex also there were some complex validation as well. I have implement that type of validations in my last project using Data annotation and that was very easy to implement at client and server side with just a simple line. At that time, I do some RND and came with and awesome solution in which I don’t need to write validation using JQuery or JS. In this article I will share that solution with you.

But before that you should have knowledge of following topics

1. Model Binding
2. Client Side and Server Side Validation
3. Validate Dynamically Created Controls

Model Binding

               Whenever we send data to our .Net core Controller we send it using HTML form or JSON using ajax request. But we always receive it in C# class, Object or in any collection. How is that possible actually behind the scene there is a module that converts or map JSON or HTTP form data into C# classes that is Model Binder. As you know in case of JSON there are key and value in object there should be same property in C# class that maps to Key of JSON object. But in case of HTML form we use different type of controls with name attribute this attribute maps to C# property. For Example

<input type=”text” name=”CustomerName” />

Whenever I will use this field in any form to send data to controller then our model binder will look “CustomerName” filed in C# Class and will try to copy value of this control to in class property. For more detail of model binding please refer to this link.

Client and Server Side Validation

      In .Net Core we use JQuery’s following libraries for client side validation.

1. validate.min.js
2. validate.unobtrusive.min.js

And for server side validation we use data annotations mostly we don’t write any code on client side for validation. That part is always done by framework for us. And we can check validation in Controller using “ModelState.IsValid”. It will return true if model is valid and false in case if it is not valid.

Let’s see what frame work create for us on client side.

This line of code we use for mapping our model to HTML.

<input type="text" class="form-control" id="txtCustomer" placeholder="Customer Name" asp-for=CustomerName>

And following line of code is used for validation message.

<span class="txt-danger" asp-validation-for=CustomerName></span>

It will create following code after rendering in browsers.

<input type="text" class="form-control" id="txtCustomer" placeholder="Customer Name" data-val="true" data-val-required="The CustomerName field is required." name="CustomerName" value="">

<span class="txt-danger field-validation-valid" data-valmsg-for="CustomerName" data-valmsg-replace="true"></span>

And that code is perfect for JQuery Validation Library.

Validate Dynamically Created Controls

For .Net Developer it is very headache to write different validation code for server and client side and it is also bad practice if you have write validation code server side and then you will rewrite that logic using JQuery or JS. For example, if you have an object named as Order that have a property of Details. Details is a list or array. Now for filling Details you have to Dynamically create controls using JS or JQuery but now problem is that .Net Core MVC Validation will not work for that controls. As JQuery binding is done on page loading and we are creating new controls in later therefore newly created control will not validate for that we have to rebind our validation for that we can use following code.

var $form = $("form");

$form.unbind();

$form.data("validator", null);

$.validator.unobtrusive.parse(document);

As that topics were prerequisites. In next post I will show how we can create a form with one to many relationship. If you have any questions, please ask in comments I am always open to discuss.

You can download all code from github.

Part 2