MVC3 and jQuery Form Submit

MVC3’s model binding support is fantastic! The software our team develops is search/results based so staying on a single page to display a grid is important. There are many jQuery based element serializers, but I wrote my own because I wanted something extremely basic and simple and hey, why not since it is so easy! Before we look at the serializer, let’s look at how we use jQuery to submit our form so the Post does not render a new page.

jQuery Form Post (link to code example)

Now that we bound our function to the form submit event, we can serialize our form. The serializer function is very basic but works great. It uses the jquery data() to include stored data to bind to the model. This can be really handy for non-form elements and custom client-side functionality. Basically any information you want to head back to the server, just add like so:

$("#myForm").data("ToPost", { SelectedGridIds: [1, 14, 922] });

The serializer function will automatically add the “ToPost” data objects to the JSON object to be returned to the server.

jQuery Form Serializer (link to code example)

Now my Post function has stopped default event propagation, and serialized the data I need, now we just need to post it. You can use your favorite ajax post method, but I prefer to use the wrapper function I created. It uses jQuery do make the actual post (which I also prefer).

Implementation:

First, we need a quick little jQuery plugin to manage all our “Form” operations:
//Creates a jQuery accessor for NRPC.Form object.
//Example: $('form').Form('Post', {options});
// Decorate each class with the jQuery self-executing function to prevent IE from blowing up in debug mode.
(function ($) { 

$.fn.Form = function (method) {
if (MyNamespace.Form[method]) {
return MyNamespace.Form[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return MyNamespace.Form.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on MyNamespace.Form');
}
};

})(jQuery);

Sweet, now when the page loads, all we have to do is register the form post with $(“form”).Form(‘Post’);.

Here is a real-world implementation:

$("form#Search").Form('Post', {
targetId: 'divGrid',
onAjaxSuccess: function (resultGridHtml) {
var gridResult = $(resultGridHtml)[0];
$("#divGrid").html(gridResult);
}
});