如何将产品的 Table 视图更改为并排视图，例如 MVC Razor 页面中带有 HTML5 和 CSS3 的在线购物产品列表？

Question

我正在尝试创建一个电影列表，其中的数据来自数据库 table。所以我需要使用@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> 进行布局，但这更复杂；您需要使用嵌套循环和一些数学知识来正确设置行和列。这是实现此目的的一种方法：

首先，根据 Model.Count 个产品算出有多少行：

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

接下来，设置与此类似的嵌套循环：

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

如何将产品的 Table 视图更改为并排视图，例如 MVC Razor 页面中带有 HTML5 和 CSS3 的在线购物产品列表？

How do I change Table view of products into Side By Side View, like online shopping products list with HTML5 and CSS3 in MVC Razor page?

html

model-view-controller

asp.net-mvc

razor

asp.net-mvc-5