devermind.com

jQuery Selectmenu widget for jquery-ui 1.8

Adrian Grigore — Tue, 11 May 2010 09:17:14 +0000

My current web project includes some elements and Firefox lacks proper indentation for the

So I used the jQuery.Selectmenu plugin to style the

<% } %> <%= Html.ClientSideValidation()%>

Note that the View does not contain any JavaScript or other means to specify client-side validation rules. Everything is done transparently and automatically behind the scenes.

Prerequisites

In order for this to work, you need to set up a few things first:

Data Annotation validation attributes for server-side validation. IMO this is the best way to handle server-side validation anyway, even if you are not using client-side validation at all.

Brad Wilson has written a great blog article on how to use DataAnnotations in ASP.NET MVC.

Note that there is a bug in DataAnnotationModelBinder which might lead to NullReferenceExceptions when using custom ViewModels. This does not become apparent in our demo project, but if you should encounter this problem, you can find a fix in this StackOverflow posting.
Download and reference jquery.validate in your Master Page.
Download and reference xVal version 0.8 or later in your project. xVal is a great framework for easy implementation of client-side validation in ASP.NET MVC. It transforms standard server-side validation rules into client-side validation rules recognized by jquery.validate.

Steve Sanderson describes how to set it up and use in this blog article.

Once you get this far, you can implement rules 1 and 2 from our example. You could also implement rule 3, although you’d have to derive it from System.ComponentModel.DataAnnotations.ValidationAttribute, so there would’t be any client-side validation for that.

Implementing generic client-side Remote Validation

While rules 1 and 2 are automagically enforced by xVal on both the client and server side, rule 3 is only checked when the user posts the form. That’s because xVal does not know what to do with our custom rule. It just looks for standard validation rules like Required, StringLength or RegularExpression and ignores everything else.

Enforcing rule 3 on the client side as well without incurring any additional effort is where the technique I would like to present comes into play.

The first step is not to derive your custom validation rule from ValidationAttribute, but from the RemotePropertyValidator class I implemented. This is already depicted in Listing 1 above.

RemotePropertyValidator is in turn derived from ValidationAttribute, but it also implements xVal’s ICustomRule interface. This allows it to specify a JavaScript function that should be executed in order to check if the given property is valid on the client side.

RemotePropertyValidator tells xVal to execute the JavaScript function “RemotePropertyValidation”. The parameters for this function should be the type of your derived custom validator and the Error message you specified:

Listing 4 – RemotePropertyValidation class

   public abstract class RemotePropertyValidator : ValidationAttribute, ICustomRule
    {
        public CustomRule ToCustomRule()
        {
            return new CustomRule(
                "RemotePropertyValidation", // JavaScript function name
                new
                    {
                        validator = ToString(),
                        errorMessage = base.ErrorMessage,
                    }, // Params for JavaScript function

                base.ErrorMessage
                );
        }
    }

You might be wondering why I am checking for empty strings / null in Listing 4. That’s because of differences between how xVal / jquery.validate work on the client side and how the DataAnnotationsModelRunner is implemented on the server side: While it is possible to implicitly implement a Required validator by deriving from ValidationAttribute on the server side, it is not possible to do this with ICustomRule descendents on the client. So I am checking for empty strings / null to avoid inconsistent behaviour.

The ClientSideRegEx property can be set to a regular expression that will be executed on the client before the remote validation is done. You can use it to avoid unnecessary calls to your RemoteValidation controller.

Now, when the user starts typing something in the e-mail field, the browser will execute the JavaScript function “RemotePropertyValidation”. Note that this function will receive your derived server-side validator’s object type and your validator’s error message as parameters.

Next, we need to implement a generic RemotePropertyValidation function. In this function we can create a “remote” validation rule as supported by jquery.validate and attach it to the Email e-mail input field’s rules collection:

Listing 5 – Generic client-side remote validation function

