c# - ASP.Net Core MVC Ajax json 响应

Question

我创建了一个 View ，当用户选择其中 2 个下拉列表值时，将启动 AJAX 方法来填充其他下拉列表的值

回调已触发，但我无法处理响应。

我可能做错了不止一件事，所以任何帮助将不胜感激。我对 Asp.Net core mvc 很陌生

我的 Controller 代码(简化 - 参数正在使用并且正在工作):

public IActionResult GetCodes(string location, string xType)
{
    return Json(new Dictionary<string, string> {
    { "","" },
    { "Option1","120" },
    { "Option2","123" }
    });        
}

我的 View 上的 jquery 脚本:

var ddl1val = $("#Location :selected").val().toLowerCase();
var ddl2val = $("#xType:selected").val().toLowerCase();
$.ajax({
    type: "GET",
    url: "/Ppl/GetCodes",          
    dataType: 'json',
    data: { location: ddl1val, xtype: ddl2val},
    success: function (data) {
        $("#ddlOptions").empty();

        var ops = '<option value=""></option>';

        alert(data); //returns [object Object]
        alert(data.Key); //returns undefined???

        //I need this to work
        for (var i = 0; i < data.length; i++) {
            ops += '<option value="' + data[i].Key + '">' + data[i].Value + '</option>';
        $("#ddlOptions").html(ops);
    }
}

console.log(data) 显示:

{"": "", Option1: "120", Option2: "123"} 

我不限于使用 JSON 返回，但它比 xml 更轻，所以我更喜欢使用它

Answer 1

正在序列化Dictionary<>转换为 JSON 会在 JS 中生成如下所示的对象:

{
  "": "",
  "Option1": "120",
  "Option2": "123"
}

因此，您不应使用 for循环枚举它。当您使用 jQuery 时，您可以使用 $.map()反而。另请注意，您不需要添加空 option因为您将其包含在来自 MVC 端点的响应中。您也不需要调用empty()当您覆盖 select 的 HTML 时完全地。试试这个:

var data = {
  "": "",
  "Option1": "120",
  "Option2": "123"
}

// inside the success callback:
var ops = $.map(data, function(v, k) {
  return '<option value="' + v + '">' + k + '</option>';
});
$("#ddlOptions").html(ops);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="ddlOptions"></select>