使下拉菜单和选项卡动态化

Question

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

每个选项卡显示一个篮球运动员列表。
问题：所有选项卡都显示相同的列表。（年龄组 7 和 8）。 9-10 选项卡和 11-12 选项卡应包含自己的列表。
使用：bootstrap 用于下拉选项卡和 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>

_显示每个部分：

@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 中间 table 为联赛模型和 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

在您的代码中，您没有将 legue 传递给每个标签页。只渲染局部是不够的，还需要给每个局部一个特定的模型。

步骤是为你的视图定义一个ViewModel

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

在控制器和return视图模型中查询数据

public async Task<LeagueViewModel> 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
        };
    }

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

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

Answer 2

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

操作：

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

使下拉菜单和选项卡动态化

making drop down menu and tabs dynamic

c#

asp.net-mvc

tabs

dynamic

asp.net-core