浏览器在页面完全加载之前添加关闭标签答案

【问题标题】：Browser adds close tag before page fully loaded浏览器在页面完全加载之前添加关闭标签
【发布时间】：2020-07-11 11:20:40
【问题描述】：

我正在尝试动态创建一个 div，其中包含 3 个其他 div，但是，浏览器会在 blazor 结束注入代码之前自动添加关闭标记，这很烦人。有没有办法防止这种情况发生？

int i = 1;

foreach (itemModel item in itemList)
{
  if (i == 1)
  {
    @((MarkupString)"<div>");
  }

  <div></div>

  if (i == 3)
  {
    @((MarkupString)"</div>");
    i = 0;
  }

  i++;
}

想要的输出

<div> <- Parent
  <div></div> <- Child
  <div></div> <- Child
  <div></div> <- Child
</div>

实际输出

  <div></div> <- Parent
  <div></div> <- Child
  <div></div> <- Child
  <div></div> <- Child

有解决办法吗？

【问题讨论】：

“实际输出”是什么意思 - 服务器的 HTML 输出（如网络选项卡/源中所示）或浏览器在“检查元素”中显示的内容？
@AlexeiLevenkov 我所说的“实际输出”是指浏览器如何显示元素
您真的应该查看原始 HTML 以了解代码是否呈现了您不期望的内容，或者浏览器正在修复您喜欢的 HTML。旁注：我会简单地使用嵌套循环并正常渲染开始/结束div（for (all; i+=3){ <div> for (0; i <3; i++) { render(start+i)} </div>}...
@AlexeiLevenkov 我用了你的想法，做了一些改变，它奏效了。您可以将其发布为答案，如果您愿意，我会将其标记为解决方案。谢谢！
我看到你已经解决了这个问题 - 只是想解释一下 Blazor 的 MarkupString 不会让你创建未封闭的元素 - 这就是你看到这种行为的原因。

标签： c# html blazor blazor-server-side asp.net-blazor

【解决方案1】：

不知道你为什么把它复杂化了......

<div> <!-- parent -->
@foreach (itemModel item in itemList)
{
   <div></div><!-- child -->
}
</div>

当然，除非问题不完整

【讨论】：

问题明确说每个父母必须拥有3个孩子
您的问题不清楚问题的性质和示例的复杂性。它可能应该是“我有一个包含不同数量元素的项目列表，我需要用外部 div 标记包装每三个元素。示例可以是 ``

child
child

child

child

child

child

```

【解决方案2】：

简单的代码就是好代码。

不要编写 MarkupString，而是告诉编译器何时添加标签。 MarkupString 应保留用于呈现包含标记（通常来自数据库的未知标记）的文本

@foreach (var item in new List<string>() { "1", "2", "3" })
{
    int i = 0;
    <div>
        <p>parent @item</p>
        @while (i < 3) {
            <div><p>child @i</p></div>
            i++;
        }
    </div>
}

【讨论】：

这与我所寻找的非常不同，但是，我找到了一个适合我需要的简单代码解决方案。谢谢！

【解决方案3】：

它发送许多步骤来添加元素，而不是加入单个 HTML 字符串

MarketString的逻辑更像

document.body.innerHTML="";
var c=document.createElement("container")
c.innerHTML="<div>"
while(c.firstChild)document.body.appendChild(c.firstChild);
alert(document.body.innerHTML)


when you send the "<div>" , it will be auto fixed to a full element in the dom tree immediately. 

later you send "</div>" will take no effect

【讨论】：

是的，这就是我正在努力解决的问题。经过一番思考，我终于找到了一个可行的解决方案