ASP.Net Core MVC Ajax json 响应

Question

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

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

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

我的控制器代码（简化 - 参数正在使用和工作）：

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

我在视图上的 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>