Cascading Dropdown - 如何加载数据？

Question

我尝试制作级联下拉菜单，但我在发送和获取响应数据时遇到问题。

后端：

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

在这里我得到了正确的数据。

首先我试过：

$("#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);
   });
});

在这里我可以发送请求并获得“成功”返回。 但是，当我访问json.Projects时，我只是得到一个`undefined。 我试图更改内容类型，但没有成功。

其次我用过：

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

有了这个，我得到一个非法调用错误。

我必须做什么才能让其中任何一个工作？ 他们的问题是什么？

Answer 1

我尝试创建一个级联下拉列表，但我在发送和获取响应数据时遇到问题。我必须做什么才能使其中任何一个正常工作？ 他们的问题是什么？

好吧，让我们考虑第一种方法，您正在尝试检索像json.Projects这样的响应，但它不正确，因为数据不存在并且您得到如下未定义：

解决方案：

您的回复将是json而不是json.Projects

完整演示：

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


                })

第二种方法：

在ajax请求中，您将 object 作为 object fahsion 传递，例如data: data而您的 controller 期望作为参数，因此您会收到以下错误：

解决方案：

您应该像这样在 ajax 请求中传递数据data: { type: "YourTypeValue", id:101 },而不是data: data,

完整样本：

          $.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!');
                }
            });

注意：我省略了contentType ，因为如果我们不定义，默认情况下contentType是"application/x-www-form-urlencoded;charset=UTF-8" 。

Output：