在 asp.net 内核中创建级联下拉列表，其中 razor 页面不起作用

Question

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

IVehicleService 接口

    
    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;
        }
    }
     }

我的 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));
        }
    }
}

我的 Razor 标记

 <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

首先，在 js 的$.getJson中，需要将 handler 改成SubCategories ，因为需要输入OnGetSubCategories才能获取 VehicleModel 数据。

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

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

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

   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 中的字段名变成驼峰式，可以在启动时添加如下语句取消：

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

这是测试结果：

Answer 2

处理 AJAX 请求时，请务必检查浏览器开发人员工具中的网络选项卡。 然后你会看到请求返回 404 Not Found。 您在 PageModel 中有一个名为OnGetSubCategories的处理程序，但您的 AJAX 调用处理程序参数名为OnGetModels 。

一旦决定了要使用的名称，在将处理程序的名称传递给 AJAX 查询字符串时，应删除OnGet或OnPost部分：

$.getJSON(`?handler=Subcategories&MakeId=${makeId}`

有关使用命名处理程序方法的更多信息： https://www.learnrazorpages.com/razor-pages/handler-methods#named-handler-methods