在 asp.net 核心中创建级联下拉菜单，但剃须刀页面无法正常工作

Question

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

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

我的模特页面

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

在处理 AJAX 请求时，始终检查 browser's developer tools 中的“网络”选项卡。然后你会看到请求返回 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

Answer 2

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

but I keep getting undefined on the model dropdown

还有一个很重要的一点就是在core中，当ajax returns 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;
        });

测试结果如下：

在 asp.net 核心中创建级联下拉菜单，但剃须刀页面无法正常工作

Creating Cascading dropdown in asp.net core with razor pages not working

sql-server

ajax

asp.net-core

clean-architecture

razor-pages

更新