Ajax получает правильный ответ, но не загружается на страницу

Question

Я написал ниже. Проверяя средства разработки, я вижу, что в ответе указан правильный HTML, за исключением того, что он не загружается на страницу. В консоли не отображаются ошибки.

$('#manufacturerDropDown').change(function () {
    var selected = $(this).val();
    $.ajax({
        url: '/Home/Index',
        data: { id: $('#manufacturerDropDown option:selected').val() },
        type: "post",
        cache: false,
        success: function (data) {
            alert(data);
            var modelDropDown = $('#modelDropDown');
            modelDropDown.empty();

            $(modelDropDown).each(function (index, item) {
                modelDropDown.append(
                    $('<option>', {
                        value: item.value,
                        text: item.text
                    }));
            });
        },
        error: function () {
            alert(xhr.status);
            alert(thrownError);
        }
    });
});

Чего мне не хватает?

EDIT:

Вот ответ HTML, я опустил верхний и нижний колонтитулы:

<form method="post">
    <div class="container">
        <div class="row pt-3">
            <div class="col border bg-light pt-4">
                <div class="form-group row">
                    <label class="col-sm-5 col-form-label text-right" for="ManufacturerId">Manufacturers</label>
                    <div class="col-sm-7">
                        <select class="form-control form-control-sm w-50" id="manufacturerDropDown" value="ManufacturerId" data-val="true" data-val-required="The ManufacturerId field is required." name="ManufacturerId">
                            <option value="217ca128-b8b8-e311-b74d-005056b12c30">F</option>
                            <option value="227ca128-b8b8-e311-b74d-005056b12c30">Audi</option>
                            <option value="237ca128-b8b8-e311-b74d-005056b12c30">BMW</option>
                            <option value="247ca128-b8b8-e311-b74d-005056b12c30">Ford</option>
                            <option value="257ca128-b8b8-e311-b74d-005056b12c30">Mazda</option>
                            <option value="267ca128-b8b8-e311-b74d-005056b12c30">Peugeot</option>
                            <option value="277ca128-b8b8-e311-b74d-005056b12c30">Mercedes</option>
                        </select>
                        <span class="text-danger field-validation-valid" data-valmsg-for="ManufacturerId" data-valmsg-replace="true"></span>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-5 col-form-label text-right" for="ModelId">Models</label>
                    <div class="col-sm-7">
                        <select class="form-control form-control-sm w-50" id="modelDropDown" data-val="true" data-val-required="The ModelId field is required." name="ModelId">
                            <option value="e336de76-90b9-e311-b74d-005056b12c30">Focus</option>
                        </select>
                        <span class="text-danger field-validation-valid" data-valmsg-for="ModelId" data-valmsg-replace="true"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

Вот код для контроллера:

public IActionResult Index(string id)
{
    Guid selectedId = Guid.Parse(id);

    var vm = new HomeViewModel
    {
        Manufacturers = context.ManufacturersTable.OrderBy(x => x.Manufacturer).ToList(),
        Models = context.ModelsTable.OrderBy(x => x.ModelName).Where(x => x.ManufacturerId == selectedId).ToList(),
    }
}

Answer 1

изменить для цикла на

       for (item in data.Models) { /// or data.property in which actual data is 
         modelDropDown.append(
                $('<option>', {
                    value: item.value,
                    text: item.text
                }));
           }

UPDATE

В контроллере

public IActionResult Index(string id)
   {
     Guid selectedId = Guid.Parse(id);

var vm = new HomeViewModel
{
    Manufacturers = context.ManufacturersTable.OrderBy(x => 
     x.Manufacturer).ToList(),
    Models = context.ModelsTable.OrderBy(x => x.ModelName).Where(x => 
    x.ManufacturerId == selectedId).ToList(),
   }

  return vm;
}

Answer 2

Попробуй подумать вот так:

success: function (data) {
            alert(data);
            var modelDropDown = $('#modelDropDown');
            var html="";
            for(var i=0; i<data.length; i++){
                   html+="<option value='"+data[i].value+"'>"+data[i].text+"</option>";
             }
             modelDropDown.html(html);
        }

Answer 3

При обратном вызове ajax success вы перебираете выпадающий селектор. Вместо этого вы должны перебрать данные ответа:

$('#manufacturerDropDown').change(function () {
    var selected = $(this).val();
    $.ajax({
        url: '/Home/Index',
        data: { id: $('#manufacturerDropDown option:selected').val() },
        type: "post",
        cache: false,
        success: function (data) {
            alert(data);
            var modelDropDown = $('#modelDropDown');
            modelDropDown.empty();

            data.forEach(function (item) {
                modelDropDown.append(
                    $('<option>', {
                        value: item.value,
                        text: item.text
                    }));
            });
        },
        error: function () {
            alert(xhr.status);
            alert(thrownError);
        }
    });
});