.net core Razor 页面中级联 html.DropDownListFor

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 应用程序项目，所以我真的希望有人会如此友善，并准确地告诉我该怎么做，这样我在下拉列表中只会有与团队下拉列表匹配的修复类型。

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

谢谢。

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. 使用它作为您的修复下拉列表。在每个选项中，我都使用了数据属性； 数据团队。

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