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);
        }
    });
});

我错过了什么？

编辑：

这是响应 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

尝试一些这样的想法：

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 2

将for循环改为

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

更新

在控制器中

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 3

在 ajax 成功回调中，您正在迭代下拉选择器。您应该迭代响应数据：

$('#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);
        }
    });
});