如何将数据库中的进化进度父子表传递至ASP.NET MVC视图

我之前处理过类似的树形数据横向展示需求，给你分享下具体的实现步骤，分后端数据整理和前端视图渲染两部分来搞：

1. 后端：把树形数据转成链条列表 #

首先得从数据库把所有数据读出来，然后为每个根节点（ParentID为NULL的记录）构建完整的进化链条。用字典做ID映射能避免重复查询，效率更高。

// 假设你的实体类定义如下
public class Evolution
{
    public string EvolutionID { get; set; }
    public string ParentID { get; set; }
    public string OtherFields { get; set; } // 对应你的otherFields字段
}

public class EvolutionController : Controller
{
    private readonly YourDbContext _dbContext; // 替换成你的实际DbContext

    public EvolutionController(YourDbContext dbContext)
    {
        _dbContext = dbContext;
    }

    public IActionResult Index()
    {
        // 读取所有进化记录
        var allEvolutions = _dbContext.Evolutions.ToList();
        // 构建ID到实体的映射字典，快速查找子节点
        var evolutionMap = allEvolutions.ToDictionary(e => e.EvolutionID);
        // 筛选出所有根节点
        var rootNodes = allEvolutions.Where(e => e.ParentID == null).ToList();

        // 为每个根节点生成完整的进化链条
        var evolutionChains = new List<List<Evolution>>();
        foreach (var root in rootNodes)
        {
            var currentChain = new List<Evolution>();
            var currentNode = root;
            
            // 循环遍历直到没有子节点为止
            while (currentNode != null)
            {
                currentChain.Add(currentNode);
                // 查找当前节点的子节点（ParentID等于当前节点ID的记录）
                currentNode = allEvolutions.FirstOrDefault(e => e.ParentID == currentNode.EvolutionID);
            }
            
            evolutionChains.Add(currentChain);
        }

        return View(evolutionChains);
    }
}

2. 前端：Razor视图渲染横向表格 #

在视图里遍历每个链条，渲染成两行：第一行显示EvolutionID，第二行显示对应的OtherFields，再用分隔线区分不同链条。

@model List<List<Evolution>>

<div class="evolution-wrapper">
    @foreach (var chain in Model)
    {
        <table class="evolution-table">
            <!-- 第一行：EvolutionID -->
            <tr>
                @foreach (var item in chain)
                {
                    <td>@item.EvolutionID</td>
                }
            </tr>
            <!-- 第二行：其他字段 -->
            <tr>
                @foreach (var item in chain)
                {
                    <td>@item.OtherFields</td>
                }
            </tr>
        </table>
        <!-- 模拟你要的分隔线 -->
        <hr class="chain-divider" />
    }
</div>

<style>
    .evolution-table {
        border-collapse: collapse;
        margin: 10px 0;
        width: auto;
    }
    .evolution-table td {
        border: 1px solid #ddd;
        padding: 8px 15px;
        text-align: center;
    }
    .chain-divider {
        border: none;
        border-top: 2px solid #333;
        margin: 20px 0;
    }
</style>

额外提示 #

• 如果你的进化链条存在分支（一个节点多个子节点），需要调整后端的链条生成逻辑，不过看你的示例数据是线性结构，当前逻辑完全适用。
• 数据量较大时，记得给ParentID字段加数据库索引，提升查询效率。
• 样式部分可以根据你的UI需求自由调整，比如边框颜色、单元格间距等。

内容的提问来源于stack exchange，提问作者Juan Carlos Oropeza