Создание bootstrap строк при зацикливании в списке в Razor

Question

У меня есть список как

@model IEnumerable<VideoViewModel>

Я пытаюсь сделать два элемента подряд с foreach l oop в Razor.

Вот пример того, что я пытаюсь сделать:

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

Что я хочу достичь с помощью для l oop, это добавить столбец из четырех столбцов две строки. В зависимости от количества элементов в моем списке, добавьте максимум четыре столбца. Если в строке более четырех столбцов, добавьте еще одну строку. Может кто-нибудь помочь с этим логи c?

Answer 1

Если вы хотите отображать видеоконтент в строке максимум с 4 столбцами, вы можете разделить экран на 4 с помощью класса bootstrap col-md.

Отправить список из контроллера для просмотра, здесь я использую viewbag без модели.

In Controller

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

In View

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