Asp .Net MVC Remote Validation

Facebook Twitter Google Digg Reddit LinkedIn Pinterest StumbleUpon Email

In previous blog posts, we have seen different DataAnnotations attributes provided as part of .Net Framework. In this blog post we will explore once such attribute Remote. Following links refers to other DataAnnotation attributes.

Generally, there are two types of validations we enforce in our applications. One is the client side validation and the other is the server side validation.

Implementing the client side validation mainly involves writing custom JavaScript that performs validation just on the browser itself. The server side validations are obviously performed on the server side, with server side scripting language. The challenge is what if I want to carry out a validation on the client but with the help of some data on the server side.

In Asp .Net, we have used technique like AJAX to perform such validations. But with Asp .Net MVC things are much more simpler, thanks to jQuery and .Net DataAnnotations.

In this blog we will go over the technique called RemoteValidation in Asp .Net MVC Framework.

The [Remote] DataAnnotation Attribute

One of the attribute of Asp .Net DataAnnotation is [Remote]. Based on the parameters provided to this attribute, it will automatically generate the Ajax request on our behalf to perform the validation on the server side. So idea is still the same but we will not have to do lot of JavaScripting.

Creating Asp .Net MVC 4 Application

Let's start by creating the new Asp .Net MVC 4 application.

Cretae Project

Visual studio will further ask you what type of project you want to create, go ahead and select Internet application template.

Internet MVC Project

Click OK and give Visual Studio a few seconds. Once the base project is created, let's examine the solution that has been crated out of the box.

Solution Explorer

Now, let's open AccountModel.cs file and find the RegisterModel class. Make following change in that Model class to enable remote validation. Here the [Remote] is the inbuilt DataAnnotation attribute and the first parameter is the ActionMethod that needs to be executed. The Second parameter is the Controller which is going to define our ActionMethod.

Remote Validation DataAnnotation Attribute

Next, let's go ahead and create this ActionMethod in our appropriate Controller. As you can see from the code below, this method is returning the JsonResult. The Method checks for the given Username in the database using Membership API. If the user is found with the existig Username we will return appropriate Error Message back. If no user is found we are just returning true indicating to the caller that requested Username is available.

Also notice the [AllowAnonymous] attribute on this ActionMethod. Since the AccountController is under [Authorize] attribute we need to allow anonymous access to our new ActionMethod. Because we need to call this method while user is registering and obviously user is not Logged in at that time. To learn more about [Authorize] attribute please refer this article.

JsonResult ActionMethod

Now go ahead and run your application. Navigate to the Register page and open FireBug, or any other tool based on your choice of browser. As you start typing the username you will notice the AJAX requests being made by your browser to our ActionMethod. If you put a breakpoint you will be able to see the whole work-flow in action.

Run Application

Notice that if you have a breakpoint, the Ajax call is actually invoking your ActionMethod with the input user has made in the browser.

Debug Application

Pretty cool, but what is the magic behind it ?

Understanding how it works

There are several components working together to provide this robust remote validation without we writing any Javascript. These components are,

When we used the [Remote] DataAnntation attribute and the view was rendered on the client machine, it appended some extra data-* attributes on our input tag. To Learn more about data-* attribute refer to this blog post.

data-* Attributes

Notice all the data-val-remote* attributes added by the Asp .Net MVC runtime while generating HTML for our views. Form here jQuery Validation and jQuery Unobtrusive Ajax plug-ins kick in and do their work.

Every time, the value changes for this input type, an Ajax call will be made to the server asking for the validity of the username. Following is the screen shot of one such request captured from FireBug window.

Ajax Request