ASP.Net Core MVC Ajax JSON ответ

Question

Я создал представление, в котором, когда пользователь выбирает 2 значения из раскрывающегося списка, запускается метод AJAX для заполнения значений дополнительного раскрывающегося списка

Срабатывает обратный вызов, однако я не могу работать с ответом,

Я, вероятно, делаю не одну вещь неправильно, поэтому любая помощь будет принята с благодарностью.Я очень новичок в ядре Asp.Net 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(), поскольку вы полностью перезаписываете HTML select.Попробуйте это:

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>