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

You should be using *either* `serialize()` or `JSON.stringify()` but not both. Since it appears you are using a form, do not change the contentType, and do not `JSON.stringify()` it. — Erik Philips, Jul 24 '14 at 21:48
But when I type serialize() and debug in chrome, the result is the empty string. How do I get the form information? I checked, I have the form ID correct. It's not pulling anything back. — chowe991, Jul 24 '14 at 21:51
You aren't using the jQuery selector propertly. Please read [Jason P](http://stackoverflow.com/a/24944624/209259)'s answer. — Erik Philips, Jul 24 '14 at 21:54
Everything is working except the function isn't getting hit. I get this from chrome network inspection: POST http://localhost/BuildGiftCard/TestingFunction 404 (Not Found) — chowe991, Jul 24 '14 at 21:58
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 — chowe991, Jul 24 '14 at 22:04

score 5 · Accepted Answer · answered Jul 24 '14 at 21:51

5

Three things:

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

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

answered Jul 24 '14 at 21:51

Jason P

26,984
3
31
45

Number 1 on your answer fixed the empty form thing. So thank you. However it's still saying the post method is not found. – chowe991 Jul 24 '14 at 21:56
If you remove the `[HttpPost]` attribute and visit that url in a browser, does it return a 404? – Jason P Jul 24 '14 at 21:59
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. – chowe991 Jul 24 '14 at 22:01
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. – Jason P Jul 24 '14 at 22:08
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? – chowe991 Jul 24 '14 at 22:14
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 Jul 24 '14 at 22:15
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. – Jason P Jul 24 '14 at 22:17
Yeah, but I do it that way, and I still get [ArgumentException: Invalid JSON primitive: GiftCardStep2.SelectedInfoPanel.] Invalid JSON primitive – chowe991 Jul 24 '14 at 22:19

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

1 Answers1

Linked