如何在ASP.NET MVC的Razor视图中基于数据库数据动态渲染Accordion手风琴

结论 #

不需要修改你当前传递到视图的IEnumerable类型模型，直接在Razor页面中用C#循环遍历集合就能实现动态生成手风琴项的需求。

具体实现 #

1. 视图模型声明 #

首先确认Razor视图顶部已经正确声明强类型模型，替换成你实际的Season类对应命名空间即可：

@model IEnumerable<你的项目命名空间.Models.Season>

2. 遍历渲染手风琴 #

这里以常用的Bootstrap Accordion组件为例，直接循环模型集合生成每个手风琴项即可，注意用seasonid动态生成唯一ID，避免折叠交互冲突：

<div class="accordion" id="seasonAccordion">
    @foreach (var seasonItem in Model)
    {
        <div class="accordion-item">
            <h2 class="accordion-header" id="heading_@seasonItem.seasonid">
                <button class="accordion-button collapsed" type="button" 
                        data-bs-toggle="collapse" 
                        data-bs-target="#collapse_@seasonItem.seasonid" 
                        aria-expanded="false" 
                        aria-controls="collapse_@seasonItem.seasonid">
                    @seasonItem.seasonName
                </button>
            </h2>
            <div id="collapse_@seasonItem.seasonid" class="accordion-collapse collapse" 
                 aria-labelledby="heading_@seasonItem.seasonid" 
                 data-bs-parent="#seasonAccordion">
                <div class="accordion-body">
                    <!-- 此处可自定义每个手风琴项的详情内容，绑定对应的season属性即可 -->
                    当前季节ID：@seasonItem.seasonid
                </div>
            </div>
        </div>
    }
</div>

补充说明 #

如果你用的是其他UI框架的Accordion组件，核心逻辑完全一致：遍历集合给每个组件项绑定对应季节对象的属性即可，不需要调整后端传递的模型结构。

内容的提问来源于stack exchange，提问作者Nguyen Tuan Anh