级联下拉剃刀页面

Question

这是我的级联下拉代码

  <div class="form-group col-md-4">
            <label asp-for="CarChassis.CompanyNameId" class="control-label"></label>
            <select asp-for="CarChassis.CompanyNameId" class="form-control" asp-items="ViewBag.CompanyNameId"></select>
            <span asp-validation-for="CarChassis.CompanyNameId" class="text-danger"></span>
        </div>
        <div class="form-group col-md-4">
            <label asp-for="CarChassis.CarModelId" class="control-label"></label>
            <select asp-for="CarChassis.CarModelId" class="form-control" asp-items="ViewBag.CarModelId"></select>
            <span asp-validation-for="CarChassis.CarModelId" class="text-danger"></span>
        </div>

和代码隐藏

 [BindProperty]
    public CarChassis CarChassis { get; set; }
    public int CarCompanyId { get; set; }
    public SelectList CarModelsList { get; set; }

    public  async Task<IActionResult> OnGetAsync()
    {
        ViewData["CarModelId"] = new SelectList(_context.CarModels, "Id", "Name");
        ViewData["CompanyNameId"] = new SelectList(_context.CompanyNames, "Id", "Name");
        ViewData["CreateYearId"] = new SelectList(_context.CreateYears, "Id", "Name");
        ViewData["DiversityId"] = new SelectList(_context.Diversity, "Id", "Name");
        return Page();
    }
    public JsonResult OnGetCarMode(int CarCompanyI)
    {
       var CarModelsList = _context.CarModels.Where(x => x.CompanyNameId == CarCompanyI).ToListAsync();
        return new JsonResult(CarModelsList);

    }

这也是我的模特

    public class CompanyName
{
  
    public string Name { get; set; }
    public DateTime CreateDate { get; set; }
    public DateTime ModifyDate { get; set; }
    public  ICollection<CarModel> CarModels { get; set; }
}
 public int Id { get; set; }
    public string Name { get; set; }
    public DateTime CreateDate { get; set; }
    public DateTime ModifyDate { get; set; }
    public int CompanyNameId { get; set; }
    public CompanyName CompanyName { get; set; }
}

这是我的 ajax 代码

    <script>
    $(function () {
        $("#CarChassis_CompanyNameId").on("change", function () {
            var CarCompanyI = $(this).val();
            $("#CarChassis_CarModelId").empty();
            $("#CarChassis_CarModelId").append("<option value=''>select </option>");
            $.getJSON(`?handler=CarMode&CarCompanyI=${CarCompanyI}`, (data) => {

                $.each(data, function (i, item) {
                    $("#SubCategoryId").append("<option value='"+ item.id+ "'>" + item.name + "</option>");
                });
            
            });
        });
    });
</script>

在运行我的代码之后我得到了这个错误

Uncaught TypeError: Cannot read property 'id' of null

Answer 1

你的代码有两个问题。

第一个在你的代码中（这不是异步方法，ToListAsync不能使用）：

var CarModelsList = _context.CarModels.Where(x => x.CompanyNameId == CarCompanyI).ToListAsync();

改为：

 var CarModelsList = _context.CarModels.Where(x => x.CompanyNameId == CarCompanyI).ToList();

第二个在你的ajax中（SubCategoryId不存在）。

 $.each(data, function (i, item) {
                $("#SubCategoryId").append("<option value='"+ item.id+ "'>" + item.name + "</option>");
            });

改为：

 $.each(data, function (i, item) {
                $("#CarChassis_CarModelId").append("<option value='"+ item.id+ "'>" + item.name + "</option>");
            });

级联下拉剃刀页面

cascading dropdown razor pages

c#

cascadingdropdown

razor

asp.net-core

razor-pages