ASP.NET Core 分部视图已正确接收数据但无法正常渲染显示问题求助

问题根因 #

1. 初始渲染主视图时，你直接调用<partial name="_Roster" />没有传入模型参数，此时Model.AllPlayers为空，分部视图中#RosterByYear元素不会被渲染到DOM中，Ajax回调执行$("#RosterByYear").html(data)时找不到对应的DOM元素，自然无法插入内容。
2. 就算初始状态#RosterByYear存在，你把包含#RosterByYear的完整分部视图内容插入到现有#RosterByYear内部，会导致ID重复、DOM结构嵌套错误，同样会引发渲染异常。

解决方案 #

步骤1：修改主视图代码 #

把#RosterByYear容器移到主视图中，作为分部视图的固定挂载容器：

<!-- 主视图代码 -->
<div id="RosterByYear">
    <partial name="_Roster" />
</div>

步骤2：修改分部视图代码 #

移除分部视图内的#RosterByYearID定义，只保留内容结构：

@model Centerville_Football.ViewModels.RosterViewModel

<div class="table">
    <div class="thead">
        <p>#</p>
        <p>Last Name</p>
        <p>First Name</p>
        <p>Position</p>
        <p>Class</p>
        <p>Height</p>
        <p>Weight</p>
    </div>
    @if (Model?.AllPlayers != null && Model.AllPlayers.Any())
    {
        <div class="tbody">
            @foreach (var player in Model.AllPlayers)
            {
            <div class="row">
                <p class="number">@player.Number</p>
                <p class="name">@player.LastName</p>
                <p class="name">@player.FirstName</p>
                <p class="position">@player.Position</p>
                <p class="class">@player.Class</p>
                <p class="height">@player.Height</p>
                <p class="weight">@player.Weight</p>
            </div>
            }
        </div>
    }
    else
    {
        <div class="tbody">
            <p>暂无对应阵容的球员数据</p>
        </div>
    }
</div>

步骤3：可选优化控制器代码 #

无需手动遍历匿名类转视图模型，可在LINQ查询中直接映射，简化代码：

[HttpGet]
public IActionResult _Roster(int RosterId)
{
    var AllPlayers = (from Player in _db.Players
        join RosterPlayers in _db.RosterPlayers on Player.Id equals RosterPlayers.PlayerId
        join Roster in _db.Rosters on RosterPlayers.RosterId equals Roster.RosterId
        where Roster.RosterId == RosterId
        select new PlayerViewModel
        {
            PlayerId = Player.Id,
            FirstName = Player.FirstName,
            LastName = Player.LastName,
            Number = RosterPlayers.Number,
            Position = RosterPlayers.Position,
            Height = RosterPlayers.Height,
            Weight = RosterPlayers.Weight,
            Class = RosterPlayers.Class,
            RosterId = Roster.RosterId
        }).ToList();

    RosterViewModel rvm = new RosterViewModel();
    rvm.AllPlayers = AllPlayers;

    return PartialView(rvm);
}

原有Ajax代码逻辑无需修改，即可正常渲染球员列表。

内容的提问来源于stack exchange，提问作者dylpickle912