在剃刀页面不起作用的情况下，在asp.net核心中创建级联下拉菜单

问题描述

我试图首先使用asp.net core 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>

该接口及其实现已在“启动”中的依赖项注入系统中注册：

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

解决方法

首先，在js的$.getJson中，您需要将处理程序更改为 SubCategories ，因为您需要输入OnGetSubCategories才能获得VehicleModel数据。

但是我对模型下拉列表的定义仍然不确定

另一个要点是，在核心中，当ajax返回json时，默认情况下，字段名称将更改为驼峰式，因此您需要更改item之后的字段名称的首字母改为小写，例如：${item.id}和${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中的字段名称成为驼峰大小写，则可以在启动时添加以下语句以取消它：

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

这是测试结果：

,

在处理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