Welcome to weblogs.com.pk Sign in | Join | Help

Data Validation-MVC

We needed to introduce few new Validation in an old Silverlight app and at the same time; we planned to migrate the app from Silverlight to HTML/JS/CSS so people on mobile devices can also use that app. For the interim release we used System.ComponentModel.DataAnnotations based validations in Silverlight; this enabled us to continue to use the existing entities with data validation rules and most of the server side code “as-is” in the final MVC based release.

If we have the entities with DataAnnotations in place; using Controller’s ModelState.IsValid check and by using Html.Validation*() view helper methods in the view; we can display the validation warnings. In its vanilla form it works only at server side and validation warnings only appear when form is submitted to the server.

image

If we want Silverlight like client side validation experience as well; we naturally need some Javascript / HTML magic. If we add ClientValidationEnabled setting with true value in web.config appSettings (or using code); Html view helpers will spit out the applied validation rules in JSON and back in MVC2 days; when Microsoft was in mode that whole stack should come from them; they introduced MicrosoftAjax.js and MicrosoftMvcValidation.js script files; that uses the emitted validation rules in JSON and does client side validation along with server side validation. Check these links for some history lessons

With MVC3 onwards there is a new setting; UnobtrusiveJavaScriptEnabled; if this setting is set to true; for the validations, Html helpers will use HTML’s data-* attribute; the good thing about this approach is that you can use jQuery selectors or CSS selectors to access or format input fields! So to complete the picture with this new setting in place; we need to include jquery.validate.js (jQuery.Validation NUGET package), jquery.validate.unobtrusive.js (Microsoft.jQuery.Unobtrusive.Validation NUGET package) and jquery.unobtrusive-ajax.js (Microsoft.jQuery.Unobtrusive.Ajax NUGET package) script files to do their magic for Client Side validation. If you are using MVC4 or onwards you can use the Bundling as well. Visual Studio 2013’s MVC4 project does these all out of the box; this information is important if you have some old project that you have migrated and want to use server + client side validation goodness!

image

One tip here is; MVC comes with its own set of DataAnnotations; one such is “Remote” using which you can validate the field from server side. If you are “reusing” or linking the Entities / Model files in different projects (for instance in Silverlight or some other non MVC web app) you will naturally get errors on using such data annotations. You can make your model class Partial and have a partial class in the MVC project and annotate it with MetadataType and then in the meta data type class use MVC specific data annotations the way you like:

image

Published Thursday, December 17, 2015 3:06 PM by khurram
Filed under:

Comments

No Comments

New Comments to this post are disabled