Sending String Data to MVC Controller using jQuery $.ajax() and $.post()

Question

Hi all,

There's got to be something I'm missing. I've tried using $.ajax() and $.post() to send a string to my ASP.NET MVC Controller, and while the Controller is being reached, the string is null when it gets there. So here is the post method I tried:

$.post("/Journal/SaveEntry", JSONstring);

And here is the ajax method I tried:

$.ajax({
 url: "/Journal/SaveEntry",
 type: "POST",
 data: JSONstring
});

Here is my Controller:

public void SaveEntry(string data)
{
 string somethingElse = data;
}

For background, I serialized a JSON object using JSON.stringify(), and this has been successful. I'm trying to send it to my Controller to Deserialize() it. But as I said, the string is arriving as null each time. Any ideas?

Thanks very much.

UPDATE: It was answered that my problem was that I was not using a key/value pair as a parameter to $.post(). So I tried this, but the string still arrived at the Controller as null:

$.post("/Journal/SaveEntry", { "jsonData": JSONstring });

Answer 1

Final Answer:

It seems that the variable names were not lining up in his post as i suggested in a comment after sorting out the data formatting issues (assuming that was also an issue.

Actually, make sure youre using the right key name that your serverside code is looking for as well as per Olek's example - ie. if youre code is looking for the variable data then you need to use data as your key. – prodigitalson 6 hours ago

@prodigitalson, that worked. The variable names weren't lining up. Will you post a second answer so I can accept it? Thanks. – Mega Matt 6 hours ago

So he needed to use a key/value pair, and make sure he was grabbing the right variable from the request on the server side.

---

the data argument has to be key value pair

$.post("/Journal/SaveEntry", {"JSONString": JSONstring});

Answer 2

Hey,

It seems dataType is missed. You may also set contentType just in case. Would you try this version?

$.ajax({
    url: '/Journal/SaveEntry',
    type: 'POST',
    data: JSONstring,
    dataType: 'json',
    contentType: 'application/json; charset=utf-8'
});

Cheers.

Answer 3

Answered. I did not have the variable names set correctly after my first Update. I changed the variable name in the Controller to jsonData, so my new Controller header looks like:

public void SaveEntry(string jsonData)

and my post action in JS looks like:

$.post("/Journal/SaveEntry", { jsonData: JSONstring });

JSONstring is a "stringified" (or "serialized") JSON object that I serialized by using the JSON plugin offered at json.org. So:

JSONstring = JSON.stringify(journalEntry);  // journalEntry is my JSON object

So the variable names in the $.post, and in the Controller method need to be the same name, or nothing will work. Good to know. Thanks for the answers.

Answer 4

How can I add callback function to this post request?

$.postJSON = function(url, data, successcallback, errorcallback) {
    return $.post(url, { id: data });
};

I'm using above way, and post is fine, but i don't know how to add callback.

Edit:

I've added the success callback.

$.postJSON = function(url, data, successcallback, errorcallback) {
    return $.post(url, { id: data }, successcallback);
};

Is there any error callback?