将 DOM 数组发布到 ASP.NET MVC5 中的控制器答案

【问题标题】：Post DOM array to controller in ASP.NET MVC5将 DOM 数组发布到 ASP.NET MVC5 中的控制器
【发布时间】：2015-09-23 17:01:10
【问题描述】：

我在获取 HTML DOM 数组并使用 ajax 调用将其传递给控制器时遇到问题。

这就是帖子的发生方式（点击按钮）：

function onSaveMapClicked() {
    $.ajax({
        traditional: true,
        type: "POST",
        url: "/WaferMapper/SaveMap",
        contentType: "application/json",
        data: JSON.stringify(map.children),
        success: function (data) { },
        error: function (response) { alert(response); },
    });
}

这是应该处理这篇文章的控制器代码：

[HttpPost]
public ActionResult SaveMap(string mapData)
{
    return View();
}

所以这里还没有真正发生任何事情；我放了一个断点，看看能不能打，不能打。

这是一个如何填充数组的示例：

for (var col = 1; col <= cols + 1; col++) {
    for (var row = 1; row <= rows + 1; row++) {
        var isPrintElement = row != 1 && col != 1;
        var elementColor = isPrintElement ? '#ffffff' : '#000000';
        this.children.push({
            color: elementColor,
            color_cache: elementColor,
            content: row == 1 ? col - 1 : col == 1 ? row - 1 : "",
            isPrint: isPrintElement,
            mask: "n/a",
            modifier1: new Modifier(""),
            modifier2: new Modifier(""),
            modifier3: new Modifier(""),
            modifier4: new Modifier(""),
            modifier5: new Modifier(""),
            modifier6: new Modifier(""),
            hasModifier: function () {
                return (this.modifier1.value != "" ||
                    this.modifier2.value != "" ||
                    this.modifier3.value != "" ||
                    this.modifier4.value != "" ||
                    this.modifier5.value != "" ||
                    this.modifier6.value != "");
            },
            width: width,
            height: height,
            top: row * (height + this.PRINT_MARGIN),
            left: col * (width + this.PRINT_MARGIN)
        });
    }
}

我知道其他人也遇到过这个问题，但是在这里查看其他相关帖子我仍然无法让它正常工作。

当我点击“保存地图”按钮时，我不断收到这些错误：

POST http://localhost:xxxxx/WaferMapper/SaveMap 500 (Internal Server Error)

【问题讨论】：

您是否尝试调试控制器并获取有关导致 500 错误的原因的更多信息？
我尝试在“SaveMap”方法内的唯一代码行中放置一个断点，但断点从未命中。有什么建议吗？
将 data: JSON.stringify(map.children), 更改为 data: {mapData:JSON.stringify(map.children)},
@RobertMcKee 我试过了，但仍然出现相同的内部服务器错误。
如果您发送 json，为什么是 traditional:true？您是否检查了实际请求以查看发送的内容是否是预期的？这里真的没有太多的故障排除信息可供使用

标签： javascript jquery asp.net ajax asp.net-mvc

【解决方案1】：

感谢罗伯特·麦基的帮助，

诀窍是在地图对象上实现一个 toJSON() 方法。

这是我的基本实现（还有很多工作要做；我只是将地图对象的前两个属性打包成一个 JSON 对象，最后所有属性都必须是 JSON 结构的一部分）：

var WaferMap = function (canvas) {
    ....
    ....
}
WaferMap.prototype = {
    ....
    ....
    toJSON: function () {
        var json = "[";
        for (var i = 0; i < this.children.length; i++) {
            var element = this.children[i];
            json += "{" +
                "\"color:\"" + element.color + "\"," +
                "\"color_cache:\"" + element.color_cache + "\"},";
        }
        return json.substring(0, json.length - 1) + "];"
    }
}

现在这个 JSON 字符串正确地回传到控制器。

这是更新后的 AJAX 调用：

function onSaveMapClicked() {
    $.ajax({
        type: "POST",
        url: "/WaferMapper/SaveMap",
        contentType: "application/json",
        data: {mapData:JSON.stringify(map)},
        success: function (data) { },
        error: function (response) {
            alert(response);
        }
    });
 }

【讨论】：

【解决方案2】：

我不是专家，但我认为这是因为没有发生模型绑定，并且您的控制器需要一个字符串，而不是一个 json 对象。

将您的对象绑定到模型，并将其传递回您的控制器。

另外，我认为如果你删除：

contentType: "application/json; charset=utf-8",

它现在将作为一个字符串发布，并且应该点击你的控制器。

【讨论】：