I’ve been working on xVal for WebForms without xVal in the jQuery.Validate branch. So far I’ve got basic server and client side validation for most data annotations validation attributes and server side validation for IValidatableObject implementers. The only challenging part so far was understanding how to serialize the validation rules for the jQuery Validate add method.

$("#txtClientName").rules("add", {
 required: true,
 minlength: 5,
 messages: {
   required: "Client name is required.",
   minlength: "Client name must be at least 5 characters."
 }
});

I finally decided to implement JavaScriptConverter, which is used with JavaScriptSerializer. The Serialize method is what takes the Rule collection and converts it into two separate dictionaries, one for rules and one for messages. This allows the JavaScriptSerializer to properly serialize the dictionaries for the add method options parameter.

public class RulesJavaScriptConverter : JavaScriptConverter
{
    private readonly ReadOnlyCollection<Type> _supportedTypes =
        new ReadOnlyCollection<Type>(new List<Type>(new[] {typeof (RuleCollection)}));

    public override IEnumerable<Type> SupportedTypes
    {
        get { return _supportedTypes; }
    }

    public override object Deserialize(IDictionary<string, object> dictionary, Type type,
                                       JavaScriptSerializer serializer)
    {
        throw new NotSupportedException();
    }

    public override IDictionary<string, object> Serialize(object obj, JavaScriptSerializer serializer)
    {
        return Serialize(obj as RuleCollection, serializer);
    }

    public IDictionary<string, object> Serialize(RuleCollection rules, JavaScriptSerializer serializer)
    {
        if (rules == null)
        {
            throw new ArgumentNullException("rules");
        }

        Dictionary<string, object> options =
            rules.ToDictionary<Rule, string, object>(rule => rule.Name, rule => rule.Options);
        Dictionary<string, string> messages =
            rules.ToDictionary(rule => rule.Name, rule => rule.Message);

        Dictionary<string, object> result =
            new Dictionary<string, object>(options) {{"messages", messages}};

        return result;
    }
}

And here’s how I’m using it.

StringBuilder validationOptionsScript = new StringBuilder();
validationOptionsScript.AppendFormat("$('#{0}').rules('add', ", _controlToValidateId);

JavaScriptSerializer serializer = new JavaScriptSerializer();
serializer.RegisterConverters(new[] {new RulesJavaScriptConverter()});
serializer.Serialize(rules, validationOptionsScript);

validationOptionsScript.AppendLine(");");

The next step will be figuring out validation groups. I also plan on renaming the project. My best idea so far is jQuey Validate.NET. It’s not the most creative, but it gets the point across.

Based on comments I’ve received from my last xVal for WebForms post, I’ve decided on a direction. The project will keep jQuery Validation but will move away from the xVal dependency. We’ll be trying the approach outlined by Dave Ward at Encosia.

I’ve been neglecting xVal for WebForms for a while now, mainly because I’m not sure which direction to take it. The xVal project is now deprecated in favor of the client side validation support introduced in ASP.NET MVC 2. This is obviously a problem since xVal for WebForms is built on top of xVal.

I think there are a few directions the project could take. The more traditional WebForms approach would be to simply generate the standard System.Web.Web.UI validation controls based on a model’s DataAnnotation attributes. I’m a fan of this approach as it makes a lot of sense to WebForm developers. For example, consider the following model:

public class Booking
{
    [Required(ErrorMessage = "Client Name is required.")]
    public string ClientName { get; set; }

    [Range(1, 20, ErrorMessage = "Number of Guests must be between 1 and 20.")]
    public int NumberOfGuests { get; set; }
}

The generated validators would be very similar to the following:

<asp:RangeValidator ID="valNumberOfGuests" runat="server" Display="Dynamic"
ControlToValidate="txtNumberOfGuests" Type="Integer" MinimumValue="1" MaximumValue="20"
ErrorMessage="Number of Guests must be between 1 and 20."/>

<asp:RequiredFieldValidator ID="valClientName" runat="server" Display="Dynamic"
ControlToValidate="txtClientName" ErrorMessage="Client Name is required." />

The other option is to find a way use the ASP.NET MVC validation bits with WebForms. ASP.NET MVC 2 uses the MicrosoftAjax library, while ASP.NET MVC 3 introduced unobtrusive validation with jQuery Validate. This approach would work a lot like the current project, but it would utilize MVC instead of xVal. I have to admit I’m not thrilled about referencing System.Web.Mvc in a WebForms project.

Yet another option is to generate jQuery validation scripts from scratch, using the methods Dave Ward has suggested. I like this idea since it doesn’t put a dependency on MVC bits.

It took me a while, but after working with WebForms and trying to make validation better, i.e. more like MVC, I can’t help but think that the best option is to simply move to MVC. But xVal for WebForms can still help projects that can’t be converted to MVC. I’ve already created a branch prototyping the first, most WebForms friendly option. If you use xVal for WebForms or are interested in attribute based client and server side validation, please let me know which option you would prefer.

Since my last post, I’ve completely rethought and re-implemented my take on xVal for WebForms. If you’re not familiar with xVal, stop now and read the tutorial. Now that you’re back, lets talk about xVal and WebForms.

Model

This is the model we’ll be using (you should recognize it from the xVal tutorial):

public class Booking
{
    [Required]
    [StringLength(15)]
    public string ClientName { get; set; }

    [Range(1, 20)]
    public int NumberOfGuests { get; set; }

    [Required]
    [DataType(DataType.Date)]
    public DateTime ArrivalDate { get; set; }
}

Form

And here is the form:

<asp:ValidationSummary ID="valSummary" runat="server" />
<label for="txtClientName">
    Your name:</label>
<asp:TextBox ID="txtClientName" runat="server" />
<label for="txtNumberOfGuests">
    Number of guests:</label>
