是否可以将数据表与 MVC 视图中的网格结合起来？答案

【问题标题】：Is it possible to combine Data Table with a grid in an MVC View?是否可以将数据表与 MVC 视图中的网格结合起来？
【发布时间】：2018-06-04 06:39:32
【问题描述】：

我想将数据库表中的数据显示到 2x3 网格中。之后将进行分页，因此您可以滑动到所有数据，而不必从上到下列出所有内容。我想知道的是，这是否可以在 cshtml 视图中使用数据表和网格执行？下面是模型。

这是我目前拥有的，现在一切都显示在彼此下方。我想改一下。

查看

@model List<Models.Kolom>
@{
    Layout = "";
}

<!DOCTYPE html>
<html>
<head>

</head>
<body>

    <h2>Index</h2>

    <table class="table">
        <thead>
            <tr>          
                <th>                 
                </th>                
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Name)
                    </td>

                </tr>
            }
        </tbody>
    </table>

</body>
</html>

flex-container {
    display: flex;
    /*Generates a flexbox layout with default flex direction as row */
    width: 100%;
    /* Not really required */
    align-items: center;
    /*Aligns contents vertically */
    justify-content: center;
    /*Aligns contents horizontally */
    text-align: center;
    /*Aligns further text in the center */
}

.item {
    background-color: #1A1919;
    height: 500px;
    width: 350px;
    margin: 5px;
}

<div class="flex-container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="flex-container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="flex-container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

 @{ int numberOfRenderedCells = 0; }

                @while (numberOfRenderedCells < Model.Count)
                {
                    <div class="flex-container">

                        @for (var j = 0; j < numberOfCols; j++)
                        {
                            if (numberOfRenderedCells < Model.Count)
                            {
                                var item = Model.ElementAt(numberOfRenderedCells);
                                <div class="item">
                                    @Html.DisplayFor(modelItem => item.Naam)
                                </div>
                            }

                            numberOfRenderedCells++;
                        }
                    </div>
                }

【问题讨论】：

标签： html asp.net-mvc asp.net-mvc-4

【解决方案1】：

一种简单的方法是使用每行包含多列的表格。

@{ const int NumberOfColsToRender = 3; /* desired number of table columns */ }

<table class="table">
    <thead>
        <tr>
            @* Render desired number of header columns per row *@
            @for (var i = 0; i < NumberOfColsToRender; i++) {
                <th></th> 
            }                   
        </tr>
    </thead>
    <tbody>
        @{ int totalRenderedCells = 0; }
        @* render rows as long as we have items *@
        @while (totalRenderedCells < Model.Length) {
            <tr>
                @* Render desired number of data cells per row *@
                @for (var j = 0; j < NumberOfColsToRender; j++) {
                    if (totalRenderedCells < Model.Length) {
                        var item = Model.ElementAt(totalRenderedCells);
                        <td>
                            @Html.DisplayFor(modelItem => item.Name)
                        </td>
                    }
                    else {
                        @* fill up rest of row with empty cells after we run out of items *@
                        <td></td>
                    }
                    totalRenderedCells++;
                 }
            </tr>
        }
    </tbody>
</table>

【讨论】：

谢谢先生，这有帮助。我已经编辑了我的帖子并添加了我希望添加表格信息的网格。是否可以将数据表和网格结合起来，如何将 div 插入数据表 html 中？
嗯，我想您可以在我上面给出的代码中将<tr> 替换为<div class="flex-container">，将<td> 替换为<div class="item">。不再需要<table>、<thead> 和<tbody> 标签。
它现在可以正常工作了，我非常感谢你！我想知道的是分页会限制网格的数量还是我怎样才能在一页上保持 3x3？因为现在它超出了它
可以在pager中设置每页的item数为9吗？
以何种方式可能？我听说过 PaginatedList，但我还没有实现它。我还没有实现寻呼机。您能推荐一个寻呼机供我实施吗？