我正處于失去理智的地步。所以為了避免這種情況，我不得不問你這個問題。現在，我知道，那里有很多“類似”的問題。相信我，過去 3 天我一直在看著它們，但它們都不適合我。所以我希望你能幫助我解決這個問題。
我一直在 Udemy.com 上關注關于 ASP.NET Core 和 Razor Pages 的課程。通過一些更改，我設法創建了我自己的小專案。但是，我目前只缺少一件事。
我想要一個 DropDownListFor，其選擇基于另一個 DropDownListFor 中選擇的內容。
簡而言之，我必須 db 表。一個叫 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()
});
}
In my Razor Page, I have these two 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. 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.
I hope it all makes sense and I will be happy to supply you with more information if needed.
Thanks.
uj5u.com熱心網友回復：
我們需要為選項欄位使用資料屬性，以便我們可以過濾，因此必須手動填寫修復串列。請按照以下步驟操作；
- 將類添加
team-select到 Teams 下拉串列。稍后我們將使用它來系結我們的事件。
@Html.DropDownListFor(m => m.RepairObj.Repair.TeamId, Model.RepairObj.TeamList, "- Please select a Team -", new { @class = "form-control team-select"})
- 使用它作為您的修復下拉選單。在每個選項中，我都使用了資料屬性；
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到下面的代碼。
public List<RepairType> GetRepairTypeListForDropDown()
{
return _db.RepairType.ToList();
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/440789.html