在 razor 页面无法正常工作的 asp.net core 中创建级联下拉列表

Question

我正在尝试首先使用 asp.net core 3.1 代码实现级联下拉列表。我有两张表，分别是车辆品牌和车辆型号。第一个下拉列表将填充品牌，选择任何品牌后，第二个下拉列表将填充型号。但我在模型下拉列表中一直未定义。下面是我的实现。请问我做错了什么？谢谢

汽车服务接口

    
    namespace Application.Common.Interfaces
    {
       public interface IVehicleService
       {
         IEnumerable<VehicleMake> GetMakes();
         IEnumerable<VehicleModel> GetModels(int categoryId);
       }
     }

车辆服务

    namespace Application.Common.Interfaces
    {
      public class VehcicleService : IVehicleService
      {
        private readonly IApplicationDbContext _dbContext;
        public VehcicleService(IApplicationDbContext dbContext)
        {
            _dbContext = dbContext;
        }
        public IEnumerable<VehicleMake> GetMakes()
        {
            IEnumerable<VehicleMake>  makes = _dbContext.VehicleMakes.ToList();
            return makes;       
        }
        public IEnumerable<VehicleModel> GetModels(int MakeId)
        {
            IEnumerable<VehicleModel> model = _dbContext.VehicleModels.Where(x => x.VehicleMakeId == MakeId).ToList();            
            return model;
        }
    }
     }

我的模型页面

namespace Wbc.WebUI.Areas.Tools.Pages
{
    
    public class SearchByMakeModel : PageModel
    {
       private readonly IVehicleService _vehicleService;
        public SearchByMakeModel(IVehicleService vehicleService)
        {           
            _vehicleService = vehicleService;
        }
        [BindProperty(SupportsGet = true)]
        public int MakeId { get; set; }
        public int ModelId { get; set; }
        public SelectList MakeListdll { get; set; }

       public void OnGet()
        {
            MakeListdll = new SelectList(_vehicleService.GetMakes(), nameof(VehicleMake.Id), 
            nameof(VehicleMake.Name));
        }

        public JsonResult OnGetSubCategories()
        {
            return new JsonResult(_vehicleService.GetModels(MakeId));
        }
    }
}

我的剃刀标记

 <select asp-for="MakeId" asp-items="Model.MakeListdll">
   <option value=""></option>
   </select>

   <select asp-for="ModelId">                            
    </select>

该接口及其实现在 Startup 中向依赖注入系统注册：

services.AddTransient<IVehicleService, VehcicleService>();

我的 Ayax 通话

@section scripts{
    <script type="text/javascript">
        $(function () {
            $("#MakeId").on("change", function() {
                var makeId = $(this).val();
                $("#ModelId").empty();
                $("#ModelId").append("<option value=''>Select Model</option>");
                $.getJSON(`?handler=OnGetModels&MakeId=${makeId}`, (data) => {
                    $.each(data, function (i, item) {
                        $("#ModelId").append(`<option value="${item.Id}">${item.Name}</option>`);
                    });
                });
            });
        });
    </script>
}

Answer 1

首先，在$.getJsonjs中，需要将handler改为SubCategories，因为需要输入OnGetSubCategories获取VehicleModel数据。

但我在模型下拉列表中一直未定义

还有一点很重要，在core中，ajax返回json时，字段名会默认改为驼峰式，所以需要将item后面的字段名首字母改为小写，如：${item.id}and ${item.name}。

由于您没有提供该类VehicleModel，因此这是我的自定义 VehicleModel 类：

   public class VehicleModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public int VehicleMakeId { get; set; }
    }

这是js：

@section scripts{
    <script type="text/javascript">
        $(function () {
            $("#MakeId").on("change", function () {
                var makeId = $(this).val();
                $("#ModelId").empty();
                $("#ModelId").append("<option value=''>Select Model</option>");
                $.getJSON(`?handler=SubCategories&MakeId=${makeId}`, (data) => {
                    $.each(data, function (i, item) {
                        $("#ModelId").append(`<option value="${item.id}">${item.name}</option>`);
                    });
                });
            });
        });
    </script>
}

更新

如果不希望返回的json中的字段名变成驼峰式，那么可以在startup中添加如下语句取消：

services.AddMvc().AddJsonOptions(jsonOptions =>
        {
            jsonOptions.JsonSerializerOptions.PropertyNamingPolicy = null;
        });

这是测试结果：