Sending complex JSON objects to Asp.net MVC using jQuery

Question

I'm defining an object like:

data = {
    first: { Id: 1, Name: "This is my first name." },
    second: { Id: 2, Name: "The second one." }
};

Then I'm trying to issue an Ajax request using:

$.ajax({
    url: "/SomeURL"
    type: "POST",
    data: data,
    success: function(){ ... },
    error: function(){ ... }
});

But my data gets converted into an array like structure that Asp.net MVC default model binder isn't able to grasp.

first[Id]=1&first[Name]=...

What should I set or do, so jQuery will correctly convert these into:

first.Id=1&first.Name=...

Richard Poole · Accepted Answer · 2010-12-07 15:48:36Z

5

Have you tried flattening your data?

data = {
    "first.Id": 1,
    "first.Name": "This is my first name.",
    "second.Id": 2,
    "second.Name": "The second one."
};

Here's a little jQuery extension to flatten your data:

jQuery.flatten = function(data) {
    var flattenFunc = function(flattenedData, flattenFunc, name, value) {
        if (typeof(value) == 'object') {
            for (var item in value) {
                flattenFunc(flattenedData, flattenFunc, name ? name + '.' + item : item, value[item]);
            }
        }
        else {
            flattenedData[name] = value;
        }
    };

    var flattenedData = new Array();
    flattenFunc(flattenedData, flattenFunc, null, data);
    return flattenedData;
};

Simply replace data with $.flatten(data) in your Ajax request.

edited Dec 7, 2010 at 15:48

answered Dec 7, 2010 at 14:59

Richard Poole

3,98426 silver badges29 bronze badges

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

1 Comment

Robert Koritnik Over a year ago

This is close to my end result. I've created a simple jQuery plugin that does the transformation in such a way that Asp.net MVC default model binder understands it. erraticdev.blogspot.com/2010/12/…

user229044 · Accepted Answer · 2010-12-07 15:18:07Z

2

How about trying JSON ?

edited Dec 7, 2010 at 15:18

user229044♦

241k41 gold badges346 silver badges350 bronze badges

answered Dec 7, 2010 at 15:07

grongor

1,3751 gold badge13 silver badges26 bronze badges

1 Comment

Robert Koritnik Over a year ago

Blog post you've linked isn't really a solution for my problem. It's just about JSON de/serialization in C#. Asp.NET MVC wouldn't be able to data bind incoming JSON unless a custom data binder is added. but that would mean I'd have to change code on the client as well as on the server. Thanks for the links though.

Diego · Accepted Answer · 2010-12-09 13:05:34Z

2

You can create a function to make your N levels json to a 1 level json like this:

$.simplifyJson = function(startingJson) {
  var fn = function(startingJson, parentKey) {
    var result = {};
    for(key in startingJson) {
      var newKey = parentKey;
      if(newKey != "")
        newKey += ".";
      newKey += key;
      if(typeof(startingJson[key]) == "object") {
        var result2 = fn(startingJson[key], newKey);
        for(key2 in result2) {
          result[key2] = result2[key2];
        }
      }
      else {
        result[newKey] = startingJson[key];
      }
    }
    return result;
  };

  return fn(startingJson, "");
}

So when you do this:

var startingJson = {
  a: "hola",
  b: {
    c: "chau",
    d: "chau2"
  }
};

var endingJson = $.simplifyJson(startingJson);

In endingJson you will get this

{
  a: "hola",
  b.c: "chau",
  b.d: "chau2"
}

Here is an example: http://jsfiddle.net/bY9nD/2/

answered Dec 9, 2010 at 13:05

Diego

16.7k26 gold badges88 silver badges137 bronze badges

1 Comment

Robert Koritnik Over a year ago

+1: I awarded your answer but accepted the other one because it's simpler and more versatile (doesn't need to start from an object).

JeeShen Lee · Accepted Answer · 2013-07-16 08:03:13Z

Javascript

       var access = {
            Id: 0,
            HotelId: dropdownlistAccess.value(),
            RoleId: dropdownlistRole.value(),
            User: {
                Email: email
            }
        };

        $.ajax({
            url: "Access/Add",
            cache: false,
            type: "POST",
            contentType: 'application/json',
            data: JSON.stringify(access),
            success: function () {
                refreshDataSource();
            }
        });

Working for Controller Action

    public ActionResult Add(AccessViewModel newAccessViewModel)
    {
      // Your code here...
    }

The AccessViewModel & UserViewModel field

public partial class AccessViewModel
{
    [Required(ErrorMessage="Id is required")]
    public int Id { get; set; }

    [Required(ErrorMessage="UserId is required")]
    public int UserId { get; set; }

    [Required(ErrorMessage="HotelId is required")]
    public int HotelId { get; set; }

    [Required(ErrorMessage="RoleId is required")]
    public int RoleId { get; set; }

    public UserViewModel User { get; set; } 
}

public partial class UserViewModel
{
    [Required(ErrorMessage="Id is required")]
    public int Id { get; set; }

    [Required(ErrorMessage="Email is required")]
    [StringLength(50)]
    [DataType(DataType.EmailAddress)]
    public string Email { get; set; }    
}

Collectives™ on Stack Overflow

Sending complex JSON objects to Asp.net MVC using jQuery

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related