C# Web API遍历POST数据数组生成对齐HTML表格实现问题

安全阿岳

2026-10-3

问题根因

你当前的代码存在两个核心逻辑问题：

拼接HTML行时，Obj1和Obj2的每个元素都单独生成了一行<tr>，且每行仅包含一个<td>，导致所有内容都堆积在表格第一列
没有将Obj1和Obj2的元素按索引对应，放在同一行的两个<td>节点中

调整方案

先从提交的数据中把所有Obj1、Obj2的元素分别汇总到两个独立的列表中，再取两个列表的最大长度作为总行数，逐行生成包含两列内容的<tr>节点即可，同时兼容两个列表长度不一致的边界场景。

调整后代码

public string POST([FromBody] MyData data)
{
    // 先汇总所有Obj1和Obj2的元素到独立列表
    List<string> allObj1Items = new List<string>();
    List<string> allObj2Items = new List<string>();
    foreach (var item in data.Submitter)
    {
        if (item.Obj1 != null)
        {
            allObj1Items.AddRange(item.Obj1);
        }
        if (item.Obj2 != null)
        {
            allObj2Items.AddRange(item.Obj2);
        }
    }

    // 取最大长度作为总行数
    int maxRowCount = Math.Max(allObj1Items.Count, allObj2Items.Count);
    string tbodyContent = string.Empty;
    for (int i = 0; i < maxRowCount; i++)
    {
        string obj1Val = i < allObj1Items.Count ? allObj1Items[i] : string.Empty;
        string obj2Val = i < allObj2Items.Count ? allObj2Items[i] : string.Empty;
        tbodyContent += $"<tr><td>{obj1Val}</td><td>{obj2Val}</td></tr>";
    }

    string body = @$"<table>
<thead>
<tr>
    <th>Object 1</th>
    <th>Object 2</th>
</tr>
</thead>
<tbody>
{tbodyContent}
</tbody>
</table>";

    return body;
}