使用 $.ajax 或 $.post 调用 MVC 5 Controller 方法答案

【问题标题】：Using $.ajax or $.post to call MVC 5 Controller method使用 $.ajax 或 $.post 调用 MVC 5 Controller 方法
【发布时间】：2014-11-17 15:46:20
【问题描述】：

我正在尝试使用 JavaScript 设置从 MVC 页面到控制器的非常简单的调用。这是我的控制器：

Imports System.Web.Mvc

Namespace Controllers
    Public Class DataController
        Inherits Controller

        Function Index() As ActionResult
            Return View()
        End Function

        <HttpPost>
        Function SaveData(payload As String) As String
            If payload IsNot Nothing AndAlso payload.Length > 0 Then
                Return "Good"
            Else
                Return "Bad"
            End If
        End Function

    End Class
End Namespace

这是我的视图（Index.vbhtml）：

@Code
    ViewData("Title") = "Index"
End Code

<h2>Index</h2>

@Code
    Html.BeginForm()
    @:<a href="#" onclick="SaveData();">Save Data</a>
    Html.EndForm()
End Code

这是我的 JavaScript（通过 _layout.vbhtml 文件包含）：

function SaveData() {

    var payload = "TEST_DATA_GOES_HERE";

    // Calls controller correctly but data is null
    $.ajax({
        url: "/Data/SaveData",
        type: "POST",
        processData: false,
        dataType: String,
        data: { payload: payload }
    })
    .done(function () { alert('Application saved.'); })
    .fail(function () { alert('Application failed to save.'); });

    // Returns a 500 error
    $.post("/Data/SaveData", { Payload: payload }, function (data) { alert('Application saved. ' + data); }, "String");

    // Calls controller correctly but data is null
    $.post("/Data/SaveData", payload, function () { alert('Application saved.' + data); }, "String");
}

调试时一切都很好地连接起来，但 payload 变量在 SaveData 函数中以 Nothing 的形式出现。我试过使用$.post，但遇到了类似的问题，而且我发现使用这两种方法的所有参考资料都只是假设它第一次可以正常工作并且没有任何故障排除提示。

如何配置$.ajax 或$.post 函数以正确调用控制器并传递简单字符串？

【问题讨论】：

尝试将{ Payload: payload } 更改为{ payload: payload }。
这很好奇它对 $.ajax 调用没有影响，但第一个 $.post 现在将数据发送到控制器。谢谢。
不应该 dataType 是 "text" 而不是 String？
好像没什么区别……

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

【解决方案1】：

您需要将processData 设置为true，因为您要发送需要转换为查询字符串的对象。

来自 API：

流程数据
默认情况下，作为对象（从技术上讲，除了字符串之外的任何内容）传入 data 选项的数据将被处理并转换为查询字符串，适合默认的内容类型“application/x-www-form-urlencoded” .如果要发送 DOMDocument 或其他未处理的数据，请将此选项设置为 false。

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

【讨论】：

优秀。我将其更改为 true，数据现在到达控制器，但始终调用 .fail 函数。控制器需要返回什么来表示成功？
被命中的失败处理程序表明服务器响应不是200 OK。您应该调试该服务器端。假设您使用的是 Visual Studio，您可以单步执行代码以找到发生错误的确切行。或者，您可以在控制台的网络部分检查响应代码。
所以如果我需要发送一个很长的字符串，包含一堆非 url 编码的字符，我应该将它设置为 false 吗？对？还有什么需要设置的？
一般情况下，您很少需要修改processData。我会省略它以使用默认值（即true）。

【解决方案2】：

感谢 Rory 的回答，这就是我最终得到的结果：

控制器：

<HttpPost>
Function SaveData(payload As String) As Boolean
    If payload IsNot Nothing AndAlso payload.Length > 0 Then
        Return True
    Else
        Return False
    End If
End Function

JavaScript：

function SaveData() {

    var payload = "TEST_DATA_GOES_HERE";

    // Calls controller correctly but data is null
    $.ajax({
        url: "/Data/SaveData/",
        type: "POST",
        data: { payload: payload }
    })
    .done(function () { alert('Application saved.'); })
    .fail(function () { alert('Application failed to save.'); });

}

请注意，$.ajax 调用没有 processData 或 dataType 元素，并且变量的名称与参数的大小写匹配。

但是我发现我的真正的问题实际上是由在此调用中将 XML 作为字符串传递引起的。 XML 不能简单地在查询字符串中传递。如果你这样做，它最有可能以null 的形式到达，因为 MVC 模型绑定器无法处理生成的错误查询字符串。

【讨论】：