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：