function RemotePropertyValidation(value, element, params) {
    var wrappedElement = $(element);
    if (wrappedElement.rules()["remote"] === undefined) {
        //add optional regEx validator to minimize ajax requests
        if (params.regEx !== null && wrappedElement.rules()["xVal_regex"] === undefined) {
            wrappedElement.rules("add", {
                xVal_regex: [params.regEx],
                messages: {
                    xVal_regex: params.errorMessage
                }
            });
        }
        var remoteRule =
        //add a new remote validation rule
        wrappedElement.rules("add", {
            remote: {
                url: "/RemoteValidation/Property",
                data: {
                    value: new CreateInputValueAccessor(wrappedElement.attr("name")),
                    validator: params.validator
                }
            },
            messages: {
                remote: params.errorMessage
            }
        });

        //validate element again to trigger the new rule(s)
        $("form").validate().element(wrappedElement);
    }
    return true;
}

function CreateInputValueAccessor(inputName) {
    return function() {
        return $("[name=" + inputName + "]").val();
    };
}

The RemotePropertyValidation () function should be referenced in your Master page. Now the first time a user enters something in the Email field , jquery.validate will first validate it using the Required and the Regex rule. If both rules are satisfied, it will check if the e-mail address is already taken with the validation rule that RemotePropertyValidation() inserted on the fly. This will fetch the following URL and parse the JSON reply as validation result.:

http:///RemoteValidation/Property?value=&validator=RemoteValidtion.Models.User.IsNew

Now we just need to implement a RemoteValidation that construct an appropriate validator object (note that this is provided in “validator” request parameter), let it validate the user input and return the validation result as JSON:

Listing 6 – RemoteValidation controller

using System;
using System.Reflection;
using System.Web.Mvc;
using RemoteValidation.Models;

namespace RemoteValidation.Controllers
{
    public class RemoteValidationController : Controller
    {
        //
        // GET: /RemoteValidation/Property
        public JsonResult Property()
        {
            Type validatorType = Type.GetType(Request["validator"], true);
            var validator = (RemotePropertyValidator) Activator.CreateInstance(validatorType);
            return Json(validator.IsValid(Request["value"]));
        }
    }
}

And that’s it! Now that you have the JavaScript RemotePropertyValidation function and the remote validation controller in place, all you need to do for new custom validation rules is to derive them from RemotePropertyValidator. This ensures that your validation rules are are automatically enforced on both the server and the client.

For example, all you’d need to implement for server AND remote client-side validation of password strength is this:

Listing 7 – Complete implementation of an additional client- and server-side Validator

 public class IsSafePasswordAttribute : RemotePropertyValidator
        {

            public IsSafePasswordAttribute()
            {
                //perform some simple password strength check with a regular expression
                //on the client side first
                ClientSideRegEx = ".{8,20}";
            }

            protected override bool PropertyValid(object value)
            {
                //Insert more elaborate server-side / remote client side password checking
                // logic and return result here...
            }
        }

Caveats

There are a few things you should keep in mind when using this technique:

You can’t implicitly implement a Required validator using this technique, so if a property is not optional, you must always decorate it with a Required validator apart from of your own RemotePropertyValidator descendant. It wouldn’t really make sense to implement a Required validator this way anyway. Please see the Implementation section above if you are interested in the reason for this.
You can only apply one remote validation rule per form field. This is a limitation of jquery.validate, and it makes sense not to have more than one remote validation rule anyway since you want to minimize the amount of server postbacks as much as possible. If you need to remotely check two different rules on the same property, you can always write a new rule which incorporates both checks, so the only problem is finding an error message that fits both validation rules.
This approach only works for Validation Attributes applied to properties, not to entire business entities. I’ll discuss a similar approach for validating entire business entities in the second part of this article.

Download the finished demo project

Summary

Now you know how to implement remote client-side validation without writing any custom JavaScript code. I discussed how to implement all validation rules, even those that can only be checked on the server, on both the client AND server side in C# code only. I showed how you can do this without any additional effort when implementing new rules.

The only real limitation is that the business rule can check only a single property, not an entire business entity. Stay tuned for the second part of this article, where I’ll discuss how to circumvent this limitation in a similarly easy way.

Edit: The second part of this article has already been posted here.

