[英]Cascading html.DropDownListFor in .net core Razor Pages
I am at the point where I am loosing my mind.我正处于失去理智的地步。 So to avoid that, I have to ask you this questions.
所以为了避免这种情况,我不得不问你这个问题。 Now, I know, that there are lot of "similar" questions out there.
现在,我知道那里有很多“类似”的问题。 Believe me, I have spend the last 3 days looking at them, but none of them is working for me.
相信我,过去 3 天我一直在研究它们,但没有一个对我有用。 So I hope you will be able to help me with this.
所以我希望你能帮我解决这个问题。
I have been following a course on Udemy.com about ASP.NET Core and Razor Pages.我一直在关注 Udemy.com 上的课程,关于 ASP.NET Core 和 Razor Pages。 With some changes I have managed to create my little own project.
通过一些更改,我设法创建了自己的小项目。 However I am missing only one thing at the moment.
但是我现在只缺少一件事。
I would like to have a DropDownListFor with selections based on what is selected in another DropDownListFor.我想要一个 DropDownListFor,其选择基于另一个 DropDownListFor 中的选择。
In short I have to db tables.简而言之,我必须分贝表。 One called Team and one called RepairType.
一种称为 Team,另一种称为 RepairType。 Each repairtype is done by one of the teams.
每种维修类型都由其中一个团队完成。
So my Model looks like this:所以我的 Model 看起来像这样:
public class Team
{
[Key]
public int Id { get; set; }
[Required]
[Display(Name="Repair Team")]
public string Name { get; set; }
}
public class RepairType
{
[Key]
public int Id { get; set; }
[Required]
[Display(Name = "Repair Type")]
public string Name { get; set; }
[Required]
[Display(Name = "Repair Team")]
public int TeamId { get; set; }
[ForeignKey("TeamId")]
public virtual Team Team { get; set; }
}
I also have a VievModel:我还有一个 VievModel:
public class RepairVM
{
public Repair Repair { get; set; }
public IEnumerable<SelectListItem> RepairTypeList { get; set; }
public IEnumerable<SelectListItem> TeamList { get; set; }
public IEnumerable<SelectListItem> DeckList { get; set; }
public IEnumerable<SelectListItem> UserList { get; set; }
}
I have a few repositories that look like this:我有几个像这样的存储库:
public class TeamRepository : Repository<Team>, ITeamRepository
{
private readonly ApplicationDbContext _db;
public TeamRepository(ApplicationDbContext db) : base(db)
{
_db = db;
}
public IEnumerable<SelectListItem> GetTeamListForDropDown()
{
return _db.Team.Select(i => new SelectListItem()
{
Text = i.Name,
Value = i.Id.ToString()
});
}
public class RepairTypeRepository : Repository<RepairType>, IRepairTypeRepository
{
private readonly ApplicationDbContext _db;
public RepairTypeRepository(ApplicationDbContext db) : base(db)
{
_db = db;
}
public IEnumerable<SelectListItem> GetRepairTypeListForDropDown()
{
return _db.RepairType.Select(i => new SelectListItem()
{
Text = i.Name,
Value = i.Id.ToString()
});
}
In my Razor Page, I have these two html.DropDownListFor:在我的 Razor 页面中,我有这两个 html.DropDownListFor:
<div class="form-group row">
<div class="col-lg-3">
<label asp-for="RepairObj.Repair.TeamId"></label>
</div>
<div class="col-lg-9">
@Html.DropDownListFor(m => m.RepairObj.Repair.TeamId, Model.RepairObj.TeamList, "- Please select a Team -", new { @class = "form-control", @onchange = "javascript:GetType(this.value);" })
<span class="text-danger" asp-validation-for="RepairObj.Repair.TeamId"></span>
</div>
</div>
<div class="form-group row">
<div class="col-lg-3">
<label asp-for="RepairObj.Repair.RepairTypeId"></label>
</div>
<div class="col-lg-9">
@Html.DropDownListFor(m => m.RepairObj.Repair.RepairTypeId, Model.RepairObj.RepairTypeList, "- Please select a Repair Type -", new { @class = "form-control" })
<span class="text-danger" asp-validation-for="RepairObj.Repair.RepairTypeId"></span>
</div>
</div>
And my code when loading the page looks like this:加载页面时我的代码如下所示:
public class CreateRepairModel : PageModel
{
private readonly IUnitOfWork _unitofWork;
private readonly IWebHostEnvironment _hostingEnvironment;
public CreateRepairModel(IUnitOfWork unitOfWork, IWebHostEnvironment hostingEnvironment)
{
_unitofWork = unitOfWork;
_hostingEnvironment = hostingEnvironment;
}
[BindProperty]
public RepairVM RepairObj { get; set; }
public IActionResult OnGet()
{
RepairObj = new RepairVM
{
TeamList = _unitofWork.Team.GetTeamListForDropDown(),
RepairTypeList = _unitofWork.RepairType.GetRepairTypeListForDropDown(),
DeckList = _unitofWork.Deck.GetDeckListForDropDown(),
Repair = new Models.Repair()
};
return Page();
}
I have tried javaScript, jQuery and so on, but as I said, nothing really works for me.我试过 javaScript、jQuery 等等,但正如我所说,没有什么对我有用。 Please have in mind that this is my first ever web application project, so I am really hoping that someone will be so kind, and tell me exactly what to do, so that I will only have the repairtype in the dropdownlist that match the teams dropdownlist.
请记住,这是我的第一个 web 应用项目,所以我真的希望有人会如此好心,并告诉我确切的操作,以便我在下拉列表中只有与团队下拉列表匹配的修复类型.
I hope it all makes sense and I will be happy to supply you with more information if needed.我希望这一切都有意义,如果需要,我很乐意为您提供更多信息。
Thanks.谢谢。
We need to use data-attribute for the option fields so we could filter, hence the repair list has to be manually filled.我们需要为选项字段使用数据属性,以便我们可以过滤,因此必须手动填写修复列表。 Follow the steps below;
请按照以下步骤操作;
team-select
to Teams dropdown.team-select
to Teams 下拉列表。 We will use this to bind our event later.@Html.DropDownListFor(m => m.RepairObj.Repair.TeamId, Model.RepairObj.TeamList, "- Please select a Team -", new { @class = "form-control team-select"})
data-team
. data-team
。/*
We have to manually fill the options because SelectListItem doesn't support data-attribute.
I also added the class repair-select for event bind.
*/
<select name="RepairObj.Repair.RepairTypeId" class="repair-select form-control">
<option>- Please select a Repair Type -</option>
@foreach(var type in Model.RepairObj.RepairTypeList){
<option data-team="@type.TeamId" value="@type.Id">@type.Name</option>
}
</select>
@section scripts {
<script>
$(document).ready(function(){
// bind an event everytime team select is changed
$(".team-select").change(function(){
// get the selected teamId
var teamId = $(this).val();
// loop through all option
$(".repair-select option").each(function(){
// get the team id from data-attribute; data-team
var dataTeamId = $(this).data("team");
// if the dataTeamId is equal to teamId, show it, else hide
if(dataTeamId == teamId){
$(this).show();
$(this).removeAttr("disabled");
}
else{
$(this).hide();
$(this).attr("disabled",true);
}
});
// select the first option in repairType dropdown
$(".repair-select option").eq(0).prop("selected", true);
});
});
</script>
}
GetRepairTypeListForDropDown
to the code below.GetRepairTypeListForDropDown
更新为以下代码。public List<RepairType> GetRepairTypeListForDropDown()
{
return _db.RepairType.ToList();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.