JSON object post using form serialize not mapping to c# object

Question

I'm using ajax post with JSON object as data in a strongly typed view. Form Serialization works fine but in controller while obtaining the model, the properties are not being mapped. In Firebug I'm obtaining following snap

How can i map the serialized JSON object to c# object

Answer 1

You will have to copy the jquery extension to convert a form to json object

(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;
    };
})(jQuery)

and include json2.js library to add JSON.stringify() support for legacy browsers       

Then change you ajax to

$.ajax({
    url : '',
     type: 'POST',
    contentType : 'application/json',
    data : JSON.stringify($('form').serializeObject()),
     ....
})

In your case

$('#frm').submit(function() {

    postJSON('@Url.Action("Create", "District")', JSON.stringify($('form').serializeObject()),
            function(result) {
                alert(result.Message);
                if (result.Success) {
                    window.location = '@Url.Action("Index", "District")';
                }
            });
    return false;
});

Answer 2

That is just a standard serialized form. It is not JSON.

You may want to look at this.

Answer 3

If you want to include also checkboxes and radio buttons, @Arun_P_Johny answer can be used, just serializeArray should also be overwritten with this:

$.fn.serializeArray = function (options) {
var o = $.extend({
    checkboxesAsBools: false
}, options || {});

var rselectTextarea = /select|textarea/i;
var rinput = /text|hidden|password|search/i;

return this.map(function () {
    return this.elements ? $.makeArray(this.elements) : this;
})
.filter(function () {
    return this.name && !this.disabled &&
        (this.checked
        || (o.checkboxesAsBools && this.type === 'checkbox')
        || rselectTextarea.test(this.nodeName)
        || rinput.test(this.type));
})
    .map(function (i, elem) {
        var val = $(this).val();
        return val == null ?
        null :
        $.isArray(val) ?
        $.map(val, function (val, i) {
            return { name: elem.name, value: val };
        }) :
        {
            name: elem.name,
            value: (o.checkboxesAsBools && this.type === 'checkbox') ? (this.checked ? 'true' : 'false') : val
        };
    }).get();
};

serializeObject should be modified

$.fn.serializeObject = function () {
     var o = {};
     var a = this.serializeArray({ checkboxesAsBools: true });
     $.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;
};