MVC Model Binding with an Ajax Form Submit

MVC Model Binding with an Ajax Form Submit

You may come across a time where you would like to submit a form using Ajax, and still want to preserve the useful model binding of MVC. Normally when you submit a form using a standard submit (non async), the MVC framework will automatically take care of pulling your values out of your form and populating a model on your controller. This is one of the most useful, time-saving features of MVC.

But when you want to submit a form using Ajax, you are forced to provide these values to the controller yourself, usually through the use of JSON to Model binding. But how do you easily take your existing form and transform it into valid JSON? This is what we’ll be talking about in this post, so read on.

Let’s say you have a basic controller that takes a model as its only parameter (pretty standard):


[HttpPost]
public void MyController(MyViewModel model)
{
    _someService.DoSomething(model);
    return View(model);
}

Now some jQuery to submit this form asynchronously using Ajax:


function SubmitForm() {

 var $form = $("#myFormID");
 var jsonData = $form.serializeObjectIntoJson();
 var jsonString = JSON.stringify(jsonData);

 $.ajax({
 type: 'POST',
 url: '/MyController',
 data: jsonString,
 contentType: 'application/json; charset=utf-8',
 success: function () {
 window.location.reload(true); //whatever you need to do after a successful ajax response
 }
 });
}

//very useful extension taken from
//http://stackoverflow.com/questions/1184624/convert-form-data-to-js-object-with-jquery
//All credit goes to Tobias Cohen

$.fn.serializeObjectIntoJson = function () {
 var o = {};
 var a = this.serializeArray();
 $.each(a, function () {
 if (o[this.name] !== undefined) {
 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;
};

A few things I want to point out here. First, is that we’re using jQuery’s serializeArray function to serialize our form into an array of JavaScript objects, essentially key/value pairs. You can read more about serializeArray here, but essentially it’s description is: “Encode a set of form elements as an array of name and values.”.

Once we call serializeArray on our form, we’ll end up with a data structure like this:


[
 {
 name: "a",
 value: "1"
 },
 {
 name: "b",
 value: "2"
 },
 {
 name: "c",
 value: "3"
 },
 {
 name: "d",
 value: "4"
 },
 {
 name: "e",
 value: "5"
 }
]

As you can tell, that’s not JSON. So how do we convert this to JSON? Well thanks to¬†Tobias Cohen from this Stack Overflow Question, we have a simple JavaScript extension that will do this for us. You can see it above, but it’s basically like so:


$.fn.serializeObjectIntoJson = function () {
 var o = {};
 var a = this.serializeArray();
 $.each(a, function () {
 if (o[this.name] !== undefined) {
 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;
};

<pre>

So with any luck, if you convert your form into JSON using the serializeArray and serializeObjectIntoJson extension provided above, and THEN send it to your controller action, MVC model binding will take over and do the rest for you, and you’ll have a nicely correctly bound model.

As a side note. MVC model binding relies heavily on naming convention. If you run into any problems where custom binding needs to be done. (For example in the case of changing names on inputs so that they no longer match model property names). You can simple set those properties on the JSON data yourself before sending back to the controller, like below:


function SubmitForm() {

 var $form = $("#myFormID");
 var jsonData = $form.serializeObjectIntoJson();

//set anything that was not properly serialized here
 jsonData.SomeCustomProperty = $('crazyNamedInput').val();
 jsonData.SomeOtherCustomProperty = $('anotherCrazyNamedInput').val();</pre>
<pre> var jsonString = JSON.stringify(jsonData);

 $.ajax({
 type: 'POST',
 url: '/MyController',
 data: jsonString,
 contentType: 'application/json; charset=utf-8',
 success: function () {
 window.location.reload(true); //whatever you need to do after a successful ajax response
 }
 });
}

I hope this solution will help you out the next time you find yourself needing to convert a form into JSON for an ajax request.

By | 2014-04-24T16:19:52+00:00 April 24th, 2014|Categories: C#, MVC|Tags: , , , , |0 Comments

About the Author:

Leave A Comment