VisualStudio 自动格式化无法正确格式化我的剃须刀代码

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

这里的问题似乎是您在if (i % 3 == 0) 条件下打开<div>，但您没有在相同条件下关闭</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 列时，这个解决方案就是我在项目中的做法。