将数组作为 JSON 发布到 MVC 控制器

Question

我一直在努力寻找解决这个问题的方法。

在我的代码中，我正在构建一个对象数组；

var $marks = [];

var mark = function ( x, y, counter ){
    this.x = x;
    this.y = y;
    this.counter = counter;
}

$marks.push(new mark(1, 2, 0));   
$marks.push(new mark(1, 2, 1));
$marks.push(new mark(1, 2, 2));

现在我想将此数据发布到 MVC 控制器，因此我认为控制器中的数据类型将是 List<Mark> Marks 或 Marks 数组。

要发布数据，我试过了；

var json = JSON.stringify($marks);
$.post('url', json).done(function(data){ /* handle */ });

或

var json = { Marks: $marks };
$.post('url', json).done(function(data){ /* handle */ });

第二种方式，在查看发布的数据时，看起来像这样

Marks[0][x]: 1
Marks[0][y]: 2
Marks[0][counter]: 0
Marks[0][x]: 1
Marks[0][y]: 2
Marks[0][counter]: 1
Marks[0][x]: 1
Marks[0][y]: 2
Marks[0][counter]: 2

但我不知道如何将其转换为控制器中的强类型对象？

我的控制器看起来像这样；

[HttpPost]
public ActionResult JsonSaveMarks(List<Mark> Marks){
    // handle here
}

我的 Mark 类看起来像这样；

public class Mark{
     public string x { get; set; }
     public string y { get; set; }
     public string counter { get; set; }
}

我已经阅读了有关创建自定义 JsonFilterAttribute 或使用 System.Web.Script.Serialization.JavaScriptSerializer 类的其他类似问题，但我无法解决任何问题

我在这里有什么明显的遗漏吗？我把控制器中的 DataType 弄错了吗？如何将发布的这些数据转换为强类型对象？

非常感谢

Answer 1

$.post() 不允许您设置 AJAX 调用的内容类型 - 您可能会发现（如果您使用 Fiddler）您的 Json 字符串正在发送的内容类型为“application/x-www- form-urlencoded”（默认设置），这会导致 Asp.Net MVC 错误地解释您的数据包。

您可以尝试改用$.ajax()，并将内容类型设置为“application/json”吗？

http://api.jquery.com/jQuery.ajax/

Answer 2

@SteveHobbs 在这里有正确的答案。另一方面，您应该像您一样JSON.stringify JavaScript 有效负载。如果以另一种方式执行此操作，则会在反序列化传入的数据时收到一个异常，告诉您“无效的 JSON 原语”。

这是您的示例的完整解决方案：

$.ajax({

    url: '/home/index',
    type: 'POST',
    data: JSON.stringify($marks),
    dataType: 'json',
    contentType: 'application/json',
    success: function (data, textStatus, jqXHR) {
        console.log(data);
    }
});

Answer 3

这段代码解决了我的问题：

C# 类：

public class MediaAccountContent
{
    public Guid IdMedia { get; set; }
    public string Value { get; set; }

}

public class User
{
    public string Firstname { get; set; }
    public string Lastname { get; set; }
    public List<MediaAccountContent> MediaAccountContents { get; set; }
}

MVC 动作：

public ActionResult SavePlace(User user)
{

    return Content("OK");
}

Javascript：

    var mediaAccountsJson = [];

    for (var i = 0; i < 10; i++)
    {
        mediaAccountsJson.push({
            IdMedia: i,
            Value: "AAA" + i
        });

    }

    var datatItem =
    {
        Firstname: "Test Firstname",
        Lastname: "Test Lastname",
        MediaAccountContents: mediaAccountsJson
    };

    $.ajax({
        type: "POST",
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify(datatItem),
        url: urlAction,
        success: function (status) {



        }
    });

根据场景进行所需的更改并尽情享受！ :)