我想将数据库表中的数据显示为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>
}
一种简单的方法是使用每行多列的表。
@{ 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>