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

发布时间：2023-02-18 09:07:15 所属栏目：asp.Net 来源：互联网

导读：如何解决在剃刀页面不起作用的情况下，在asp.net核心中创建级联下拉菜单？我试图首先使用asp.net core 3.1代码实现级联下拉列表。我有两个表，分别是车辆制造商和车辆型号。第一个下拉列表将填充品牌，选择任何品牌后，第二个下拉列表将填充模型。但是我对

　　如何解决在剃刀页面不起作用的情况下，在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 () {

（编辑：甘南站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

1/2

尾页

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

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