Question

I have an order entry page and a corresponding ViewModel (simplified example):

public class OrderCreateViewModel
{
    [Required]
    [StringLength(100)]
    public string Remark { get; set; }

    [Required]
    [StringLength(50)]
    public string AddressCity { get; set; }
}

This model is used for the Create view:

@model MyNamespace.OrderCreateViewModel

@using (Html.BeginForm())
{
    @Html.ValidationSummary(false)
    @Html.EditorFor(model => model.Remark)
    @Html.EditorFor(model => model.AddressCity)
    <input type="submit" value="Create order" name="saveButton" />
}

The Create action for the POST request in the controller is:

[HttpPost]
public ActionResult Create(OrderCreateViewModel viewModel)
{
    if (ModelState.IsValid)
    {
        // Save order in DB
        return RedirectToAction("Index");              
    }
    return View(viewModel);
}

The order (required fields and length of strings) gets validated on client side (using unobtrusive Javascript, jQuery validation) and on server side (ModelState.IsValid).

Now, I add a second button to the page which has the purpose to save the Address (AddressCity in the example) in a master table. This is supposed to happen with an Ajax POST request (using jQuery):

<input id="buttonAddAddress" type="button" value="Add address" />

A click event handler is hooked to this button which reads the content of input fields related to the address (only AddressCity in the example) and sends a POST request to the server:

$("#buttonAddAddress").click(function () {
    var address = JSON.stringify({
        City: $('#AddressCity').val()
    });

    $.ajax({
        type: 'POST',
        url: '@Url.Action("AddAddress")',
        data: address,
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        ...
    });
});

The controller has a corresponding POST action for this request:

[HttpPost]
public ActionResult AddAddress(Address address)
{
    // Create address in database
    return Json(true);
}

Address is a helper type:

public class Address
{
    public string City { get; set; }
    // ...
}

This code doesn’t validate that AddressCity is required and must not be longer than 50 characters.

Question: How can I add validation to this Ajax POST request – client side and server side validation as well? I have no clue how to do it on client side. On server side I’d like to avoid the obvious trivial solution to repeat the meaning of the validation attributes (like if (!string.IsNullOrEmpty(address.City) && address.City.Length <= 50) ..., etc.) and leverage the existing validation attributes if that is possible at all.

Answer 1

For the server:

public class Address
{
    [Required]
    [StringLength(50)]
    public string City { get; set; }
}

and for the client, since you are using the AddressCity field, it will already have the same validation rule as the one applied from the main view model.

But since I guess that you will tell me that this is not DRY, well, OOP to the rescue:

public class AddressViewModel
{
    [Required]
    [StringLength(50)]
    public string City { get; set; }
}

and your main view model:

public class OrderCreateViewModel: AddressViewModel
{
    [Required]
    [StringLength(100)]
    public string Remark { get; set; }
}

and your respective controller actions:

[HttpPost]
public ActionResult Create(OrderCreateViewModel viewModel)
{
    ...
}

[HttpPost]
public ActionResult AddAddress(AddressViewModel address)
{
    ...
}