June 22, 2011 06:35 by
Scott
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.
June 2, 2011 06:00 by
Scott
Every website has to display data and every website has a Grid control. In ASP.NET MVC 3 there’s the WebGrid, which is part of the Microsoft Web Helpers library. This can be downloaded through NuGet (formerly NuPack). NuGet is a free open source package manager that makes it easy for you to find, install, and use .NET libraries in your projects. One piece of functionality that is critical is reacting when the user selects an item in the WebGrid. This article will focus on finding out which row was selected, but also how to find out more about the data that is selected.
Before moving on, you need to download ASP.NET MVC 3. Click here to download and install them using the Microsoft Web Platform Installer.
Open studio 2010 and create a new ASP.NET MVC 3 Web Application (Razor) project. To focus on the answer, I’ve got a simple model as seen below.
Using the WebGrid, it’s easy to display this data to the user.
The first column is the key to making this work. @item.GetSelectLink outputs a HTML anchor tag with the row selected. This is passed as a QueryString, and the name of the QueryString is set by the selectionFieldName property set on the grid.
To find out what row is selected is just as easy. The WebGrid has a property called SelectedRow. This sets a reference to a GridViewRow object that represents the selected row in the control. When you combine this with the HasSelection property, you can get the selected row like this.
I’ve created a partial view called _Person.cshtml. The file begins with an underscore (_) because I don’t want this file called directly from the web. The second parameter is the data being passed into the partial view. The data in this instance is the selected row.
Very easy, right??