如何解决在剃刀页面不起作用的情况下,在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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。