C# Web API：迭代数组并追加到 HTML 表
Posted
技术标签:
【中文标题】C# Web API：迭代数组并追加到 HTML 表【英文标题】：C# Web API: Iterating Array and Append to HTML table 【发布时间】：2021-11-18 16:36:35 【问题描述】：我正在尝试创建一个 POST 端点，如果成功，它将发送一封带有 POST 数据的 html 电子邮件。我正在努力尝试迭代 JSON 对象数组并将该数据附加到 HTML 表中。
JSON 数据：
"Submitter":[
"Obj1":[
"test",
"test2"
]
,
"Obj2":[
"test3",
"test4"
]
]
测试控制器：
public class Testing2Controller : ControllerBase
public class Submitter
public List<string> Obj1 get; set;
public List<string> Obj2 get; set;
public class MyData
public List<Submitter> Submitter get; set;
public string POST([FromBody] MyData data)
string composeTableObj1 = @"";
string composeTableObj2 = @"";
foreach (var item in data.Submitter)
composeTableObj1 += $"<tr>"; //start row tag
//Column 1 Obj1 data
if (item.Obj1 != null)
foreach (var objItem in item.Obj1)
composeTableObj1 += $"<td>objItem</td>";
//Column 2 Obj2 data
if (item.Obj2 != null)
foreach (var objItem in item.Obj2)
composeTableObj1 += $"<td>objItem</td>";
composeTableObj1 += $"</tr>"; //end row tag
string body = @$"<table>
<thead>
<tr>
<th>Object 1</th>
<th>Object 2</th>
</tr>
</thead>
<tbody>
composeTableObj1
</tbody>
</table>
";
return body;
上面的代码给了我以下不想要的结果：
| Object 1 | Object 2 |
|----------|----------|
| test | test2 |
| test3 | test4 |
这是我想要的结果：
| Object 1 | Object 2 |
|----------|----------|
| test | test3 |
| test2 | test4 |
在这个问题上卡住了很长一段时间，TIA！
【问题讨论】：
***.com/questions/51075865/… 请通过此链接。 @AmalPs 你链接的帖子与我的问题完全无关 循环中的字符串连接效率非常低，因为它会在内存中产生大量垃圾。因此，您需要使用 StringBuilder，或者直接写入输出流。或者，您可以使用System.Xml.Linq 命名空间中的 XElement 类的功能 - 这将允许您以面向对象的样式创建 html。另一种方法是使用 Razor 在视图中创建 html。您选择了最糟糕的方式，效率低下，容易出错且难以维护。
【参考方案1】：
看起来您的 HTML 有点偏离 - 编写这样的 HTML 可能很乏味。我猜测基于 HTML 中的硬编码表头和 Submitter 类的结构，您的 JSON 中只会有两个 Objn 项目。如果这是真的，您可以放弃 foreach 循环而使用 for 循环，并使用循环迭代器从 data.Submitter[n] 中获取值：
public string Post([FromBody] MyData data)
string composeTableObj = "";
for (int i = 0; i < data.Submitter.Count(); i++)
composeTableObj += $"<tr>"; //start row tag
composeTableObj += $"<td>data.Submitter[0].Obj1[i]</td>";
composeTableObj += $"<td>data.Submitter[1].Obj2[i]</td>";
composeTableObj += $"</tr>"; //end row tag
return @$"<table><thead><tr><th>Object 1</th><th>Object 2</th></tr></thead><tbody>composeTableObj</tbody></table>";
渲染：
返回的 HTML：
<table><thead><tr><th>Object 1</th><th>Object 2</th></tr></thead><tbody><tr><td>test</td><td>test3</td></tr><tr><td>test2</td><td>test4</td></tr></tbody></table>显然，这不是很动态。如果您发现需要更多 Objn，则需要更新 Submitter 类，并且必须在循环中添加代码（并为您的 HTML 添加另一个标题）。
如果Obj 数组中有更多项目，您可以执行以下操作：
public string Post([FromBody] MyData data)
string composeTableObj = "";
int obj1Count = data.Submitter[0].Obj1.Count;
int obj2Count = data.Submitter[1].Obj2.Count;
int loopCount = obj1Count >= obj2Count ? obj1Count : obj2Count;
for (int i = 0; i < loopCount; i++)
string obj1String = obj1Count <= i ? " " : data.Submitter[0].Obj1[i];
string obj2String = obj2Count <= i ? " " : data.Submitter[1].Obj2[i];
composeTableObj += $"<tr>"; //start row tag
composeTableObj += $"<td>obj1String</td>";
composeTableObj += $"<td>obj2String</td>";
composeTableObj += $"</tr>"; //end row tag
return @$"<table><thead><tr><th>Object 1</th><th>Object 2</th></tr></thead><tbody>composeTableObj</tbody></table>";
这首先获取您的Obj 列表之间的两个.Count 中的较大者以设置循环条件，然后执行索引边界检查。如果objnCount 小于或等于i，则将其设置为空格，否则取其各自Obj 列表的值。 Obj2 中有 6 项，Obj1 中只有 2 项，HTML 如下所示：
返回的 HTML：
<table><thead><tr><th>Object 1</th><th>Object 2</th></tr></thead><tbody><tr><td>test</td><td>test3</td></tr><tr><td>test2</td><td>test4</td></tr><tr><td> </td><td>test5</td></tr><tr><td> </td><td>test6</td></tr><tr><td> </td><td>test7</td></tr><tr><td> </td><td>test8</td></tr></tbody></table>【讨论】：
这很棒，虽然就像你说的那样，它不是很有活力。例如，如果Obj1 JSON array 中有更多值，则不会渲染它，因为它只会循环直到data.Submitter.Count 结束。如果Obj1 or Obj2 arrays 包含更多值，有没有办法让它更有活力？
@ayushlal 您可以获得 Obj1 或 Obj2 中项目的最高计数并将其用作循环条件，并对相应 Obj 列表中的每个索引执行计数检查。如果i 是> 则Obj 的计数，然后为<td> 插入一个空白字符串，否则插入它的值。我假设空白不会抛出 HTML。插入" " 可能更安全因此，如果 Obj1 有 5 个项目，而 Obj2 有 6 个项目，则您将循环 6 次，而在第 6 次迭代中，data.Submitter[0].Obj1[i] 将超出范围，因此为其插入一个空格。跨度>
非常感谢，我在想同样的事情。如果可以，请更新您的答案，那将是很棒的！
@ayushlal 看起来可以工作。以上是关于C# Web API：迭代数组并追加到 HTML 表的主要内容，如果未能解决你的问题，请参考以下文章