Как изменить табличное представление продуктов в Side By Side View, например, список покупок в Интернете с HTML5 и CSS3 на странице MVC Razor?

Question

Я пытаюсь создать список фильмов, данные которых поступают из таблицы базы данных.Поэтому мне нужно создать представление продуктов Side By Side, используя @foreach () {....}.Пожалуйста, ознакомьтесь с моим кодом ниже и помогите мне выполнить этот шаг.

Я хочу, чтобы мои продукты были такими (используя элемент @foreach):

Продукт 1 Продукт 2 Продукт 3

Продукт 4 Продукт 5 Продукт 6

Я пытался сделать

         @foreach(var i=0; i< Model.Count; i+=2)
         {
         }

, но, возможно, не сработало из-за моих изображений, которые поступают из db как Imagepath.

 <table class="table">
     <tr>
         <th>
             @Html.DisplayNameFor(model => model.MoviesName)
         </th>
         <th>
             @Html.DisplayNameFor(model => model.ImgPath)
         </th>
         <th>
             @Html.DisplayNameFor(model => model.ReYear)
         </th>
         <th>
             @Html.DisplayNameFor(model => model.UnitPrice)
         </th>
     </tr>

     @foreach (var item in Model)
     {
         <tr>
             <td>
                 @Html.DisplayFor(modelItem => item.MoviesName)
             </td>
             <td>
                 <img src="@Url.Content("~/Image/" + 
                  System.IO.Path.GetFileName(item.ImgPath))" alt="" 
                  width="75" , height="100" />
             </td>
             <td>
                 @Html.DisplayFor(modelItem => item.ReYear)
             </td>
             <td>
                 @String.Format("{0:c}", item.UnitPrice)
             </td>
             <td>
                 @Html.ActionLink("Edit", "Edit", new { id = item.MovieID 
                   }) |
                 @Html.ActionLink("Details", "Details", new { id = 
                    item.MovieID 
                   }) |
                 @Html.ActionLink("Delete", "Delete", new { id = 
                  item.MovieID 
                   })
            </td>
         </tr>
     }

    </table>

Answer 1

Чтобы построить макет рядом, вам нужно выбрать макет на основе <div> или <table>.

На основе

<div> проще всего, так как вы можете использовать цикл @foreach, чтобы легко создать параллельную компоновку на основе <div>. Например, вот супер простой способ сделать это с помощью Bootstrap 4:

<div class="row">
    @foreach (var item in Model)
    {
        <div class="col-4">...Build your product in here...</div>
    }
</div>

Или ... вы можете сделать макет используя <table>, но это более сложно; вам нужно использовать вложенные циклы и немного математики, чтобы правильно определить строки и столбцы. Вот один из способов добиться этого:

1. Сначала определите, сколько строк будет основано на Model.Count продуктах:

   @{
       int columns = 3;
       int rows = (int)Math.Ceiling(Model.Count / (float)columns);
   }
   

2. Далее настройте вложенные циклы, подобные этому:

   <table>
   @for (int row = 0; row < rows; ++row)
   {
       <tr>
       @for (int column = 1; column <= columns; ++column)
       {
           @if ((row * columns) + column <= Model.Count)
           {
               <td>...Build your product in here...</td>
           }
           else
           {
               break;
           }
       }
       </tr>
   }
   </table>