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

时间:2018-07-14 13:25:28

标签: jquery asp.net-core-mvc

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

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>

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

1 个答案:

答案 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>

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