ASP.NET MVC Validation with jQuery $.ajax

Question

I have a situation where I am sending data to a Controller via jQuery $.ajax, the data is a serialized json string. (MVC 3.0)

It binds it fine - my controller receives the results and they are correct. Now then, I am having a problem with it posting back validation. I suspect it is because not all of my objects are bound to form controls natively.

The problem is that I have to 'add' data to my Model using javascript, because the model requires an item from a collection. Using javascript, jquery, and templating, I have this item selected, and I add it to the model before it sends it off to the Controller. However on the postback, this data isn't present (which is expected, since it would have to deserialize it into the javascript array - that isn't my problem).

My problem is that it performs a double-postback for validation, or none at all. If I use e.preventDefault(); to stop the normal form posting, I never get validation. But if I do not use that, then I always get a double post, which ends up in my view never redirecting.

My jQuery code is as follows..

   $('form').submit(function(e){

    var data = $('form').serializeObject();
    data.Quality = // this line adds some data from a JSON object.

    var json = JSON.stringify(data);

    $.ajax({
      url: location.href,
      type: 'POST',
      dataType: 'json',
      data: json,
      contentType: 'application/json',
      success: function (data) {
       $("#jsonOutput").html(json);
      }
    });

    e.preventDefault();
   });

Here is the serializeObject function.

$.fn.serializeObject = function () {
 var o = {};
 var a = this.serializeArray();
 $.each(a, function () {
  if (o[this.name]) {
   if (!o[this.name].push) {
    o[this.name] = [o[this.name]];
   }
   o[this.name].push(this.value || '');
  } else {
   o[this.name] = this.value || '';
  }
 });
 return o;
};

Here is my Controller Action.

  [HttpPost]
  public ActionResult Blueprint(Blueprint blueprint)
  {
   if (ModelState.IsValid)
   {
    using (var context = new Mapping.DataContext())
    {
     context.Blueprints.Add(blueprint);
     context.SaveChanges();

     return Json(Redirect("/List/Blueprints")); 
    }
   }

   return View(blueprint);
  }

I will post more code if requested, however I think this is all that is relevant. I am using the library knockoutjs for the templating, if that is at all relevant. Please tell me what else you need to see if applicable.

Answer 1

 $("#jsonOutput").html(json);

As far as the double post goes, this is happening because the request is being submitted by your event handler and the actual form submit. To get rid of this issue, you want something like this:

$('form').submit(function(e){

    var data = $('form').serializeObject();
    data.Quality = // this line adds some data from a JSON object.

    var json = JSON.stringify(data);

    $.ajax({
      url: location.href,
      type: 'POST',
      dataType: 'json',
      data: json,
      contentType: 'application/json',
      success: function (data) {
       $("#jsonOutput").html(json);
      }
    });

    return false;
   });

return false, will tell the prevent the event from being processed by the form as you are telling the system that you handled it already.

The other issue I see with what you are doing, you are requesting json by setting dataType:'json' This means that your request is expecting a json object, and in the case of failed validation, you are returning a full view. This is probably not what you want to be doing.

Also Note:

$("#jsonOutput").html(json);

Which is being called on successful response is loading the value of the json you are sending with your request and not the data from the response.