html - 在 MVC Razor 中使用条件逻辑创建动态 DIV 标签。标签不匹配

Question

我的代码存在一些格式问题，我在这些代码中循环遍历对象集合，并尝试生成嵌套的 DIV 容器。我相信，复杂性出现在 Razor 引擎试图将我动态发出的 CLOSING div 标签与开始标签相匹配的尝试中。谁能帮我确定以下代码中的预期行为是什么，它模仿了我自己的代码，但出于演示目的进行了极大简化。

在这个例子中，我想要一个带边框的大 OUTER DIV，其中包含 3 个不同大小的小 div(为了便于识别)。发生在我身上的是我点击的 FIRST CLOSING DIV 标签(在循环内；最后)被应用于 OUTER DIV，但我希望它应用于循环内的 LARGE DIV 标签。我希望将我的 FINAL DIV 标签(在循环外)应用于大的 OUTER DIV 标签。

结果是我的 3 个 INNER DIV 标签是在 OUTER DIV 标签之外创建的，而不是嵌套在其中。

我只想知道 Razor 如何决定哪个 DIV 标签属于哪个结束 DIV 标签，以及开发人员是否对此有任何控制。有任何想法吗？

@:<div class="myOuterDivWithBorder">

for (int j = 0; j < 3; j++)
{
   if (j == 0)
   {
      @:<div class="largeDiv">
   }
   else if (j == 1)
   {
      @:<div class="mediumDiv">
   }
   else if (j == 2)
   {
      @:<div class="smallDiv">
   }

   @:</div>
}

@:</div>


--Here's a glimpse into some of my actual code located within my for loop. Hopefully
--this illustrates why I feel I am unable to position both my opening and closing DIVs
--within the same scope ({}).
    iCurrentDivSize = GetDivSize(question.Type.ToLower(), options);

    if (iAvailableDivSpace == 3)
    {
        //Begin a new div.
        @:<div class="wrapDivLarge">
    }
    else  //iAvailableDivSpace is 1 or 2
    {
        if (iCurrentDivSize > iAvailableDivSpace)
        {
            //First, close the previous OUTER div, and begin a new div.
            @:</div>
            @:<div class="wrapDivLarge">
            iAvailableDivSpace = 3;
        }
    }

    //No new OUTER div tag; just new INNER div tag
    switch (iCurrentDivSize)
    {
        case 1:
            @:<div class="wrapDivSmall">                    
            break;
        case 2:
            @:<div class="wrapDivMedium">
            break;
    }

    iAvailableDivSpace = iAvailableDivSpace - iCurrentDivSize;

Answer 1

也许不用写出整个标签，您只修改实际更改的内容:

@{
  var divClasses = new string[] { "largeDiv", "mediumDiv", "smallDiv" };
}

<div class="myOuterDivWithBorder">
@foreach (var divClass in divClasses)
{
  <div class="@divClass">
  </div>
}
</div>

对您的代码的更 hacky 修复将是(不干燥)以下内容。您遇到的问题是 intellisense 不会运行您的代码，因此它无法确定无论哪个 if 语句运行，您当前总是得到一个开始标记。 intellisense 唯一真正的修复是将结束标记放在相同的编程范围内(即 {} )。

for (int j = 0; j < 3; j++)
{
   if (j == 0)
   {
      @:<div class="largeDiv">
      @:</div>
   }
   else if (j == 1)
   {
      @:<div class="mediumDiv">
      @:</div>
   }
   else if (j == 2)
   {
      @:<div class="smallDiv">
      @:</div>
   }

}