Post JSON to ASP.NET MVC 4 action from JQuery

Question

I'm working on an app that uses ASP.NET MVC 4. In some ways, I feel like I'm learning everything from scratch :). I'm told its worth it.

I need to post some JSON to an Action in my controller. My action looks like the following:

[Authorize]
public class MyController : Controller
{
    [HttpPost]
    public ActionResult RemoveItem(string itemID)
    {
      // Do stuff...
      return Json(new { Status = 1, Message="Success" });
    }
}

My JQuery code looks like the following:

function removeItem(id) {
  var json = { "itemID": id };
  $.ajax({
    type: "POST",
    url: "/myController/removeItem",
    contentType: "application/json; charset=utf-8",
    data: json,
    dataType: "json",
    success: removeItemCompleted,
    error: removeItemFailed
  });
}

function removeItemCompleted(results) {
}

function removeItemFailed(request, status, error) {
}

In Fiddler, I notice a 500 error is returned. The TITLE field in the response says: "Invalid JSON primitive: itemID".

What am I doing wrong?

Thank you!

Solution 1

Be sure to send JSON:

data: json,

should be

data: JSON.stringify(json),

IE7 and below needs a shim: https://github.com/douglascrockford/JSON-js

NOTE: Dave A's answer is also correct, but doesn't directly answer your issue. I +1'ed it.

Solution 2

you don't seem to need JSON here. Ideally, the id param would be passed in your URI:

 url: "/myController/removeItem/"+id

That is probably why your Action can't be identified. It requires a parameter.

Followup: Critics who point out that data passed is a string and therefor cannot be passed as an id are incorrect. I should have pointed out that the action method should be re-written to accept string id.

Solution 3

          function removeItem(id) {
  var json = { "itemID": id };
  $.ajax({
    type: "POST",
    url: "/myController/removeItem",
    contentType: "application/json; charset=utf-8",
    data: JSON.stringify(json),
    dataType: "json",
    success: removeItemCompleted,
    error: removeItemFailed
  });
}

function removeItemCompleted(results) {
}

function removeItemFailed(request, status, error) {
}

Comments

[Karthik Chintala]

Dave please check his controllers action. He mentioned it as string and not as integer. By appending id to url it cannot be done AFAIK

[Dave Alperovich]

thanx @Joe, haters be everywhere

[Dave Alperovich]

ahhh yes, I was a little sloppy. great excuse for hating ;) It really should be passed as an id. String or not.

[Dave Alperovich]

as a follow up @Karthik you're completely wrong that an id can't be a string.

[Karthik Chintala]

i'm sorry if i'm wrong with my comment. Can it be passed if a string is passed instead of an int ?. I thought if it was string then only strings can be passed to it. Thanks for the follow up

[Karthik Chintala]

Also am not your hater Dave. I find many of your posts on SO to be useful. My bad i couldn't much when commenting out