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!

If that's all you're passing there's really no need to create the variable. Your method expects a string named itemID so you should be doing something like: data: { itemID: id } No quotes around itemID — Marcus Recck
– Marcus Recck, Commented Feb 7, 2013 at 13:46
I'd like to learn the JSON approach. I actually need to pass more data. I was trying to trim it down for the sake of example. All of my data is key/value pairs though and no nested arrays or anything like that. That's why I want to use JSON. — Bill Jones
– Bill Jones, Commented Feb 7, 2013 at 13:49
@BillJones - Understood-- but in this case, there is no need to pass anything other than itemId. If your Action expected an object, then you could send a json stringified object over the wire. — ek_ny
– ek_ny, Commented Feb 7, 2013 at 13:51

Joe · Accepted Answer · 2013-02-07 13:56:03Z

11

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.

answered Feb 7, 2013 at 13:56

Joe

82.8k18 gold badges130 silver badges147 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dave Alperovich Over a year ago

thanx @Joe, haters be everywhere

Dave Alperovich · Accepted Answer · 2013-02-07 14:40:49Z

5

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.

edited Feb 7, 2013 at 14:40

answered Feb 7, 2013 at 13:54

Dave Alperovich

32.6k8 gold badges82 silver badges101 bronze badges

5 Comments

Karthik Chintala Over a year ago

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 Over a year ago

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

Dave Alperovich Over a year ago

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

Karthik Chintala Over a year ago

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 Over a year ago

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

imsurya · Accepted Answer · 2013-08-12 04:42:38Z

4

          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) {
}

answered Aug 12, 2013 at 4:42

imsurya

1641 silver badge6 bronze badges

Comments

Radmehr Hassanizadeh · Accepted Answer · 2013-07-25 20:01:16Z

0

use this code :

$('#delete').click(function () {
        var APIURL = "/api/products";
        var id = $('#SearchText').val();
        $.ajax({
            type: "DELETE",
            url: APIURL + '/' + id,
            success: function (data) {
                alert('Employee deleted');
            }
        });
    });

answered Jul 25, 2013 at 20:01

Radmehr Hassanizadeh

1

Collectives™ on Stack Overflow

Post JSON to ASP.NET MVC 4 action from JQuery

4 Answers 4

1 Comment

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related