垂直显示动态列数据

Question

我正在尝试从通用 excel 文件上传中垂直显示列数据。问题是模型需要保持与 header 的关系，因为它是通用的，这会导致显示列数据时出现问题。我怎样才能垂直而不是水平地操作 - 或迭代 - 列数据；最好没有 CSS 操纵。

即

当前显示

A header	B header	C Header
A Data	A Data	A Data
B Data	B Data	B Data
C Data	C Data	C Data

预期显示

A header	B header	C Header
A Data	B Data	C Data
A Data	B Data	C Data
A Data	B Data	C Data

示例模型

public class HeaderVM
{
    public string Name { get; set; }

    public List<ColumnDataVM> ColumnData { get; set; }

}

示例代码显示 Table

<table id="previewTable" class="table table-striped">
            <thead>
                <tr>
                    @if (Model?.Count > 0)
                    {
                        foreach (var header in Model)
                        {
                            <th scope="col">@header.Name</th>
                        }
                    }
                </tr>
            </thead>
            <tbody>
                @if (Model?.Count > 0)
                {
                    @foreach (var header in Model)
                    {
                        <tr>
                            @foreach (var column in header.ColumnData)
                            {
                                <td>@column.Value</td>
                            }
                        </tr>
                    }
                }
            </tbody>

        </table>

更新

感谢@Victor

 <table id="previewTable" class="table table-striped">
            <thead>
                <tr>
                    @if (Model?.Count > 0)
                    {
                        foreach (var header in Model)
                        {
                            <th id="@header.Name" scope="col">@header.Name</th>
                        }
                    }
                </tr>
            </thead>
            <tbody>
                @if (Model?.Count > 0)
                {
                    @for (int row = 0; row < Model?.Count; row++)
                    {
                        @(maxRowCount = Math.Max(maxRowCount, Model.Headers[row].ColumnData.Count))

                        <tr>
                            @foreach (var item in Model)
                            {
                                @if (row < item.ColumnData.Count)
                                {
                                    <td>@item.ColumnData[row].Value</td>
                                }

                            }
                        </tr>
                    }
                }
            </tbody>

        </table>

Answer 1

也许是这样的？

var maxRowsCount = 0;
foreach (var item in list)
{
    maxRowsCount = Math.Max(maxRowsCount, item.ColumnData.Count);

    // Print header in razor
    Console.WriteLine(item.Name);
}

for (int row = 0; row < maxRowsCount; row++)
{
    foreach (var item in list)
    {
        // Print row in razor
        if (row < item.ColumnData.Count)
        {
            var value = item.ColumnData[row];
            Console.WriteLine(value);
        }
    }
}

如果您的项目的计数都相同，则不需要 maxRowsCount，您可以使用其中一个的计数。

垂直显示动态列数据

Displaying dynamic column data veritcally

html

c#

razor