ASP.NET MVC JsonResult return 500

Question

I have this controller method:

public JsonResult List(int number) {
 var list = new Dictionary <int, string> ();

 list.Add(1, "one");
 list.Add(2, "two");
 list.Add(3, "three");

 var q = (from h in list where h.Key == number select new {
  key = h.Key,
   value = h.Value
 });

 return Json(list);
}

On the client side, have this jQuery script:

$("#radio1").click(function() {
  $.ajax({
    url: "/Home/List",
    dataType: "json",
    data: {
      number: '1'
    },
    success: function(data) {
      alert(data)
    },
    error: function(xhr) {
      alert(xhr.status)
    }
  });
});

I always get an error code 500. What's the problem?

Thank you

Answer 1

If you saw the actual response, it would probably say

This request has been blocked because sensitive information could be disclosed to third party web sites when this is used in a GET request. To allow GET requests, set JsonRequestBehavior to AllowGet.

You'll need to use the overloaded Json constructor to include a JsonRequestBehavior of JsonRequestBehavior.AllowGet such as:

return Json(list, JsonRequestBehavior.AllowGet);

Here's how it looks in your example code (note this also changes your int s to string s or else you'd get another error).

public JsonResult List(int number) {
  var list = new Dictionary<string, string>();

  list.Add("1", "one");
  list.Add("2", "two");
  list.Add("3", "three");

  var q = (from h in list
           where h.Key == number.ToString()
           select new {
             key = h.Key,
             value = h.Value
           });

  return Json(list, JsonRequestBehavior.AllowGet);
}

Answer 2

While JustinStolle's answer solves your problem, I would pay attention to the error provided from the framework. Unless you have a good reason to want to send your data with the GET method, you should aim to send it with the POST method.

The thing is, when you use the GET method, your parameters gets added to your request url instead of added to the headers/body of your request. This might seem like a tiny difference, but the error hints why it's important. Proxy servers and other potential servers between the sender and the receiver are prone to logging the request url and often ignore the headers and/or body of the request. This information is also often regarded as non important/secret so any data exposed in the url is much less secure by default.

The best practice is then to send your data with the POST method so your data is added to the body instead of the url. Luckily this is easily changed, especially since you're using jquery. You can either use the $.post wrapper or add type: "POST" to your parameters:

$.ajax({
            url: "/Home/List",
            type: "POST",
            dataType: "json",
            data: { number: '1' },
            success: function (data) { alert(data) },
            error: function (xhr) { alert(xhr.status) }
        });