EF Core ASP.NET MVC：一对多关系下整合列表与详情视图

1. 优化控制器Index方法，预加载关联数据 #

原Index方法未加载关联的Steps，需修改为预加载关联数据，避免N+1查询问题：

public IActionResult Index()
{
    // 预加载每个TodoList对应的Steps集合
    var todolists = _context.TodoLists
        .Include(t => t.Steps)
        .ToList();
    return View(todolists);
}

2. 重构Index视图，实现手风琴折叠效果 #

替换原Index视图代码，利用Bootstrap手风琴组件（从现有样式判断项目已引入Bootstrap），每个TodoList作为独立手风琴项，点击标题可展开/折叠对应Steps表格：

<!-- 手风琴容器 -->
<div class="accordion" id="todoAccordion">
    @foreach (var item in Model)
    {
        <!-- 手风琴项 -->
        <div class="accordion-item mb-3">
            <!-- 可点击的手风琴标题 -->
            <h2 class="accordion-header" id="heading@item.Id">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" 
                        data-bs-target="#collapse@item.Id" aria-expanded="false" aria-controls="collapse@item.Id">
                    <div class="d-flex justify-content-between w-100">
                        <span class="fw-bold">@item.Name</span>
                        <span class="text-muted">@item.Description</span>
                    </div>
                </button>
            </h2>
            <!-- 折叠内容区域 -->
            <div id="collapse@item.Id" class="accordion-collapse collapse" aria-labelledby="heading@item.Id" 
                 data-bs-parent="#todoAccordion">
                <div class="accordion-body p-0">
                    <!-- TodoList基础信息 -->
                    <div class="p-3 bg-light border-bottom">
                        <div class="row">
                            <div class="col-md-6">
                                <label class="form-label">名称</label>
                                <input type="text" class="form-control" value="@item.Name" disabled />
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">描述</label>
                                <input type="text" class="form-control" value="@item.Description" disabled />
                            </div>
                        </div>
                    </div>
                    <!-- Steps表格 -->
                    <div class="col-md-12 p-0">
                        <table class="table table-sm mb-0">
                            <thead>
                                <tr>
                                    <th>优先级</th>
                                    <th>步骤名称</th>
                                    <th style="width:75px;"></th>
                                </tr>
                            </thead>
                            <tbody>
                                @if (item.Steps.Any())
                                {
                                    @for (int i = 0; i < item.Steps.Count; i++)
                                    {
                                        <tr>
                                            <td>
                                                <input type="number" class="form-control" 
                                                       value="@item.Steps[i].Priority" disabled />
                                            </td>
                                            <td>
                                                <input type="text" class="form-control" 
                                                       value="@item.Steps[i].Name" disabled />
                                            </td>
                                            <td></td>
                                        </tr>
                                    }
                                }
                                else
                                {
                                    <tr>
                                        <td colspan="3" class="text-center text-muted">暂无步骤</td>
                                    </tr>
                                }
                            </tbody>
                        </table>
                    </div>
                    <!-- 操作按钮 -->
                    <div class="p-3 bg-light border-top">
                        <a asp-action="Edit" asp-route-id="@item.Id" class="btn btn-outline-success rounded-pill mx-2">
                            <i class="bi bi-pencil-square"></i>&nbsp;编辑
                        </a>
                        <a asp-action="Delete" asp-route-id="@item.Id" class="btn btn-outline-danger rounded-pill mx-2">
                            <i class="bi bi-trash-fill"></i>&nbsp;删除
                        </a>
                    </div>
                </div>
            </div>
        </div>
    }
</div>

关键说明 #

• 每个手风琴项使用item.Id拼接唯一标识，避免折叠逻辑冲突
• 通过Include预加载关联数据，提升页面加载性能
• 保留原有Bootstrap样式，保证视觉一致性
• 增加Steps空状态提示，优化用户体验

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