Question

我想将数据库表中的数据显示为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>
                }

Answer 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>

是否可以将数据表与MVC视图中的网格相结合？

1 个答案: