如何将嵌套foreach获取的数据存储为层级结构并渲染嵌套HTML？

1. 扩展模型类，添加层级关联属性 #

首先给现有模型添加嵌套属性，用来存储关联的子级数据：

修改TestSuiteModel中的Value类 #

namespace ABC.Models.TestSuiteModel
{
    public class Value
    {
        // 原有属性保持不变
        public int id { get; set; }
        public string name { get; set; }
        public string url { get; set; }
        // ...其他原有属性
        
        // 添加存储关联测试用例集合的属性
        public List<ABC.Models.TestCasesModel.Value> TestCases { get; set; } = new List<ABC.Models.TestCasesModel.Value>();
    }
}

修改TestCasesModel中的Value类 #

namespace ABC.Models.TestCasesModel
{
    public class Value
    {
        // 原有属性保持不变
        public TestCase testCase { get; set; }
        public List<PointAssignment> pointAssignments { get; set; }
        
        // 添加存储关联测试用例详情的属性
        public ABC.Models.TestCaseModel.TestCaseModel TestCaseDetail { get; set; }
    }
}

2. 修改数据获取逻辑，构建层级结构 #

更新GetTestSuites方法，把获取到的子级数据直接赋值到对应的父级属性中，替换原来的独立变量存储方式：

// 仅保留顶层测试套件变量即可
TestSuiteModel TestSuites;

public async Task GetTestSuites()
{
    string url = "https://dev.azure.com/****/****/_apis/test/Plans/12/suites?api-version=5.0";
    TestSuites = await TestSuiteService.GetTestSuites(url);

    if(TestSuites != null)
    {
        foreach (var ts in TestSuites.value)
        {
            var testCases = await TestCasesService.GetTestCases(ts.testCasesUrl);
            if (testCases?.value != null)
            {
                // 将测试用例集合绑定到当前测试套件
                ts.TestCases = testCases.value;
                
                foreach (var tcs in ts.TestCases)
                {
                    // 将测试用例详情绑定到当前测试用例
                    tcs.TestCaseDetail = await TestCaseService.GetTestCase(tcs.testCase.url);
                }
            }
        }
    }
}
 
protected override async Task OnInitializedAsync()
{
    await this.GetTestSuites();
    await base.OnInitializedAsync();
}

3. 嵌套渲染HTML #

在Blazor组件的渲染部分，用嵌套foreach循环生成层级化列表：

@if (TestSuites?.value != null && TestSuites.value.Any())
{
    <ul class="test-suites-list">
        @foreach (var suite in TestSuites.value)
        {
            <li>
                <div>@suite.name (ID: @suite.id)</div>
                
                @if (suite.TestCases?.Any() == true)
                {
                    <ul class="test-cases-list">
                        @foreach (var testCase in suite.TestCases)
                        {
                            <li>
                                <div>测试用例ID: @testCase.testCase.id</div>
                                
                                @if (testCase.TestCaseDetail != null)
                                {
                                    <ul class="test-case-detail-list">
                                        <li>标题: @testCase.TestCaseDetail.fields.SystemTitle</li>
                                        <li>状态: @testCase.TestCaseDetail.fields.SystemState</li>
                                        <li>优先级: @testCase.TestCaseDetail.fields.MicrosoftVSTSCommonPriority</li>
                                        <li>指派给: @testCase.TestCaseDetail.fields.SystemAssignedTo?.displayName</li>
                                        <!-- 可按需添加更多展示字段 -->
                                    </ul>
                                }
                            </li>
                        }
                    </ul>
                }
            </li>
        }
    </ul>
}
else
{
    <p>暂无测试套件数据</p>
}

可根据需求添加CSS类调整层级缩进和样式，优化展示效果。

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