使用jQuery将复杂的JSON对象发送到Asp.net MVC

Question

我将定义一个对象，如下所示：

：

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

那么我正在尝试使用以下方式发出Ajax请求：

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

但是我的数据被转换为类似数组的结构，这使得Asp.net MVC默认模型绑定程序无法理解。

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

我应该设置什么或执行哪些操作，以便jQuery能正确地将这些内容转换为：

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

- Robert Koritnik

Answer 1

今日免费次数已满, 请开通会员/明日再来

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

这是一个jQuery扩展，可以使您的数据扁平化：

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;
};

只需在您的Ajax请求中使用$.flatten(data)替换data即可。

- Richard Poole

---

这已经接近我的最终结果了。我创建了一个简单的jQuery插件，以一种Asp.net MVC默认模型绑定器可以理解的方式进行转换。http://erraticdev.blogspot.com/2010/12/sending-complex-json-objects-to-aspnet.html - Robert Koritnik

Answer 2

你可以创建一个函数，将你的 N 级 JSON 转换为一级 JSON，像这样：

$.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, "");
}

所以当你这样做：

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

var endingJson = $.simplifyJson(startingJson);

在 endingJson 中，您将获得以下内容。

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

这是一个例子：http://jsfiddle.net/bY9nD/2/

- Diego

---

+1：我给了你的答案奖励，但接受了另一个答案，因为它更简单、更通用（不需要从对象开始）。 - Robert Koritnik

Answer 3

如何尝试使用JSON？

• 这里介绍了ASP.NET中JSON的序列化和反序列化。
• 您可以参考JSON-js来实践JSON。
• 更多关于JSON的信息，请访问JSON官网。

- grongor

---

你所提供的博客文章并不能解决我的问题，它只是关于C#中JSON的序列化和反序列化。除非添加自定义数据绑定器，否则Asp.NET MVC无法将传入的JSON数据绑定到模型上。但这意味着我需要在客户端和服务器端都进行代码更改。不过还是感谢你提供的链接。 - Robert Koritnik

Answer 4

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

针对控制器操作的工作

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

AccessViewModel和UserViewModel字段

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; }    
}   

- JeeShen Lee