使下拉菜单和选项卡动态

Question

我有一个下拉菜单，在同一个cshtml页面上显示不同的选项卡。

每个选项卡都显示一个篮球players.

• Issue:列表，所有选项卡都显示相同的列表。(年龄分别为7和8岁)。9-10选项卡和11-12选项卡应该包含它们自己的列表。

• 使用:引导下拉选项卡和mvc-3

。

下拉选项卡：

    <div class="col-9">
    <div class="tab-content" id="v-pills-tabContent">
        <div class="tab-pane fade show active" id="v-pills-boy" role="tabpanel" aria-labelledby="v-pills-boy-tab">
            <nav>
                <ul class="nav nav-tabs nav-justified" id="nav-tab" role="tablist">
                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">b-Age</a>
                    <li class="dropdown-menu">
                        <a class="dropdown-item nav-link" id="bbM7and8-tab" data-toggle="tab" href="#bbM7and8" role="tab" aria-controls="bbM7and8" aria-selected="false">7-8</a>
                        <a class="dropdown-item nav-link" id="bbM9and10-tab" data-toggle="tab" href="#bbM9and10" role="tab" aria-controls="bbM9and10" aria-selected="false">9-10</a>
                        <a class="dropdown-item nav-link" id="bbM11and12-tab" data-toggle="tab" href="#bbM11and12" role="tab" aria-controls="bbM11and12" aria-selected="false">11-12</a>
                        </li>
                </ul>
            </nav>
            <div class="tab-content" id="nav-tabContent">
                <div class="tab-pane fade" id="bbM7and8" role="tabpanel" aria-labelledby="bbM7and8-tab">
                    @{
                        <div>
                            <partial name="_Displayeach"/>
                        </div>
                    }
                <div class="tab-pane fade" id="bbM9and10" role="tabpanel" aria-labelledby="bbM9and10-tab">{...}</div>
                <div class="tab-pane fade" id="bbM11and12" role="tabpanel" aria-labelledby="bbM11and12-tab">{...}</div>
            </div>
        </div>

_Displayeach部分：

@model List<League>

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

我尝试了什么：

测试以确保选项卡是否显示不同的信息:我为每个选项卡添加了年龄组编号。

7-8 //how I know each tab is different
@{
    <div>
            <partial name="_Displayeach"/>
    </div>
}

，我认为我的问题可能是：

因为每个选项卡是不同的，这使我相信它可能与我的控制器和我如何把列表传回有关。我对mvc框架相当陌生

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

    foreach( League league in bbLeagues )
    {
        List<MMLeagueParticipant> 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; }
}

我的联盟模型：

int LeagueId { get; set; }
string sport { get; set; }
string gender { get; set; }
string ageRange { get; set; }
​List<MMLeagueParticipant> allParticipants  { get; set; }

我的ViewModel模型：

public List<Participant> 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<MMLeagueParticipant> all Leagues { get; set; }
}

我的MMLeagueParticipant中位联赛模型和ViewModel.Participant：

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

Answer 1

您可以尝试将一个Dictionary<string, List<League>>传递给视图，并从字典中获取列表，以便使用leagueName.Here将其传递给部分视图，这是一个工作演示：

行动：

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

                foreach (League league in bbLeagues)
                {
                    List<MMLeagueParticipant> 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);
        }

查看：

@model Dictionary<string, List<League>>
<div class="col-9">
    <div class="tab-content" id="v-pills-tabContent">
        <div class="tab-pane fade show active" id="v-pills-boy" role="tabpanel" aria-labelledby="v-pills-boy-tab">
            <nav>
                <ul class="nav nav-tabs nav-justified" id="nav-tab" role="tablist">
                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">b-Age</a>
                    <li class="dropdown-menu">
                        <a class="dropdown-item nav-link" id="bbM7and8-tab" data-toggle="tab" href="#bbM7and8" role="tab" aria-controls="bbM7and8" aria-selected="false">7-8</a>
                        <a class="dropdown-item nav-link" id="bbM9and10-tab" data-toggle="tab" href="#bbM9and10" role="tab" aria-controls="bbM9and10" aria-selected="false">9-10</a>
                        <a class="dropdown-item nav-link" id="bbM11and12-tab" data-toggle="tab" href="#bbM11and12" role="tab" aria-controls="bbM11and12" aria-selected="false">11-12</a>
                    </li>
                </ul>
            </nav>
            <div class="tab-content" id="nav-tabContent">
                <div class="tab-pane fade" id="bbM7and8" role="tabpanel" aria-labelledby="bbM7and8-tab">
                    <div>
                        @await Html.PartialAsync("_Displayeach", Model["7and8"])
                    </div>
                </div>
                <div class="tab-pane fade" id="bbM9and10" role="tabpanel" aria-labelledby="bbM9and10-tab">
                    <div>
                        @await Html.PartialAsync("_Displayeach", Model["9and10"])
                    </div>
                </div>
                <div class="tab-pane fade" id="bbM11and12" role="tabpanel" aria-labelledby="bbM11and12-tab">
                    <div>
                        @await Html.PartialAsync("_Displayeach", Model["11and12"])
                    </div>
                </div>
            </div>
           
        </div>
    </div>
</div>

Answer 2

在您的代码中，您忽略了将legue传递给每个选项卡页。不足以渲染该部分，您还需要给每个部分提供一个特定的模型。

1. 步骤是为您的视图定义ViewModel

每个选项卡公共列表的公共类LeagueViewModel { //model { get；set；}

1. 查询控制器中的数据并返回视图模型

公共异步任务Get(YourDbContext db，string[] leagueNames) { var leagues =等待db.Legues .Include(x => x.Child) .Where(l => l.Sport ==“篮球”) .Where(l => leagueNames.Contains(l.AgeRange)) .ToListAsync()；返回新的LeagueViewModel { leagues = Leagues }；}l.AgeRange

1. 然后在您的视图中，您可以循环model.Legues并显示部分

{ @await Html.PartialAsync("_PartialName"，league) }