ASP.NET MVC Tip #2: Turn on compile-time View Checking

Adrian Grigore — Sun, 03 May 2009 14:01:32 +0000

I like the compiler to catch as many errors as possible before I start debugging or release my application. This also applies to code nuggets in ASP.NET MVC views, especially since these are not easily unit-testable. But views are not validated at compilation, at least not when using the standard settings for ASP.NET MVC projects.

Tools like Resharper can notify you of syntax errors within your views, but you can still build the project and not get a single error. Instead, your application will crash when trying to evaluate the buggy view.

Fortunately you can easily make Visual Studio compile your views along with the rest of your code. The only downside is that your project will build a bit slower, but if this bothers you during development you can also enable this feature on a per configuration basis. For example you may want to compile your views in Release mode, but not in your Debug configuration , so you have the extra safety of compile-time view checking before releasing a new version, but you still get lightning-fast compilation times while developing.

Please proceed as follows to turn on compile time view compilation:

Open your .csproject or .vbproject file in a text editor of your choice. It’s just a simple xml file, which is why any editor will do fine.
Locate the element that belongs to the configuration you would like to alter.
Within this PropertyGroup, add an additional element with “true” as its text value.

For example, this will turn on view compilation in my project’s Release configuration:




true

...

That’s it! The next time one of your views has compile-time errors, these will be reported when building your application.

One last thing: You need to repeat this procedure for all configurations you might create in the future if you want your views to be checked in those configurations as well. Even if you tell Visual Studio to copy settings from an existing configuration where this tag is already set to true, the MvcBuildViews tag is not copied by Visual Studio.

Edit: As some readers pointed out, your project’s compilation time will increase after turning on view compilation. For this reason, I have recently switched it off for the debug configuration of my current project. However, compile-time view compilation is still tremendously useful before releasing a new version. Or perhaps even before submitting a new revision to your source control server. It can catch a lot of different errors this way, especially if you are using the new ASP.NET MVC strongly typed Html helpers.

ASP.NET MVC Tip #1: Using Custom ViewModels with POST action methods

Adrian Grigore — Sat, 18 Apr 2009 11:44:27 +0000

One of the top good practices for ASP.NET MVC is not to use the ViewData Dictionary, but to put your data in a strongly typed ViewModel instead. Many people seem to be using Linq to SQL entities as a ViewModel, because it’s a very comfortable approach. But what do you do if your view should contain data that is not included in any of your linq entities? Scott Gu’s chapter 1 preview of his upcoming ASP.NET MVC book recommends using a custom-shaped ViewModel for those cases.

One thing that still puzzled me after reading and trying to follow the chapter was how to create complex custom ViewModels (as opposed to putting all data in the ViewData dictionary or using vanilla Linq to SQL entities). Scott mentions on page 107 of the book that you “might have the action method update a ViewModel object with the form-posted data, and then use the ViewModel instance to map or retrieve an actual domain model object”, but there is no actual example of how this would look in source code.

For example, let’s assume you have an edit action method with the following view:

So your edit form displays data coming from a Linq entity representing a customer (FirstName, LastName, Email, Country, AccountType), but you also need SelectLists to populate the Country and AccountType DropDownLists.

The simple, but untyped approach: the ViewData dictionary

The simplest approach is to use the Customer Linq entity as ViewModel and to put the two SelectLists in the ViewData dictionary. This works fine, but I dislike the fact that there is no type-safety for the two SelectLists. Instead you have to use a type cast from object to SelectList:

Country

<%= Html.DropDownList("CountryCode",ViewData["Countries"] as SelectList)%>

<%= Html.ValidationMessage("CountryCode", "*")%>

The fully typed approach: Custom ViewModels

So you want fully typed model data, but the linq entity does not hold all the data you need to render the view. Since you don’t want to clutter my Customer Linq to SQL entity with two properties that return the two SelectLists, the only alternative to get a fully typed view is to use a custom ViewModel:

public class CustomersFormViewModel
{
public SelectList AccountTypes { get; set; }
public SelectList Countries { get; set; }
public Customer Customer { get; set; }
}

