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

Data Validation–Web Forms

Data Validation Series

In the previous posts we learned about how we can do client side validation using System.ComponentModel.DataAnnotations based attributes on the server side .NET classes. These techniques emerged in ASP.NET MVC stack; but these attributes were made part of .NET framework and with .NET 4.5 we can use these in the web forms as well. Lets take this UserModel server side class with data annotations as an example

usermodel

After .NET 4.5; web forms data controls now also support MVC style model binding and we also no longer required “data source” controls and instead we can specify CRUD methods directly. For the testing; lets take a FormView and use its “Insert View” with Select and Insert methods defined in its code behind. We can still use the designer; creating a “temporary” object data source with code behind class’ CRUD methods and binding the formview to it to generate the templates and then simply remove the object data source and use the new .NET 4.5 functionality and specify the model and CRUD methods in the formview directly. All we need to add is; the ValidationSummary control at top and our data annotation based validation will work; we can use this.ModelState.IsValid after calling this.TryUpdateModel in the code behind to check if the model state conforms the validation rules. We will end up with something like this

formview

This is only server side validation; and ValidationSummary control will list down the model validation issues when the form gets submitted to the server. What if we want client side validation? We can use the jQuery based unobtrusive validation techniques just like MVC. First we need to add Microsoft.jQuery.Unobtrusive.Validation NUGET package that has the dependency on the jQuery.Validation; this client side Javascript library from Microsoft enables to define additional attributes on the html input controls and use this meta data to validate the input controls using the jQuery.Validation and jQuery. However our formview template also needs update and we need to add the required meta data using data-val* attributes for this client side validation to work. We can either learn about these additional attributes and manually add them according to our server side model rules or we can simply use “Daynamic Data” control that does this automatically; all we need is add DynamicDataTemplatesCS NUGET package and use DynamicEntity control in the formview template. Also add required Javascript libraries

DynamicDataTemplateCS

  • Update jQuery.Validation NUGET package after Microsoft.jQuery.Unobtrusive.Validation to fix the Javascript errors
  • We can also use ASP.NET bundling feature and create a bundle of these Javascript libraries and add it instead; this MVC feature is also available in Web forms post 4.5

If we check the generated code; we can learn about the data-val* attributes that Dynamic Data control has automatically generated for us using the server side model attributes. It also attached the warning spans with each input control and make them visible if its associated input control has any validation rule. It is quite a monkey html code that we didnt had to write!

data-val

Published Friday, November 10, 2017 11:24 PM by khurram
Filed under: ,

Comment Notification

If you would like to receive an email when updates are made to this post, please register here

Subscribe to this post's comments using RSS

Comments

No Comments

Leave a Comment

(required) 
required 
(required)