在Razor中的列表中循环时在中创建引导程序行

Question

我有一个列表

@model IEnumerable<VideoViewModel>

我正在尝试用Razor中的foreach循环来连续制作两个项目。

下面是我尝试做的一个例子：

<div class="row">
<div class="statistics col-lg-3 col-12">
<div class="statistic d-flex align-items-center bg-white has-shadow">
<div class="icon bg-red"><i class="fa fa-clock-o"></i></div>
<div class="text"><strong>Video 1 </strong><br></div>
</div>
<div class="statistic d-flex align-items-center bg-white has-shadow">
<div class="icon bg-blue"><i class="fa fa-calendar-o"></i></div>
<div class="text"><strong>Video 2</strong><br></div>
</div>
</div>
<!-- Second Column -->
<div class="statistics col-lg-3 col-12">
<div class="statistic d-flex align-items-center bg-white has-shadow">
<div class="icon bg-red"><i class="fa fa-clock-o"></i></div>
<div class="text"><strong>Video 3 </strong><br></div>
</div>
<div class="statistic d-flex align-items-center bg-white has-shadow">
<div class="icon bg-blue"><i class="fa fa-calendar-o"></i></div>
<div class="text"><strong>Video 4</strong><br></div>
</div>
</div>
</div>

我想通过for循环实现的是添加一列四列两行。根据我列表中的项目数，最多添加四列。如果一行中有四列以上，则添加另一行。有人能帮我解释一下这个逻辑吗？

Answer 1

如果您想在最多4列的行中显示视频内容，那么您可以在bootstrap col md类的帮助下将屏幕划分为4个部分。

从控制器发送列表以查看，这里我使用的是没有模型的viewbag。

在控制器中

var videoList = _entityOBJ.tblVideo.Tolist(); //Getting list to var object
ViewBag.videoList  =videoList ; //adding list to viewbag

在视图中

<div class="row">
@foreach (var item in @ViewBag.videoList)
{
<div class="card col-md-3"> // divide screen in 25% (total ratio is 12, so 12/4=3)
<div class="card-body">
@item.ColumnOfVideoTableToBeDisplay  //specify the column name same as you database table
</div>
</div>
}
</div>