Question

我不明白为什么它没有定义。在控制器中，“创建操作”设置为类别下拉列表。

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>

而且，两个模型的类型相同，我真的不明白为什么这些未定义。

Answer 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>

希望它现在可以正常运行。

.net核心级联dropdownlist返回未定义

1 个答案: