Razor-Pages - HTML 标记

Posted

技术标签:

【中文标题】Razor-Pages - HTML 标记【英文标题】:Razor-Pages - HTML markup 【发布时间】: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:我知道我不应该发布代码图片,但我想显示格式和语法错误。

【问题讨论】:

【参考方案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>

结果:

【讨论】:

以上是关于Razor-Pages - HTML 标记的主要内容,如果未能解决你的问题,请参考以下文章

HTML---图像标记和表格标记

HTML5学习之HTML标记类型

HTML常用标记(完整版)

html5常用标记总结

HTML 任何html文档的head标记中的必需标记

Struts2标记中的HTML标记