无法使用 Razor 关闭 foreach 中的标签 - ASP.NET MVC答案

【问题标题】：Cant closing Tag in foreach with Razor - ASP.NET MVC无法使用 Razor 关闭 foreach 中的标签 - ASP.NET MVC
【发布时间】：2016-02-21 18:40:23
【问题描述】：

我有一个div，每个div 有两个divs，如下所示：

<div class="col">
    <div class="item-c color1">..</div>
    <div class="item-c color2">..</div>
</div>

我从数据库中读取数据，我想用 foreach 语句重复这个 div。

我使用下面的代码，但我得到了Runtime Error

<div class="col">
@foreach (var item in Model)
{

    <div class="item-c  @("color" + index.ToString()) ">..</div>
    if (index % 2 == 0)
    {
        <text></div><div class="col"></text>
    }
    index++;
    if (index > 8) { index = 1; }
}

我的结果应该是这样的：我收到此错误：

遇到没有匹配开始标签的结束标签“div”

【问题讨论】：

不清楚你的逻辑是什么。如果您的模型包含 5 个项目，您期望 3 个 <div class="col">，前 2 个包含 2 个 <div class="item-c ...>，最后一个仅包含 <div class="item-c color5>？
index % 2 是 0 或 1，但绝不是 2。因此，您的 if-block 永远不会执行。
@StephenMuecke 是的，最后一个只包含一个div
@MariusSchulz 是的，它的错误和更新
我不明白逻辑...1。你想重复col吗？，2.为什么重复中的逻辑？如果您要从 DB 中获取，那么我假设您知道项目的数量，所以只是对它们进行 for-each，看不到为什么需要索引逻辑。

标签： html asp.net-mvc razor

【解决方案1】：

你的代码需要是

@{ int index = 1; }

<div class="col">
    @foreach(var item in Model.Items)
    {
        <div class="item-c color@(index)">..</div>
        if (index % 2 == 0) // close the div and start a new one
        {
            @:</div><div class="col">
        }
        index++;
        if (index > 8) { index = 1; }
    }
</div>

【讨论】：

【解决方案2】：

如果您需要关闭剃须刀代码中的标签，您可以随时使用Html.Raw。检查下面的代码，它应该根据您的要求工作。

      <div class="col">
            @foreach (var item in Model)
            {

                <div class="item-c  @("color" + index.ToString()) ">..</div>

                if (index % 2 == 2)
                {
                     @Html.Raw("</div> <div class="col">")

                }
                index++;
                if (index > 8) { index = 1; }

            }
</div>

【讨论】：

【解决方案3】：

你的逻辑不正确，如果行数是奇数，那么你没有关闭最后一个 div，如果你的行数是偶数，你添加一个打开的 div 而不是关闭它。删除 "if (index % 2 == 2)" 将生成 div，如您的示例中所示

<div class="col">
  <div class="item-c color1">..</div>
  <div class="item-c color2">..</div>
</div>

<div class="col">
            @foreach (var item in Model)
            {
              <div class="item-c @("color" + index.ToString())">..</div>
              index++;
              if (index > 8) { index = 1; }
            }
</div>

【讨论】：

我想在每个父 div 中放置两个 div。具有col 类的 div 应该不再包含两个 div。在您的每个 div 中的答案中超过 div 重复。

【解决方案4】：

为什么不喜欢

@foreach (var item in Model)
{
    <div class="col">
        @foreach (var item2 in Model.Items.Select((model, index) => new { index, model }))
        {   
             <div class="item-c color@item2.index">

             </div>
        }
    </div>
}

【讨论】：