Note that the ViewModel is not a mere Linq entity anymore. Instead, it contains the one Customer Linq entity instance, plus the two SelectLists for my DropDownLists.

Now you can implement your view without using any typecasts:






FirstName:


<%= Html.TextBox("Customer.FirstName")%>

<%= Html.ValidationMessage("Customer.FirstName", "*")%>







LastName:


<%= Html.TextBox("Customer.LastName")%>

<%= Html.ValidationMessage("Customer.LastName", "*")%>







Email:


<%= Html.TextBox("Customer.Email")%>

<%= Html.ValidationMessage("Customer.Email", "*")%>







Country


<%= Html.DropDownList("Customer.CountryCode",Model.Countries)%>

<%= Html.ValidationMessage("Customer.CountryCode", "*")%>







AccountType:


<%= Html.DropDownList("Customer.AccountType",Model.AccountTypes)%>

<%= Html.ValidationMessage("Customer.AccountType", "*")%>

I was wondering if the MVC framework can automatically map the form values and reconstruct a CustomersFormViewModel. In other words, can I simply implement a strongly typed POST edit action method and receive a fully populated ViewModel as a parameter like this:

//POST: /CustomersController/Edit

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Edit(CustomersFormViewModel model)
{
//validate data, save customer, handle validation errors...
}

The answer is yes! The MVC framework even maps object hierarchies of any depth as ViewModels.

How not to do it

This is all really easy, but still there were few things that threw me off at the beginning.

The ViewModelBinder only maps properties, not public fields. A ViewModel like this cannot be mapped:

public class CustomersFormViewModel
{
public electList AccountTypes;
public SelectList Countries;
public Customer Customer;
}

The names of your POSTed form values must match the object hiearchy you want them to be mapped to. Something like this will not work:






FirstName:


<%= Html.TextBox("FirstName",Model,Customer,FirstName)%>

<%= Html.ValidationMessage("FirstName", "*")%>

In hindsight both restrictions are perfectly logic and reasonable, but it’s easy enough to do it wrong nevertheless and also quite difficult to figure out what went wrong if binding does not work. Hopefully this article will help you avoid any problems with using Custom ViewModels with POST action methods.

ASP.NET MVC Beginner’s Guide

Adrian Grigore — Tue, 17 Mar 2009 12:19:23 +0000

I’ve decided take Microsoft’s brand new ASP.NET MVC framework for a small test drive by building a small proof of concept application with it. The frame work sure looks promising, even despite it’s early stage of development and relatively small features as compared to ASP.NET web forms.

It seems there are no good books available on the subject yet. The few that are already in stock at Amazon are based on the community preview, and it seems that there have been quite a few changes in the the framework since then.

Fortunately, ScottGu hat just released a free sample chapter of his upcoming “Professional ASP.NET” (Wrox) book. It contains a 200-page walkthrough guide on how to build a simple ASP.NET MVC application.

The chapter is available for download here.

Interview on Shareware Radio

Adrian Grigore — Wed, 04 Mar 2009 13:03:36 +0000

Mike Dulin has just published an interview we recorded at last year’s European Shareware Conference. We talked a bit about shareware games vs. casual games, how I got into the games business and the current market climate in both areas. The Interview is available here.

Updated: Generic base class for LINQ2SQL data layers

Adrian Grigore — Thu, 26 Feb 2009 14:23:32 +0000

Hi,

It’s been a while since I posted the first version of my generic base class for LINQ2SQL data layers. The idea behind this class was to provide a quick and simple way to implement a repository with LINQ2SQL and therefore also a solid foundation for implementing your n-tier architecture data layer. If you missed the article, you can read more about the base class here.

The version I previously posted has worked fine for me, but it was still lacking a way to retrieve the ID and version attributes of saved entities. Due to a typo, it also did not work with entities that have more than one unique identity column. Thanks to Mike and Fabrizio for pointing out these limitations!

Version 0.2 available here fixes both of these issues:

Download RepositoryBase Demo Website

Download RepositoryBase Source Code Only