making drop down menu and tabs dynamic

Question

I have a drop-down menu that displays different tabs on the same cshtml page.

Each tab displays a list of basketball players.
Issue: all tabs are displaying the same list. (The age group 7and8). The 9-10 tab and 11-12 tab should contain their own list.
using: bootstrap for the dropdown tabs and mvc-3

The drop down tab:

_Displayeach partial:

@model List

@{    
    if (Model != null && Model.Any())
    {
        foreach(League i in Model)
        {
            foreach (MMLeagueParticipant mmLeagueParticipant in i.allParticipants)
            {
                @mmLeagueParticipant.child.ParticipantFirstName @mmLeagueParticipant.child.ParticipantLastName
            }  
        }
    }
    else
    {
        the list is empty
    }
}

What I tried:

tested to make sure if the tabs were displaying different information: I added the age group numbers for each tab

7-8 //how I know each tab is different
@{
    
            
    
}

where I believe my issue may be:

since each tab was different this leads me to believe it may have something to do with my controller and how I pass the list back. I'm fairly new to mvc framework

    [HttpGet]
[Route("roster/basketball")]
public async Task GetBasketballRoster()
{
    String[] leagueNames = new[]
    {
        "7and8",
        "9and10",
        "11and12"
    };
    List bbLeagues = await db.Leagues
    .Where( l => l.sport == "Basketball" )
    .Where( l => leagueNames.Contains( l.ageRange ) )
    .ToListAsync();

    foreach( League league in bbLeagues )
    {
        List leagueParticipants = await db.Entry( league )
            .Collection( l => l.allParticipants )
            .Query() // <-- This is needed to allow for `Include()`
            .Include( mmp => mmp.child )
            .ToListAsync();
    }
    return View("RosterPageBasketball", bbLeagues);
}

public class RosterPageViewModel
{
    public RosterPageViewModel(IReadOnlyDictionary< String, League > leagues)
    {
        this.Leagues = leagues ?? throw new ArgumentNullException(nameof(leagues));
    }
    public IReadOnlyDictionary< String, League > Leagues { get; }
}

My league model:

int LeagueId { get; set; }
string sport { get; set; }
string gender { get; set; }
string ageRange { get; set; }
List allParticipants  { get; set; }

My ViewModel model:

public List allParticipants { get; set; }
public ViewModel.Participant participant { get; set; }

public class Participant
{
int ParticipantId { get; set; }
string ParticipantFirstName { get; set; }
string ParticipantLastName { get; set; }
string ParticipantGender { get; set; }
SystemDateTime ParticipantDOB { get; set; }
List all Leagues { get; set; }
}

My MMLeagueParticipant middle table for the league model and ViewModel.Participant:

int MMLeaugeParticipantId { get; set; }
int ParticipantId { get; set; }
int LeaugeId { get; set; }
leauge sport { get; set; }
ViewModel.Participant child { get; set; }

user_4771606 · Answer

In your code you miss to pass the legue to each tab page. Is not enough to render the partial, you also need to give to each partial a specific model.

step is to define a ViewModel for you view

public class LeagueViewModel
{
    //model for each tab
    public List Leagues { get; set; }
}

query data in the controller and return the viewmodel

public async Task Get(YourDbContext db, string[] leagueNames)
    {
        var leagues =await db.Legues
            .Include(x => x.Child)
            .Where(l => l.Sport == "Basketball")
            .Where(l => leagueNames.Contains(l.AgeRange))
            .ToListAsync();

        return new LeagueViewModel
        {
            Leagues = leagues
        };
    }

then in your view, you can loop model.Legues and display the partial

        foreach (var league in Model.Leagues)
        {
            @await Html.PartialAsync("_PartialName", league)
        }

user_13593736 · Answer

You can try to pass a Dictionary> to view,and get list from dictionary to pass it to partial view with leagueName.Here is a working demo:

action:

[HttpGet]
[Route("roster/basketball")]
public IActionResult GetBasketballRoster()
        {
            string[] leagueNames = new[]
            {
                "7and8",
                "9and10",
                "11and12"
            };
            Dictionary> d = new Dictionary>();
            foreach (var name in leagueNames)
            {
                List bbLeagues = await db.Leagues
                .Where(l => l.sport == "Basketball")
                .Where(l => l.ageRange==name)
                .ToListAsync();

                foreach (League league in bbLeagues)
                {
                    List leagueParticipants = await db.Entry(league)
                        .Collection(l => l.allParticipants)
                        .Query() // <-- This is needed to allow for `Include()`
                        .Include(mmp => mmp.child)
                        .ToListAsync();
                }
                d.Add(name,bbLeagues);
            }
           
            return View(d);
        }

View:

@model Dictionary>

    
        
            
                
                    b-Age
                    
                        7-8
                        9-10
                        11-12
                    
                
            
            
                
                    
                        @await Html.PartialAsync("_Displayeach", Model["7and8"])
                    
                
                
                    
                        @await Html.PartialAsync("_Displayeach", Model["9and10"])
                    
                
                
                    
                        @await Html.PartialAsync("_Displayeach", Model["11and12"])

making drop down menu and tabs dynamic

2 Answers