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

Question

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

Namespa         


        

Answer 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/

Answer 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.