Null parameter in Json controller method while Jquery parameter has value

Question

I am creating a cascading dropdown list based on an example I found here

The query sent to the server to request the second dropdownlist values has non null parameters but when I break in the controller method, it appears empty. As you can see below.

Any help would be greatly appreciated ! Thanks !!

It's using jQuery and ASP.NET MVC 5 while my project is ASP.NET MVC Core 2

The code in the controller is the following :

public JsonResult States(string Country)
{
  List<string> StatesList = new List<string>();
  switch (Country)
  {
     case "India":
       StatesList.Add("New Delhi");
       StatesList.Add("Mumbai");
       StatesList.Add("Kolkata");
       StatesList.Add("Chennai");
       break;
  }
  return Json(StatesList);
}

And here is the AJAX :

<script src = "/lib/jquery/dist/jquery.js" > </script>
<script> 
$(document).ready(function ()
{
    $("#State").prop("disabled", true);
    $("#Country").change(function ()
    {
        if ($("#Country").val() != "Select")
        {
             var CountryOptions = {};
             CountryOptions.url = "/Dropdown/states";
             CountryOptions.type = "POST";
             CountryOptions.data = JSON.stringify({ Country: $("#Country").val() });
             CountryOptions.datatype = "json";
             CountryOptions.contentType = "application/json";
             CountryOptions.success = function (StatesList)
             {
                $("#State").empty();
                for (var i = 0; i < StatesList.length; i++)
                {
                     $("#State").append("<option>" + StatesList[i] + "</option>");
                }
                $("#State").prop("disabled", false);
             };

            CountryOptions.error = function ()
            {
                alert("Error in Getting States!!");
            };
            $.ajax(CountryOptions);
        }
        else
        {
             $("#State").empty();
             $("#State").prop("disabled", true);
         }
    });
}); 

Answer 1

Since you have specified the contentType = "application/json" and are sending stringified data, then you need to add the [FromBody] attribute in the POST method to instruct the ModelBinder to use the content-type header to determine the IInputFormatter to use for reading the request (which for json is the JsonInputFormatter). Change the signature of the method to

[HttpPost]
public JsonResult States([FromBody]string Country)

However, it is not necessary send the data as json, and you can use the default contentType ('application/x-www-form-urlencoded; charset=UTF-8'). You can delete the contentType option and use

CountryOptions.data = { Country: $("#Country").val() }; // not stringified
// CountryOptions.contentType = "application/json";

For more information, refer Model binding JSON POSTs in ASP.NET Core.