Using $.ajax or $.post to call MVC 5 Controller me

问题:

I'm trying to set up what should be a very simple call from an MVC page to a controller using JavaScript. This is my Controller:

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

this is my View (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

and this is my JavaScript (included via the _layout.vbhtml file):

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

Everything connects up nicely when debugging but the payload variable arrives as Nothing in the SaveData function. I've tried using $.post but with similar problems and all the references I've found to using either method simply assume that it will work first time without error and don't have any troubleshooting tips.

How do you configure the $.ajax or $.post functions to correctly call a controller and pass a simple string?

回答1:

You need to set processData to true as you are sending an object which will need to be converted to a querystring.

From the API:

ProcessData
By default, data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded". If you want to send a DOMDocument, or other non-processed data, set this option to false.

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

回答2:

Thanks to the answer form Rory this is what I ended up with:

Controller:

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

}

Note that the $.ajax call doesn't have the processData or dataType elements and that the name of the variable matches the case of the parameter.

However what I found out is that my real problem was actually caused by passing XML as a string in this call. The XML cannot be simply passed as is in the query string. If you do that it arrives as null most likely because the MVC model binder can't process the resulting bad querystring.