Passing complex objects to Action in asp.net MVC from jquery ajax

Question

I have the following domain model defined:

    public class myModel {
       public string Prop1 {get;set;}
       public string Prop2 {get;set;}
       public List<myClass> ListofStuff {get;set;}        
    }


    public myClass {
       public string Id{get;set;}
       public string Name{get;set;}
    }

Then I have the controller action defined as follows:

 [HttpPost]
    public ActionResult Save(MyModel someModel )
    {
      //do the saving
    }

I call the above action from my JS code using jquery ajax

var someModel = {  Prop1: "somevalue1",
                   Prop2: "someothervalue",
                   ListofStuff: [{Id: "11", Name:"Johnny"}, {Id:"22", Name:"Jamie"}]

           };    

 $.ajax({
        contentType: 'application/json, charset=utf-8',
        type: "POST",
        url: "/myController/Save",
        data: JSON.stringify({someModel: someModel}),
        cache: false,
        dataType: "json",

        success: function () {

            alert('success!');
        },

        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert('error');            
        }

    });

EDITED: When I run the above code I get error handler gets executed. I tried to installed Firebug but my FF is version 8 and it couldn't install it. So I am not sure what the error is or how to see what it is for that matter.

What am I doing wrong?

You'll need to tell us what the value of JSON.stringify(someModel) is! — Martin Booth
– Martin Booth, Commented Nov 18, 2011 at 0:14
You still call server-side code so you should be able to set a breakpoint in the Save method to see if the model binding is correct, right? — Tim Hobbs
– Tim Hobbs, Commented Nov 18, 2011 at 0:32
When removed the listOfStuff altogether, everything works like a charm. — sarsnake
– sarsnake, Commented Nov 18, 2011 at 0:34

halfer · Accepted Answer · 2021-10-12 18:27:34Z

3

I resolved the issue. MyClass needed to have a parameter-less constructor in order for the binding to work properly.

edited Oct 12, 2021 at 18:27

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Nov 18, 2011 at 0:53

sarsnake

28k62 gold badges185 silver badges295 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user2319671 · Accepted Answer · 2014-05-01 06:51:12Z

You can use following method for this purpose.

$.postifyData = function (value) {
var result = {};

var buildResult = function (object, prefix) {
    for (var key in object) {

        var postKey = isFinite(key)
            ? (prefix != "" ? prefix : "") + "[" + key + "]"
            : (prefix != "" ? prefix + "." : "") + key;

        switch (typeof (object[key])) {
            case "number": case "string": case "boolean":
                result[postKey] = object[key];
                break;

            case "object":
                if (object[key] != null) {
                    if (object[key].toUTCString) result[postKey] = object[key].toUTCString().replace("UTC", "GMT");
                    else buildResult(object[key], postKey != "" ? postKey : key);
                }
        }
    }
};

buildResult(value, "");
return result;
}

And after that you can pass model like.

var someModel = new Object();
        someModel.Prop1 = "Pp1";
        someModel.Prop2 = "PP2";
        someModel.ListofStuff = new Array();
        //Use for each loop to bind list  like
        for (var i = 0; i < 2; i++) {
            var childObj = new Object();
            childObj.Id = "123" + i;
            childObj.Name = "Pankaj"
            someModel.ListofStuff.push(childObj);
        }
        $.ajax({
            type: "POST",
            url: "/home/test",
            data: $.postifyData(someModel),
            cache: false,
            dataType: "json",

            success: function () {

                alert('success!');
            },

            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert('error');
            }

        });

i have checked it on my own and this is working fine.

Collectives™ on Stack Overflow

Passing complex objects to Action in asp.net MVC from jquery ajax

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related