ASP.NET MVC 3: Validate complex Types (Objects & Lists) in Ajax Form using jQuery and JSON on Client Side and Server Side


This blog post shows how to validate models containing complex types such as Objects and Lists in ASP.NET MVC 3.

We start with the source code described in one of my previous posts “ASP.NET MVC 3: Using JSON result for jQuery Ajax Forms validation” (you can download the Visual Studio 2010 project here). Summarized this project contains one Ajax form that supports (unobtrusive) client side and server side validation and uses jQuery and JSON to transfer the form data to the server.

In a first step we modify the properties of the model (Models/ValidationModel.cs) and add some complex types:

public class ValidUserNameAttribue : ValidationAttribute
{
  public override bool IsValid(object value)
  {
    return (value != null && value.ToString() == "Bob");
  }
}

public class User
{
  [Required]
  [StringLength(8, MinimumLength = 3)]
  [ValidUserNameAttribue(ErrorMessage = "User name != 'Bob'")]
  [Display(Name = "User name")]
  public string UserName { get; set; }

  [Required]
  [StringLength(8, MinimumLength = 3)]
  [Display(Name = "Display name")]
  public string DisplayName { get; set; }
}

public class ValidationModel
{
  public User User { get; set; }       

  public List Users { get; set; }
}

In a second step we modify the form (Views\Home\Partial\_Form.cshtml) to add input element for the new model properties:

@model MVC3_Ajax_Form_jQuery_Validation.Models.ValidationModel

@DateTime.Now: Partial/_Form.cshtml rendered

@using (Html.BeginForm("Form", "Home")) {

User object

@Html.LabelFor(m => m.User.UserName): @Html.EditorFor(m => m.User.UserName) @Html.ValidationMessageFor(m => m.User.UserName)

@Html.LabelFor(m => m.User.DisplayName): @Html.EditorFor(m => m.User.DisplayName) @Html.ValidationMessageFor(m => m.User.DisplayName)

List of User objects

for (var i = 0; i <= 1; i++) {

User @i

@Html.LabelFor(m => m.Users[i].UserName): @Html.EditorFor(m => m.Users[i].UserName) @Html.ValidationMessageFor(m => m.Users[i].UserName)

@Html.LabelFor(m => m.Users[i].DisplayName): @Html.EditorFor(m => m.Users[i].DisplayName) @Html.ValidationMessageFor(m => m.Users[i].DisplayName)

} }

In a last step we adapt the “success-view” (Views\Home\Partial\_Success.cshtml) that is shown after the data have been successfully validated on the server side:

@model MVC3_Ajax_Form_jQuery_Validation.Models.ValidationModel

Model is valid :)

Model.User.Username: '@Model.User.UserName'
Model.User.DisplayName: '@Model.User.DisplayName'
Model.Users[0].Username: '@Model.Users[0].UserName'
Model.Users[0].DisplayName: '@Model.Users[0].DisplayName'
Model.Users[1].Username: '@Model.Users[1].UserName'
Model.Users[1].DisplayName: '@Model.Users[1].DisplayName'

As you can see in the source code above, there is no magic; model binding and validation of complex objects and lists work out of the box in ASP.NET MVC 3.

You can download the Visual Studio 2010 project containing all the source code here.

,

2 responses to “ASP.NET MVC 3: Validate complex Types (Objects & Lists) in Ajax Form using jQuery and JSON on Client Side and Server Side”

  1. Hi,
    thanks for your comment. There is no password required to unzip the file, but I found out, that one could get a “path too long” error when trying to unzip the file. Please try to rename the zip before uncompressing or move it to another folder.
    Best regards,
    Jan

Leave a Reply

Your email address will not be published. Required fields are marked *