Model validation in asp.net core MVC | Asp.net core MVC | Client side and server side validation

foreign [Music] aspects to consider is validating the input model validation is all about validating the user input in our today's session we are going to see how asp.net core MVC framework supports this feature this is our asp.net core MEC application this is how it looks if you want to go through previous videos you can follow the link in the description I will click on this tutorial tab here we have an option to add new tutorial now we can add tutorial name and description and we can submit to create new tutorial in this case name and description are the input that we are taking from the user whenever application receives any kind of input from the user we should always make sure that it is valid and in compliance with business rules input validation is nothing but to make sure that the input is in compliance with business rules validation can be client-side validation or server side validation client-side validation occurs at the client side that means before posting data to the server server-side validation occurs after data is received at the server before discussing how to implement these validations let's address few of the questions that arise in our mind first question is is it possible to implement both types of validation the answer is yes it is possible to implement both client-side as well as server side validations in our application and moreover that is the best approach to implement validation next what are the benefits of client-side validation client-side validation occurs at the browser and before submitting data to the server thus this avoids unnecessary round trip to the server thus this is time and resource now some of you may be thinking when validation is already done at the client side why do we again need to validate data at the server side isn't it a waste of time then no the reason is client-side validation is done by the browser by client-side scripts and if it is disabled for any reason then validation may not occur even if you have validation done at the client side now better security it is advised to house oversight validation I hope that things are clear now let's see how our asp.net code MVC framework supports these features we have a feature called Data annotations which helps us to Define validation rules I have discussed data annotations in detail in my previous video I'll keep Link in the description later you can have a look in our example we want to validate this tutorial form inside views folder we have create tutorial.cshtml and here we have a form that handles this input if you notice at the top we are binding this tutorial model to thus we can make use of this model to Define validation rules we are making use of data annotation attributes to Define to Define validation rules to use data annotations we should import the namespace system.componentmodel.data annotations this namespace has so many built-in attributes that almost matches all of our cases if you want you can create custom attributes as well here I am defining validation tools my model has two properties name and description I want my name to contain only characters that means alphabets I don't want any any other special character or number so I'm using this regular expression attribute and I'm specifying regular expression next I'm using required attribute to make name field mandatory I'm using this display attribute because on name to be displayed as tutorial name again here I am using require and display attribute data annotation is not only used for model validation it is also used for database modeling and many other purposes I have discussed all of them in detail in my previous video we have defined our validation rules using data annotation attributes now let's see how to implement server-side validation in our example we are using this create tutorial form to create new tutorial thus this form carries our data we all know that in MVC framework controller action method handles our request now we have to find out which controller action method handles this form because that's going to be the place where we are going to implement server side validation I have open create tutorial.cshtml here we have a form if you look at these tag helpers ASP controller and ASP action we can understand that tutorial is the controller and create tutorial is the action method inside that controller which handles this form here we have controllers folder inside this controllers folder we have tutorial controller now we need to find out create tutorial action method here I have create tutorial action method here we have two action methods with the same name one with HTTP get attribute and other one is HTTP post attribute always remember action method with HTTP post attribute handles form post this create tutorial action method takes a parameter which is of the type tutorial and our input data is mapped to this model which is done by model binding system and concept is called as model binding if you want to go through model binding concept I have a dedicated video you will find that video inside asp.n core MVC playlist validating input is very simple if you notice here I have if condition inside which I'm checking whether the more whether model state is valid or not again model state is framework provided feature which stores all the validation errors and model binding errors if you want you can write your custom logic to validate data but in most of the simple cases this much will be sufficient we have seen how to define validation rules using data annotations and how to validate at the controller using model State one more important part of validation is displaying error messages to the user I will open create tutorial View to display validation errors we make use of validation tag helpers can you see ASP validation for whose value specified as name this is validation tag helper and here we have used span tag to display error messages this is bound to name property of tutorial model all the errors related to name property will be displayed here same way we are using one more validation tag helper for description property Define that here we have create tutorial form and not fill anything I will submit see control has reached this create tutorial action method and look at the value of model state it is not valid this means there are validation errors so it's going to return back to the view it is not going to continue further I will continue all the validation errors are displayed this is server side validation we validate the form when the form is submitted to the server let's move further and understand how to implement client-side validation client-side validation involves two important steps first step is to install jQuery libraries second step is to load these files on the necessary view page to implement client-side validation we make use of jQuery validation libraries if you create your application using asp.net core web application template then framework itself will do all the necessary setup for you first step is to install necessary libraries here you have www root folder inside which you have lib folder here you can find jQuery validation folder and jQuery validation on Optus you if I expand you can find the necessary JavaScript files then we should call these scripts in our view file please remember I have used asp.net web app template to create this project that's why I have all these files installed if you have used empty project template if you have www root folder right click on that folder then here you will find an option add client-side Library search for jQuery and install I'm not going to install because already it is installed in my project same way you can search for jQuery validation and jQuery validation on obtrusive you can install these files we have installed the necessary files until we load these files client-side validation will not occur let's verify that this is our form I'll place breakpoint here this is create tutorial action method this action method is going to get called when we post the form I'll not fill anything and submit ideally before this form is submitted to the server client's client-side validation should occur and submit see as soon as I submit without validating the control has reached the server that means form is submitted it means client-side validation did not occur now we are getting these error messages this means these error messages are because of the server side validation to make client-side validation happen we should load script files wherever necessary inside views folder we have shade folder inside which we have validation scripts partial dot chtml file here framework has included these script files now you can refer to this file wherever necessary let's say I want to validate form while creating tutorial I can include that script here in this create tutorial.cshtml using script section let's verify that here I have create tutorial and here I have a breakpoint this time if I submit without entering any value it should not hit that breakpoint instead it should give me error message thus we can make sure that client-side validation has occurred I'll submit this time we have error message form is not submitted to the server client-side validation has occurred and we have error message displayed the moment I enter something error has gone and submit now it has reached create tutorial oversight validation will occur if everything is fine then the record will be created after client-side validation and server side validation are successful our record has been created one more place where you can include these group files is layout file if you want validation to happen on several files instead of calling script on every single file you can include those scripts in layout file then validation will apply to all the pages you can include like this and you can remove from here this time I'll enter numeric value as soon as soon as I type numeric value I am getting error please enter text this is client-side validation thus based on your requirement you can decide the place to include these files very important thing to know about client-side validations is when we include these files in our application the same validation rules that we have defined using data annotations are used to validate a client side but we need not write any different rule before validating at the client side the same roles are used I hope you're clear with oversight and client-side validation thanks for your time and support see you soon in the next video

Channel: Just Pick and Learn

Views: 1,553

Keywords: just pick and learn, pick and learn, What is Model Validation in asp.net core mvc, different types of model validation in asp.net core mvc, why do we need to implement model validation in mvc application, what is server side validation in asp.net core mvc, what is client-side validation in asp.net core mvc, asp.net core mvc tutorial for beginners

Id: qjnfe8VUq8g

Length: 11min 51sec (711 seconds)

Published: Fri Dec 09 2022