如何序列化模型并将其通过Ajax请求传递给MVC控制器

Question

我将尝试将页面的模型传递给我的控制器以进行处理。 在处理信息后，我想更新id为“savedText”的div，以显示“账单信息已成功保存”。 我在我的视图中有这个代码。

function testingFunction() {
    var obj = $('testForm').serialize();

    $.ajax({
        url: '@Url.Action("TestingFunction", "BuildGiftCard")',
        dataType: 'json',
        success: function (result) {
            $("#savedText").html(result);
        },
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify(obj)
    });

    return false;
}

我在我的控制器中有以下内容：

[HttpPost]
public JsonResult TestingFunction(PurchaseModel model)
{
    return Json("Billing information saved successfully.");
}

我做错了什么？

在Chrome中的“检查元素”功能中，网络选项卡中显示我的控制器方法未找到。

此外，对我来说至关重要的是将整个模型从视图传递到控制器函数（在这种情况下是TestingFunction），以便我可以获取表单信息并保存它。我尝试使用.serialize()函数，但结果为obj =（空字符串）。

- chowe991

---

你应该使用 serialize() 或 JSON.stringify() 中的 一个，而不是两个都用。由于看起来你正在使用表单，所以不要更改 contentType，并且不要使用 JSON.stringify()。 - Erik Philips

但是当我在 Chrome 中键入 serialize() 和 debug 时，结果为空字符串。我该如何获取表单信息？我检查过了，我的表单 ID 是正确的。它没有返回任何内容。 - chowe991

您没有正确使用jQuery选择器。请阅读Jason P的答案。 - Erik Philips

除了函数没有被调用之外，一切都正常运作。我从Chrome网络检查中得到了这个信息：POST http://localhost/BuildGiftCard/TestingFunction 404（未找到）。 - chowe991

我实际上是在ajax方法的URL部分拼错了控制器名称。 我已经更改了它，现在我得到了一个不同的错误：Exception Details: System.ArgumentException: Invalid JSON primitive: GiftCardStep2.SelectedInfoPanel。 - chowe991

Answer 1

有三个需要注意的地方:

1. $('testForm') 可能应该是 $('.testForm') 或者 $('#testForm')。因为这样你可以选择一个 <testForm></testForm> 元素。
2. 如果你只是发送表单，它不需要是 json 格式的。
3. 尝试使用 post 请求。

---

$.ajax({
    url: '@Url.Action("TestingFunction", "BuildGiftCard")',
    dataType: 'json',
    success: function (result) {
        $("#savedText").html(result);
    },
    data: $('#testForm').serialize(),
    type: 'POST'
});

- Jason P

---

你的第一条回答解决了表单为空的问题。非常感谢。但是它仍然显示找不到POST方法。 - chowe991

如果您移除了[HttpPost]属性并在浏览器中访问该网址，它会返回404吗？ - Jason P

我实际上在ajax方法的URL部分拼写控制器名称时出错了。我已经更改了它，现在我得到了一个不同的错误：异常详细信息：System.ArgumentException：无效的JSON原始值：GiftCardStep2.SelectedInfoPanel。 - chowe991

你还在设置json的contentType吗？听起来像是jquery正在发送序列化表单，但服务器正在尝试反序列化json。 - Jason P

是的，我正在设置内容类型。不知道为什么它不起作用。它不喜欢我序列化表单的方式。这是您通过序列化表单将模型从jquery传递到控制器的方式吗？ - chowe991