Question

我的代码存在一些格式问题，我在其中循环遍历一组对象，并尝试生成嵌套的DIV容器。我相信，复杂性出现在Razor引擎试图将我动态发布的CLOSING div标签与开放标记匹配的尝试中。有人可以帮助我确定以下代码中的预期行为，它模仿我自己的行为，但为了演示目的而大大简化了。

在这个例子中，我想要一个带边框的大型OUTER DIV，它包含3个不同大小的div（为了识别）。对我来说发生的是我点击的第一个关闭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>
   }

}

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

1 个答案: