MVC JsonResult Method not accepting parameter

Question

I have an MVC JsonResult Method that accepts one string parameter:

    public JsonResult GetDestinations(string countryId)
    {
        List<Destination> destinations = new List<Destination>();

        string destinationsXml = SharedMethods.GetDestinations();
        XDocument xmlDoc = XDocument.Parse(destinationsXml);
        var d = from country in xmlDoc.Descendants("Country")
                from destinationsx in country.Elements("Destinations")
                from destination in destinationsx.Elements("Destination")
                where (string)country.Attribute("ID") == countryId
                select new Destination
                {
                    Name = destination.Attribute("Name").Value,
                    ID = destination.Attribute("ID").Value,
                };
        destinations = d.ToList();

        return Json(new JsonResult { Data = destinations}, JsonRequestBehavior.AllowGet);
    }

With a jquery method calling the method:

        //Fetch Destinations
        $("#Country").change(function () {
            var countryId = $("#Country > option:selected").attr("value");
            $("#Destination").html("");
            $("#Resort").html("");
            $("#Resort").append($("<option></option>").val(0).html("---Select---"));
            $.ajax({
                type: "POST",
                traditional: true,                    
                url: "/Destinations/GetDestinations",
                data: "{countryId:'" + countryId + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    BindDestinationSelect(msg)
                }
            });
        });

However, the JsonResult seems to only receive a null parameter. Even though Firebug is showing that a parameter is being passed:

JSON countryId "11" Source {countryId:'11'}

Any ideas? Thanks

Answer 1

I think the problem is in how you are actually passing the data, you are doing so as a string:

data: "{countryId:'" + countryId + "'}",

When in reality, you should be using a structure on the client side;

data: { countryId: countryId },

jQuery should be able to handle passing the id correctly then. As you are doing it now, it is trying to send JSON to the server, which is not what MVC is expecting, it's expecting a POST with name/value pairs.

You might also want to consider the jQuery Form Plugin, as it makes serializing your Javascript structures into POST data very easy.

Answer 2

Ah, after much searching I've discovered the reason why it fails.

Nothing to do with malformed JSON etc, but rather the fact that the controller method doesnt know what to expect if you try to pass it JSON values:

http://www.c-sharpcorner.com/Blogs/BlogDetail.aspx?BlogId=863

So in my case, I've just elected to pass it a single string value.

        $("#Country").change(function () {
            var countryId = $("#Country > option:selected").attr("value");
            $("#Destination").html("");
            $("#Resort").html("");
            $("#Resort").append($("<option></option>").val(0).html("---Select---"));
            $.ajax({
                type: "POST",
                traditional: true,
                url: "/Destinations/GetDestinations",
                data: "countryId=" + countryId,
                success: function (msg) {
                    BindDestinationSelect(msg.Data)
                }
            });