Question

我在使用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)

Answer 1

感谢Robert McKee的帮助，

诀窍是在地图对象上实现toJSON（）方法。

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

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

Answer 2

我不是专家，但我认为是因为没有模型绑定发生，你的控制器期待一个字符串，而不是一个json对象。

将对象绑定到模型，然后将其传递回控制器。

另外，我想如果你删除：

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

它现在将作为字符串发布，并且应该击中您的控制器。

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

2 个答案: