Remote validation has finally landed in RC1 of ASP.NET MVC 3.  It’s a weird area as more often than not people tend to over complicate something that is really pretty simple.  Thankfully the MVC implementation is fairly straightforward by simply providing wiring allowing the jQuery Validation plugin to work it's magic.  Basically there is a new Remote attribute that can be used like so.

public class Credentials
{   
    [Remote("Username", "Validation")]
    public string Username { get; set; }    

    public string Password { get; set; }
}

As you can see we have attributed the Username field with a Remote attribute.  The 2 parameters tell us what Action and Controller we should call to perform the validation.  This does make me feel slightly uneasy as it kind of feels like you are coupling the controller to the model which doesn't sit right by me.  currently sitting on the fence I'll see how it works in real life.  Anyway I implemented it like so,

public class ValidationController : Controller
{    public ActionResult Username(string UserName)
    {
        return Json(Repository.UserExists(Username), JsonRequestBehavior.AllowGet);
    }
}

And thats you - provided you have the necessary client side libraries included of course (jQuery, jQuery Validate etc). and have Client Side Validation turned on (now by default in MVC3).


Configuration

The Remote attribute offers a few nice little configuration options to make things easier.  The typical ones are there such as ErrorMessage, ErrorResource etc. but there are a few specific ones as well.

Fields

There may be a case where ding the name and the value of a single form field isn’t enough to perform validation.  Perhaps validation is affected by some other field/value in the form.  The Remote attribute accepts a comma separated list of other fields that need to be sent up with the request using the Fields parameter

This basic example will send up the value of the EmailService input field along with the value of Username.  Clean and simple.

[Remote("Username", "Validation", Fields = "EmailService")]

HttpMethod

HttpMethod simply allows us to change how the ajax request is sent e.g. via POST or GET or anything else that makes sense.  So to send a remote request via POST

[Remote("Username", "Validation", HttpMethod = "POST")]

A Minor Difference

You might notice if you read the release notes for RC1 that my implementation of the controller is slightly different.  The reason being that the example in the release notes is broken :-).  The example looks like this

public class UsersController {
    public bool UserNameAvailable(string username) {
        return !MyRepository.UserNameExists(username);
    }
}

However the Validate plugin expects a JSON response which is fine on the surface but returning a boolean response to the client side results in a response body of False (notice the captial F) which in turn causes a parse error when the plugin performs JSON.parse.  My suggested solution is actually more inline with how most people would typically write an Ajax capable controller action anyway (though I am not happy with the JsonRequestBehaviour usage) but there are other ways but they aren’t pretty….

public class ValidationController : Controller
{       
    public string Username(string username)
    {
        return (!Repository.UserExists(Username)).ToString().ToLower();
    }
}

See?  Ugly and plain WRONG (but it will work).

Nice to see this feature finally landing as it can be useful in certain situations.