级联下拉列表 ASP.NET 核心 MVC
Cascading dropdownlists ASP.NET Core MVC
我希望能够完成的是:
首先让用户 select 一个模型,然后显示与该模型相关的所有引擎。我一直在尝试从相关问题中改编代码,但没有成功。
这是我的一次尝试的代码。
如有任何帮助,我们将不胜感激。
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);
}
Create.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>
Create.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>
对我有用的 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>")
});
});
})
});
我希望能够完成的是:
首先让用户 select 一个模型,然后显示与该模型相关的所有引擎。我一直在尝试从相关问题中改编代码,但没有成功。
这是我的一次尝试的代码。
如有任何帮助,我们将不胜感激。
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);
}
Create.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>
Create.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>
对我有用的 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>")
});
});
})
});