Cascading Dropdown - How to load Data?

Question

I try to make an cascading dropdown, but I have problems with the sending and fetching of the response data.

Backend:

[HttpPost]
public async Task<JsonResult> CascadeDropDowns(string type, int id)
{  .............
 return Json(model);
}

Here I get the correct data.

First I tried:

$("#dropdown").change( function () {
   var valueId = $(this).val();
   var name = $(this).attr("id");
   let data = new URLSearchParams();
   data.append("type", name);
   data.append("id", valueId);
   fetch("@Url.Action("CascadeDropDowns", "Home")", {
         method: "POST",
         credentials: "include",
         headers: {
             "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
         },
         body: data
    })
    
  .then(response => {
        console.log('Success:', response);
         return response.json();
   })
  .then(json  => {
     console.log('Success:', json );
      console.log('data:', json.Projects);
     PopulateDropDown("#subdropdown1",json.Projects)
   })
   .catch(error => {
      console.log('Error:', error);
   });
});

Here I can send the Request and get a "success" back. However, when I access json.Projects I just get an `undefined. I have tried to change the Content-Type, without success.

Secondly I have used:

    $.ajax({
        url: "@Url.Action("CascadeDropDowns", "Home")",
        data: data,
        type: "POST",
        contentType:  "application/x-www-form-urlencoded;charset=UTF-8",
        success: function (data) {
            console.log(data);
      },
        error: function (r) {
             console.log(r.responseText);
        },
        failure: function (r) {
             console.log(r.responseText);
        }
     });

With this I get an Illegal Invocation Error.

What do I have to do that get either of those working? What are their problems?

Answer 1

I try to make an cascading dropdown, but I have problems with the sending and fetching of the response data.What do I have to do that get either of those working? What are their problems?

Well, let consider the first approach, you are trying to retrieve response like json.Projects but its incorrect because data is not there and you are getting undefined as below:

Solution:

Your response would be in json instead of json.Projects

Complete Demo:

HTML:

<div class="form-group">
    <label class="col-md-4 control-label">State</label>
    <div class="col-md-6">
        <select class="form-control" id="ddlState"></select>
        <br />

    </div>
</div>

Javascript:

            var ddlState = $('#ddlState');
            ddlState.empty();
            ddlState.append($("<option></option>").val('').html('Please wait ...'));


            let data = new URLSearchParams();
            data.append("type", "INDIA");
            data.append("id", 101);

            fetch("http://localhost:5094/ReactPost/CascadeDropDowns", {
                method: "POST",
                credentials: "include",
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
                },
                body: data
            })

                .then(response => {
                    return response.json();
                })
                .then(result => {

                    console.log(result);
                    var ddlState = $('#ddlState');
                    ddlState.empty();
                    ddlState.append($("<option></option>").val('').html('Select State'));

                    $.each(result, function (index, states) {
                        ddlState.append($("<option></option>").val(states.cityId).html(states.cityName));
                    });


                })

Second approach:

In ajax request you are passing object as object fahsion like data: data whereas, your controller expecting as parameter consequently, you are getting following error:

Solution:

You should pass your data within your ajax request like this way data: { type: "YourTypeValue", id:101 }, instead of data: data,

Complete Sample:

          $.ajax({
                url: 'http://localhost:5094/ReactPost/CascadeDropDowns',
                type: 'POST',
                data: { type: "YourValue", id:101 },
                success: function (response) {

                    ddlState.empty();
                    ddlState.append($("<option></option>").val('').html('Select State'));
                    $.each(response, function (i, states) {
                        ddlState.append($("<option></option>").val(states.cityId).html(states.cityName));
                    });
                },
                error: function (response) {
                    alert('Error!');
                }
            });

Note: I have ommited contentType because, by default contentType is "application/x-www-form-urlencoded;charset=UTF-8" if we don't define.

Output: