Question

我正在使用@:</div>正确显示一些引导列。这是我使用它的代码：

var i = 0;

<div class="container-fluid">
    <div class="row show-grid">
        @foreach (var one in Model)
        {

            if (i % 3 == 0)
            {
                @:<div class="row show-grid">
            }

            <div class="one-element col-md-4">
                @one.Title
            </div>

            if ((i + 1) % 3 == 0)
            {
                @:</div>
            }

            i++;
        }
    </div>
</div>

它格式化（只要我不使用VisualStudio自动格式功能，它就能正常工作）：

@:</div>

到此：

@:
</div>

然后应用程序不再起作用了。

如何解决这个问题？

Answer 1

我使用这样的@Html.Raw()修复了它：

var i = 0;

<div class="container-fluid">
    <div class="row show-grid">
        @foreach (var one in Model)
        {

            if (i % 3 == 0)
            {
                @Html.Raw("<div class=\"row show-grid\">")
            }

            <div class="one-element col-md-4">
                @one.Title
            </div>

            if ((i + 1) % 3 == 0)
            {
                @Html.Raw("</div>")
            }

            i++;
        }
    </div>
</div>

我想这就好了。

但如果有人知道更优雅的方式，请告诉我。

Answer 2

好的，我现在知道，<text>代码和here is why我错了：

在Razor中，标签必须正确嵌套。 <text></div></text>不是适当的嵌套。

@Alexei Levenkov提出解决问题的最佳方法：

<div class="container-fluid">
    <div class="row show-grid">
        @foreach (var one in Model.Select((value, index) => new { value, index }).GroupBy(x => x.index / 3))
        {
            <div class="row show-grid">
                @foreach (var el in one.Select(x => x.value))
                {
                    <div class="one-element col-md-4">
                        @el.Title
                    </div>
                }
            </div>
        }
    </div>
</div>

但是，根据this answer，您的Html.Raw()方法很好。

Answer 3

这里的问题似乎是你在条件<div>上打开if (i % 3 == 0)但在相同条件下你没有关闭</div> if ((i + 1) % 3 == 0)。
这意味着你可以有一个永不关闭的开口<div>或从未打开的关闭</div>。你可以试试这个：

var i = 0;

<div class="container-fluid">
  <div class="row show-grid">
    @foreach (var one in Model)
    {
        <div class="one-element col-md-4">
            @one.Title
        </div>

        if (i % 3 == 0)
        {
           <div class="clear"></div>
        }

        i++;
    }
  </div>
</div>

可能这是你遇到麻烦的地方！我更新了你的评论。更新@Alexei Levenkov评论。我也在寻找一种更好的方法。这个解决方案是我在我的项目中如何在每行需要3列的情况下完成的。

VisualStudio自动格式不能正确格式化我的剃刀代码

3 个答案: