Need help with MVC route when i jQuery AJAX call a route.

Question

Hi folks,

I'm trying to access a simple ASP.NET MVC route, but it's erroring with:

The parameters dictionary contains a null entry for parameter 'isFoo' of non-nullable type 'System.Boolean' for method 'System.Web.Mvc.ActionResult Transform(Boolean, System.String)' in .. blah blah blah.

Ie. the boolean property is not getting set ... which means the value is not getting passed in.

So i've got an Action method called Transform(..) and it's not accepting the values that are HTTP-Posted to it, with jQuery. It's like my posted values get lost :(

The MVC site is a stock standard ASP.NET MVC File->New->MVC Web Application. Nothing has been changed, with the exception of adding a new controller class. that's it.

using System.Web.Mvc;
using System.Web.Mvc.Ajax;

namespace WorldDomination.EbonHawk.Web.Controllers
{
    public class AjaxController : Controller
    {
        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Transform(bool isFoo, string bar)
        {
            // blah....
            return View();
        }

    }
}

and how this is called, using jQuery ....

$.ajax({
    type: "POST",
    url: "/ajax/transform",
    data: "isfoo=true&bar=" + $("#Bar").val(),
    contentType: "application/json;",
    dataType: "json",
    success: function() { alert("it worked"); },
    failure: function() { alert("Uh oh"); }
});

When i use FireBug, it definately shows that i'm trying to POST to the url. Can anyone help?

Answer 1

At first glance, it appears that you are confusing jQuery...

You are telling it that your data type is JSON, but submitting text. Remove your dataType clause from your AJAX post, and jQuery will figure out and submit your post appropriately.

Answer 2

What Jeff said. Alternatively, if you wish to keep the dataType, your data line should look like this:

...
data: { isfoo: true, bar: $("#Bar").val() },
...

Answer 3

ASP.NET MVC controller actions simply translate the POST or GET parameters into arguments to your function. If the arguments are being passed correctly using one of those HTTP methods, you should be fine. However, it seems you jQuery isn't working correctly.

You should change your $.ajax call to as follows

$.ajax({
    type: "POST",
    url: "<%= Url.Action("Transform", "Ajax") %>",
    data: { isfoo: true, bar: $("#Bar").val() },
    contentType: "application/json;",
    dataType: "json",
    success: function() { alert("it worked"); },
    failure: function() { alert("Uh oh"); }
});

Note that this problem has nothing to do with the routing system. If you wanted to use routing to make a clean URL to call using parameters, you would need to change your method to POST. Overall, the way you have it right now is much cleaner, though. It would be good, however, to use the routing system to generate the base URL for your service.

EDIT:

If you were to use GET parameters like you were in the data option, you would also need to make isfoo= read isFoo=, I think. I can't remember if caps matter when parameterizing.