How to serialize model, pass it to MVC controller in ajax request

Question

I'm trying to pass my page's model to my controller for processing. After processing the information, I want to update the div of id "savedText" to display "Billing Information saved successfully."

I have this in my view

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

and I have this in my controller:

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

what am I doing wrong?

When "inspecting element" in chrome, in the network tab, it's saying that my controller method isn't found.

Also, it's important for me to get the entire model from the view into the controller's function (TestingFunction in this case) so that I can get the form information and save it. I'm trying the .serialize() function but that results in obj = (empty string).

Solution

Three things:

1. $('testForm') should probably be $('.testForm') or $('#testForm'). As it is you're trying to select a <testForm></testForm>.
2. If you're just sending the form, it doesn't need to be json.
3. Try doing a post request:

---

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

Comments

[chowe991]

Number 1 on your answer fixed the empty form thing. So thank you. However it's still saying the post method is not found.

[Jason P]

If you remove the [HttpPost] attribute and visit that url in a browser, does it return a 404?

[chowe991]

I actually was misspelling the controller name in the URL part of the ajax method. I changed it, now I'm getting a different error: Exception Details: System.ArgumentException: Invalid JSON primitive: GiftCardStep2.SelectedInfoPanel.

[Jason P]

Are you still setting a contentType of json? It sounds like jquery is sending the serialized form, but the server is trying to deserialize json.

[chowe991]

Yep, I'm setting the content type. No idea why it's not working. It's not liking the way I'm serializing the form. Is that how you pass the model from jquery to the controller, by serializing the form?

[Jason P]

You shouldn't be setting the content type. When you use .serialize() like that, it create a string that looks like foo1=bar1&foo2=bar2, and when you set the contentType to json, that tells MVC that it should try parsing the data as though it were in the format {"foo1":"bar1","foo2":"bar2}.

[Jason P]

When you use serialize() and don't set a contentType, it looks exactly the same to the server as a normal, non-ajax form post.

[chowe991]

Yeah, but I do it that way, and I still get [ArgumentException: Invalid JSON primitive: GiftCardStep2.SelectedInfoPanel.] Invalid JSON primitive