级联下拉列表 ASP.NET Core MVC

Question

我希望能够完成的是：

让用户首先选择一个模型，然后显示与该模型相关的所有引擎。我一直在尝试从相关问题中调整代码，但没有成功。

这是我的一次尝试中的代码。

任何帮助将不胜感激。

CarsController.cs

public ActionResult GetEnginesByModelId(int ModelId)
    {
        EnginesRepository enginesRepository = new EnginesRepository();
        List<Engine> engines = enginesRepository.GetAll(cascadeInclude: true).SelectMany(e => e.EngineModels).Where(em => em.ModelId == ModelId).Select(em => em.ParentEngine).ToList();

        return Json(engines);
    }

创建.cshtml

<div class="row">
        <div class="col-md-2 ">
                Model:
                <select asp-items="@Model.Models" id="models">
                </select>
        </div>
    </div>
    <div class="row">
        <div class="col-md-2 ">
                Engines:
                <select id="engines"></select>
        </div>
    </div>

jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var items = "<option value='0'>Select</option>";
        $("#models").html(items);
    });
    $("#models").change(function () {
        var modelId = $("#models").val();
        var url = "/Cars/GetEnginesByModelId";

        $.getJSON(url, { ModelId: modelId }, function (data) {
            var item = "";
            $("#engines").empty();
            $.each(data, function (i, engine) {
                item += '<option value="' + engine.value + '">' + engine.text + '</option>'
            });
            $("#engines").html(item);
        });
    });
</script>

更新：我设法点击控制器并获取项目列表，但它显示“未定义”。为了显示我使用 item.ToString() 方法的项目。这是我使用的js和c#。 JS

<script type="text/javascript">
    $(document).ready(function () {
        $("#models").on("change", function () {
            $list = $("#engines");
            $.ajax({
                url: "/Cars/GetEnginesByModelId",
                type: "GET",
                data: { id: $("#models").val() }, //id of the state which is used to extract cities
                traditional: true,
                success: function (result) {
                    $list.empty();
                    $.each(result, function (i, item) {
                        $list.append('<option value="' + item["EngineId"] + '"> ' + item["ToString()"] + ' </option>');
                    });
                },
                error: function () {
                    alert("Something went wrong call the police");
                }
            });
        });
    });
</script>

创建.cshtml

<div class="row">
        <div class="col-md-2 ">
            <div class="customDiv">
                Model:
                <select id="models" name="ModelId">
                    @foreach (var carModel in Model.Models)
                    {
                        <option value="@carModel.Id">@carModel.Name @carModel.Price$</option>
                    }
                </select>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-2 ">
            <div class="customDiv">
                Engines:
                <select id="engines" name="EngineId">
                    @foreach (var engine in Model.Engines)
                    {
                        <option value="@engine.Id">@engine.ToString()</option>
                    }
                </select>
            </div>
        </div>
    </div>

Answer 1

对我有用的 JS

$(document).ready(function () {

$("#models").change(function () {
    $.get("/Cars/GetEnginesByModelId", { id: $("#models").val() }, function (data) {
        $("#engines").empty();
        $.each(data, function (index, row) {
            $("#engines").append("<option value='" + row.id + "'>" + row.name + "</option>")
        });
    });
})

});