Razor-Pages - HTML 标记答案

【问题标题】：Razor-Pages - HTML markupRazor-Pages - HTML 标记
【发布时间】：2021-11-21 13:37:27
【问题描述】：

按照这个post的答案，我正在使用@:<div class="col-md-6">

问题

格式一团糟：

intellicode 搞砸了（我只删除了第二个@: 上的段落）

另外，我的if (i == (Model.CellsNotStarted.Count - 1) && i % 2 != 0) 在使用@: 时将不起作用；它总是会继续下去。如果我不使用 @: 标记，并且如果我将 all 我的 html 放入 if/else 而不仅仅是 <div> 标记，它将毫无问题地工作。

我的问题是： @: 标记是否可行？如果是这样，我做错了什么。如果不是什么是替代方案（这并不意味着将我的整个代码放在if/else 中）

PS：我知道我不应该发布代码图片，但我想显示格式和语法错误。

【问题讨论】：

标签： asp.net-core razor razor-pages

【解决方案1】：

有更简洁的方法来管理 Razor 代码中的条件。很难提供完整的示例，因为您没有提供完整的代码，但您可以这样做，例如：

<div class="col-md-@(i+1 == Model.CellsNotStarted.Count && i % 2 ! = 0 ? "12" : "6")">

当您想在 Razor 中使用余数运算符 (%) 时，您还应该考虑是否使用 GroupBy 会更好。最常见的是，正如我在这个问题中所展示的那样：Building tables with WebMatrix

【讨论】：

【解决方案2】：

你可以尝试用js来设置html。这里有一个demo：

<div id="myDiv"></div>
<script>
        $(function () {
            var html = "";
            if ("@(Model.CellsNotStarted != null)"=="True")
            {
                for (var i = 0; i <@Model.CellsNotStarted.Count; i++)
                {
                    if (i == (@Model.CellsNotStarted.Count - 1) && i % 2 != 0)
                    {
                        html += '<div class="col-md-12">';
                    }
                    else
                    {
                        html += '<div class="col-md-6">';
                    }
                    html += i+'</div>';

                }
            }
            $("#myDiv").html(html);


        })
</script>

结果：

【讨论】：