Cascading html.DropDownListFor in .net core Razor Pages-CodePudding

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. 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. 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.

In short I have to db tables. One called Team and one called RepairType. Each repairtype is done by one of the teams.

So my Model looks like this:

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:

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:

<div >
                <div >
                    <label asp-for="RepairObj.Repair.TeamId"></label>
                </div>
                <div >
                    @Html.DropDownListFor(m => m.RepairObj.Repair.TeamId, Model.RepairObj.TeamList, "- Please select a Team -", new { @class = "form-control", @onchange = "javascript:GetType(this.value);" })
                    <span  asp-validation-for="RepairObj.Repair.TeamId"></span>
                </div>
            </div>
            <div >
                <div >
                    <label asp-for="RepairObj.Repair.RepairTypeId"></label>
                </div>
                <div >
                    @Html.DropDownListFor(m => m.RepairObj.Repair.RepairTypeId, Model.RepairObj.RepairTypeList, "- Please select a Repair Type -", new { @class = "form-control" })
                    <span  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.

CodePudding user response：

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;

Add the class team-select to Teams dropdown. 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"})

Use this as your Repair dropdown. In each option, I used data-attribute; 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" >
   <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>

Then use this script.

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

Update GetRepairTypeListForDropDown to the code below.

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