我不明白为什么它没有定义。 在控制器中,“创建操作”设置为类别下拉列表。
public IActionResult Create()
{
var model = new TechnicialSpecsViewModel();
List<Product> categories = _productService.GetAllParents();
model.CategoryList = (from i in categories
select new SelectListItem
{
Value = i.Id.ToString(),
Text = i.Name
}).ToList();
model.CategoryList.Insert(0, new SelectListItem { Value = "", Text = "Select", Selected = true });
return View(model);
}
,如果我从类别下拉列表中选择一个选项,请将类别ID发送给ProductList操作。这样我就可以得到categoryId == id
的产品列表 [HttpPost]
public JsonResult ProductList(int id)
{
List<Product> products = _productService.GetByParent(id);
return Json(new SelectList(products, "Id", "Name"));
}
完美,但是当我查看产品下拉列表时,似乎都不确定。
这是我的功能,
<script type="text/javascript">
$(document).ready(function () {
$("#CategoryId").change(function () {
var id = $(this).val();
var productId = $("#ProductId");
productId.empty();
$.ajax({
url: '/TechnicialSpecs/ProductList',
type: 'POST',
dataType: 'json',
data: { 'id': id },
success: function (data) {
$.each(data, function (index, option) {
productId.append('<option value=' + option.Value + '> ' + option.Text + ' </option>');
});
}
});
});
});
</script>
然后查看
<div class="form-group">
@Html.DropDownListFor(x => x.CategoryId, Model.CategoryList, new { @class = "bs-select form-control" })
</div>
</div>
<div class="form-group">
<select id="ProductId" name="ProductId" asp-for="Product" asp-items="@(new SelectList(string.Empty, "Id", "Name"))"></select>
</div>
</div>
而且,两个模型的类型相同,我真的不明白为什么这些未定义。
答案 0 :(得分:1)
您的控制器方法应如下:
[HttpPost]
public JsonResult ProductList(int id)
{
List<Product> products = _productService.GetByParent(id);
return Json(products);
}
您的视图应如下:
<div class="form-group">
@Html.DropDownListFor(x => x.CategoryId, Model.CategoryList, new { @class = "bs-select form-control" })
</div>
</div>
<div class="form-group">
<select id="ProductId" name="ProductId" asp-for="Product"></select>
</div>
</div>
然后,您的Ajax方法应如下:
<script type="text/javascript">
$(document).ready(function () {
$("#CategoryId").change(function () {
var id = $(this).val();
$.ajax({
url: '/TechnicialSpecs/ProductList',
type: 'POST',
dataType: 'json',
data: { id: id },
success: function (data) {
var options = '';
$.each(data, function () {
options += '<option value="' + this.id + '">' +
this.name+ '</option>';
});
$("#ProductId").prop('disabled', false).html(options);
}
});
});
});
</script>
希望它现在可以正常运行。