级联html.DropDownListFor在.net核心Razor页面中

Question

我正处于失去理智的时刻。为了避免这种情况，我不得不问你这些问题。现在，我知道，有很多"；类似的"；问题就在那里。相信我，我在过去的三天里一直在看他们，但他们都不适合我。所以我希望你能帮助我。

我一直在Udemy.com上学习一门关于ASP.NET Core和Razor Pages的课程。经过一些修改，我终于创建了自己的小项目。然而，此刻我只错过了一件事。

我想要一个DropDownListFor，根据在另一个DropDownListFor中选择的内容进行选择。

简而言之，我必须数据库表。一个叫Team，一个叫RepairType。每种维修类型都由其中一个小组完成。

所以我的模型看起来是这样的：

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

我还有一个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; }
}

我有几个类似的存储库：

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

在我的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>

加载页面时我的代码如下：

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

我尝试过javaScript、jQuery等，但正如我所说，没有什么真正适合我。请记住，这是我有史以来的第一个web应用程序项目，所以我真的希望有人能这么友善，告诉我该做什么，这样我在dropdownlist中只会有与团队dropdownlists匹配的repairtype。

我希望这一切都有意义，如果需要的话，我很乐意为您提供更多信息。

谢谢。

Answer 1

我们需要为选项字段使用数据属性，以便进行筛选，因此必须手动填写修复列表。按照以下步骤操作；

1. 将类team-select添加到Teams下拉列表中。我们稍后将使用此绑定我们的事件

@Html.DropDownListFor(m => m.RepairObj.Repair.TeamId, Model.RepairObj.TeamList, "- Please select a Team -", new { @class = "form-control team-select"})

2. 将其用作"修复"下拉列表。在每个选项中，我都使用了数据属性；CCD_ 2

/* 
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>

3. 然后使用此脚本

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

4. 将GetRepairTypeListForDropDown更新为以下代码

public List<RepairType> GetRepairTypeListForDropDown()
{
return _db.RepairType.ToList();
}