.NET Core 2.0 Razor Pages钻取功能实现技术咨询

嘿，从WPF转来学Razor Pages的朋友，很高兴能帮你解决钻取式数据展示的问题！你想要的那种点击展开/收起查看子条目的效果，在Razor Pages里其实不难实现，我给你一步步拆解怎么做。

1. 先明确数据结构（优化建议） #

你当前用的List<Tuple<HighLevelOutput, List<HighLevelOutput>>>虽然能工作，但可读性一般。我建议先封装一个自定义类替代Tuple，代码会更直观：

// 先补全你的HighLevelOutput结构体
public struct HighLevelOutput 
{ 
    public string CorpCustomer { get; set; }
    // 假设还有这些业务属性（你可以根据实际调整）
    public decimal TotalAmount { get; set; }
    public int OrderCount { get; set; }
}

// 封装钻取项的类（替代Tuple）
public class DrillDownGroup
{
    public HighLevelOutput Summary { get; set; } // 顶层摘要数据
    public List<HighLevelOutput> Details { get; set; } // 子条目列表
}

2. 在PageModel中准备数据 #

在你的Razor Page后台代码（比如Index.cshtml.cs）里，把数据绑定到页面可访问的属性上：

public class IndexModel : PageModel
{
    public List<DrillDownGroup> DrillDownData { get; set; }

    public void OnGet()
    {
        // 模拟数据源，实际项目中替换为从数据库/接口获取
        DrillDownData = new List<DrillDownGroup>
        {
            new DrillDownGroup
            {
                Summary = new HighLevelOutput { CorpCustomer = "客户A", TotalAmount = 15000, OrderCount = 5 },
                Details = new List<HighLevelOutput>
                {
                    new HighLevelOutput { CorpCustomer = "客户A-子项1", TotalAmount = 5000, OrderCount = 2 },
                    new HighLevelOutput { CorpCustomer = "客户A-子项2", TotalAmount = 10000, OrderCount = 3 }
                }
            },
            new DrillDownGroup
            {
                Summary = new HighLevelOutput { CorpCustomer = "客户B", TotalAmount = 8000, OrderCount = 3 },
                Details = new List<HighLevelOutput>
                {
                    new HighLevelOutput { CorpCustomer = "客户B-子项1", TotalAmount = 8000, OrderCount = 3 }
                }
            }
        };
    }
}

3. 前端HTML+Razor语法实现钻取布局 #

在.cshtml页面里，用表格展示顶层摘要，嵌套子表格放子条目，默认隐藏子项：

<table class="table table-bordered">
    <thead>
        <tr>
            <th></th> <!-- 展开/收起按钮列 -->
            <th>企业客户</th>
            <th>总金额</th>
            <th>订单数</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var group in Model.DrillDownData)
        {
            <!-- 顶层摘要行 -->
            <tr class="summary-row" data-target-id="details-@group.Summary.CorpCustomer.GetHashCode()">
                <td>
                    <button class="btn btn-sm btn-outline-secondary toggle-btn">+</button>
                </td>
                <td>@group.Summary.CorpCustomer</td>
                <td>@group.Summary.TotalAmount.ToString("C")</td>
                <td>@group.Summary.OrderCount</td>
            </tr>
            <!-- 子条目行，默认隐藏 -->
            <tr class="details-row" id="details-@group.Summary.CorpCustomer.GetHashCode()" style="display: none;">
                <td colspan="4">
                    <table class="table table-sm table-striped ml-4">
                        <thead>
                            <tr>
                                <th>子项客户</th>
                                <th>金额</th>
                                <th>订单数</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (var detail in group.Details)
                            {
                                <tr>
                                    <td>@detail.CorpCustomer</td>
                                    <td>@detail.TotalAmount.ToString("C")</td>
                                    <td>@detail.OrderCount</td>
                                </tr>
                            }
                        </tbody>
                    </table>
                </td>
            </tr>
        }
    </tbody>
</table>

4. 用JavaScript实现展开/收起交互 #

在页面底部添加脚本，处理按钮点击事件：

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const toggleButtons = document.querySelectorAll('.toggle-btn');
        
        toggleButtons.forEach(btn => {
            btn.addEventListener('click', function() {
                const summaryRow = this.closest('.summary-row');
                const targetId = summaryRow.getAttribute('data-target-id');
                const detailsRow = document.getElementById(targetId);
                
                // 切换显示状态和按钮文本
                if (detailsRow.style.display === 'none') {
                    detailsRow.style.display = 'table-row';
                    this.textContent = '-';
                } else {
                    detailsRow.style.display = 'none';
                    this.textContent = '+';
                }
            });
        });
    });
</script>

5. 可选：添加样式优化 #

加一点CSS让交互更友好，贴合Web场景：

<style>
    .summary-row {
        cursor: pointer;
        background-color: #f8f9fa;
    }
    .toggle-btn {
        padding: 0.2rem 0.4rem;
        font-size: 0.8rem;
    }
    .details-row td {
        padding: 0;
    }
</style>

给WPF转Razor的你的小提示 #

• 这个实现思路类似WPF里的TreeView，但在Web端我们用HTML表格+原生JS来实现，更轻量化。
• 如果数据量很大，建议改成异步加载子项：点击展开时通过AJAX请求后端接口获取子数据，避免页面初始加载过慢。
• 自定义类DrillDownGroup比Tuple的可读性高很多，后续维护代码会更轻松，强烈推荐使用~

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