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

Try adding the [FromBody] parameter to the method - public JsonResult States([[FromBody] string Country)` - but there is no reason to send it as application/json - you can just delete the contentType option and use CountryOptions.data = { Country: $("#Country").val() }; — user3559349
– user3559349, Commented Sep 18, 2018 at 11:15
^^ That or mark the controller method with the [HttpPost] attribute. — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Sep 18, 2018 at 11:37
Thanks @StephenMuecke indeed not sending it as application/json did the job! — AlexandreG
– AlexandreG, Commented Sep 18, 2018 at 13:13
It should have worked if the method is [HttpPost] and you use the [FromBody] attribute — user3559349
– user3559349, Commented Sep 18, 2018 at 13:19

user3559349 · Accepted Answer · 2018-09-23 08:41:39Z

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";

Collectives™ on Stack Overflow

Null parameter in Json controller method while Jquery parameter has value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related