为 HTML 报表数据动态创建布局列答案

【问题标题】：Dynamically Create Layout Column for HTML Report Data为 HTML 报表数据动态创建布局列
【发布时间】：2019-09-13 07:03:59
【问题描述】：

我有一个桌面应用程序，它使用RazorEngine 和bulma 以HTML 格式生成报告，用于布局和样式。使用 foreach 循环将数据填充到列中。当列变得太长时，我想关闭列并继续填充第二列中的数据。最初我认为我可以使用计数器并在达到某个计数时关闭循环，但当我输入它时，我意识到这是行不通的，因为循环在列表中。

这是我最初的想法....

<div class="column">
    @{
        foreach ( var pos in @Model )
        {
            if ( ( pos.Position != null )
            {
                <ol>
                    @foreach ( var app in @pos.Applications )
                    {
                        <li>@app.Applicant.LastName, @app.Applicant.FirstName</li>
                        mcount++;

                        @if (mcount = 25 )
                        {
                            <!-- this was my initial thought, but obviously this is happening inside of an ordered list -->
                            @:</div><!-- close the column -->
                            @:<div class="column"><!-- open new column --><!-- this
                        }

                    }
                </ol>
            }

        }
    }
</div>

如何在填充数据并继续编号的同时关闭列并开始新列？

【问题讨论】：

标签： c# html razor razorengine bulma

【解决方案1】：

使用 ol 标签的Start attribute。

以下内容应该可以工作，或者至少可以帮助您入门：

<div class="column">
    @{
        foreach ( var pos in @Model )
        {
            if ( ( pos.Position != null )
            {
                <ol>
                    @foreach ( var app in @pos.Applications )
                    {
                        <li>@app.Applicant.LastName, @app.Applicant.FirstName</li>
                        mcount++;

                        @if (mcount = 25 )
                        {
                            <!-- this was my initial thought, but obviously this is happening inside of an ordered list -->

                            @:</ol></div><!-- close the column -->
                            @:<div class="column">
                            @:<ol start="@mcount"<!-- open new column --><!-- this
                        }

                    }
                </ol>
            }

        }
    }
</div>

【讨论】：