<asp:TextBox ID="txtNumberOfGuests" runat="server" />
<label for="txtArrivalDate">
    Arrival date:</label>
<asp:TextBox ID="txtArrivalDate" runat="server" />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />

ModelValidator

My first try at validation was adding a validator control for each input field. After playing with it a bit, I decided that it would be better to have one validator for the entire model. This control defines the model’s type (ModelType), and then maps each property (PropertyName) to an input control (ControlToValidate).

<val:ModelValidator ID="valBooking" runat="server" ModelType="xVal.WebForms.Demo.Booking, xVal.WebForms.Demo">
    <ModelProperties>
        <val:ModelProperty PropertyName="ClientName" ControlToValidate="txtClientName" />
        <val:ModelProperty PropertyName="NumberOfGuests" ControlToValidate="txtNumberOfGuests" />
        <val:ModelProperty PropertyName="ArrivalDate" ControlToValidate="txtArrivalDate" />
    </ModelProperties>
</val:ModelValidator>

ControlToValidate

The biggest challenge was figuring out how to reference the input controls by given ID instead of by the elementPrefix + PropertyName convention. In other words, MVC xVal assumes that your ClientName input control ID is booking.ClientName, where booking is the elementPrefix and ClientName is the name of the property. This doesn’t work out so well with web forms and generated IDs. I got around this with the ModelProperties collection of ModelValidator. Then I updated the json formatted rule script to include each property’s control ID.

Complete Source and Demo

Get the complete source (with Bookings demo) at the xVal.WebForms project page on CodePlex.

Update: See xVal with WebForms Part 2 for a better implementation.

What is xVal and why would anyone want to use it?

xVal is a validation framework for ASP.NET MVC applications. It makes it easy to link up your choice of server-side validation mechanism with your choice of client-side validation library, neatly fitting both into ASP.NET MVC architecture and conventions.

See the CodePlex page for more information.

Basically, what xVal does, is take your validation rules and perform server and client side validation based on those rules. That means you don’t have to duplicate model validation at the page level. Now you’re probably thinking, “Isn’t it for MVC?”.  It is. But I, and at least two others, would like to take advantage of xVal’s features in traditional ASP.NET WebForm projects.

Getting it to work with WebForms

I finally found some time last night to see what it would take to get xVal working in an ASP.NET Web Application Project.  After a few hours I had something. I only needed to add two classes on top of xVal, DataAnnotationsValidationRunner and ModelValidator.

public static class DataAnnotationsValidationRunner
{
    public static IEnumerable<ErrorInfo> GetErrors(object instance, string propertyName)
    {
        return from prop in TypeDescriptor.GetProperties(instance).Cast<PropertyDescriptor>()
               from attribute in prop.Attributes.OfType<ValidationAttribute>()
               where prop.Name == propertyName && !attribute.IsValid(prop.GetValue(instance))
               select new ErrorInfo(prop.Name, attribute.FormatErrorMessage(string.Empty), instance);
    }
}

This is based on the implementation in the xVal demo. I added a second parameter to GetErrors() that allows the runner to check a specific property.

public class ModelValidator : BaseValidator
{
    private ValidationInfo _validationInfo;

    public string ModelType
    {
        get { return (string) ViewState["ModelType"]; }
        set { ViewState["ModelType"] = value; }
    }

    public string ModelProperty
    {
        get { return (string) ViewState["ModelProperty"]; }
        set { ViewState["ModelProperty"] = value; }
    }

    protected override bool EvaluateIsValid()
    {
        Type type = Type.GetType(ModelType);

        object model = Activator.CreateInstance(type);

        IEnumerable<ErrorInfo> errors = DataAnnotationsValidationRunner.GetErrors(model, ModelProperty);

        StringBuilder errorBuilder = new StringBuilder();
        foreach (ErrorInfo error in errors)
        {
            errorBuilder.AppendLine(error.ErrorMessage);
        }

        ErrorMessage = errorBuilder.ToString();

        return ErrorMessage.Length > 0;
    }

    protected override void Render(HtmlTextWriter writer)
    {
        Type type = Type.GetType(ModelType);
        _validationInfo = new ValidationInfo(ActiveRuleProviders.GetRulesForType(type), String.Empty);

        writer.Write(_validationInfo.ToString());
    }
}

This is the ASP.NET WebForms version of <%= Html.ClientSideValidation<Booking>(“booking”) %>, an implementation of BaseValidator. It uses ValidationInfo for rendering the client validation script and DataAnnotationsValidationRunner for the server side validation.

You can use it like this:

public class Customer
{
    [Required, StringLength(20)]
    public string Name { get; set; }
}

<script type="text/javascript" src="xVal.AspNetNative.js"></script>
<div>
    <asp:Label ID="lblName" runat="server" AssociatedControlID="Name">Customer Name:</asp:Label>
    <asp:TextBox ID="Name" runat="server" />
    <val:ModelValidator ID="validator" runat="server" ModelType="xVal.WebForms.Test.Customer, xVal.WebForms.Test"
        ModelProperty="Name" ControlToValidate="Name" />
</div>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />

There are a few things to note here:

• The TextBox ID must be the same as the model’s property name. This is because the xVal javascript is expecting the control’s ID to be PropertyName or prefix.PropertyName (MVC naming conventions). This could probably be fixed by modifying the client side plugins.
• The ControlToValidate property on ModelValidator doesn’t do anything, but it’s required by any implementation of BaseValidator (it will throw an exception if you omit it). This could probably be avoided by having ModelValidator inherit from Control and implement IValidator instead.
• xVal depends on System.Web.Mvc. It uses the TagBuilder and ModelState classes in a few places. There’s really now way around this without refactoring the MVC specific stuff into a separate assembly.

I’ll post an update when I have a chance to work on the first two items.