ASP.NET MVC如何将集合填充到4列表中? [英] ASP.NET MVC how to populate a collection to a 4 column table?

问题描述

我有一个集合，该集合是从MVC控制器传递到视图的.在我看来，我想在4列表中列出图像及其描述.我没有使用网格.

I have a collection which I passed from my MVC controller to my view. In my view, I want to list the image and its description in a 4 column table. I did not use a grid.

因此，如果我得到8的集合，我将在表的2行中得到4个项目的图库列表.

So, If I get collection of 8, I will get a gallery list of 4 items in 2 rows of the table.

如果我得到16，我将在表的4行中得到4列.

If I get 16, I will get 4 columns in 4 rows of the table.

在我的代码中，我首先将所有产品项添加到一行中.我需要在每组4个项目之后添加一个新行.

In my code, I started off with add all the product items in one row. I need to add a new row after each set of 4 items.

我该怎么做?

是否有更好的控件可供使用?

Is there a better control to use?

<table class="table-responsive">
            <tbody>
                <tr>
                    @foreach (var product in Model)
                    {

                        <td>

                            <img src=@product.Thumbnail style="width: 100px; height: 100px" />
                            <div class="col-md-6 col-xs-6 small">

                                @product.Title<br>
                                @product.Description<br>
                                @product.Audience<br>
                                @product.Company<br>
                                <label>Published : </label> @product.PubDate<br>
                                <label>Download : JPEG | PDF</label>
                            </div>
                        </td>
                    }
                </tr>
            </tbody>
        </table>

推荐答案

我认为最优雅的方法是使用linq将所有产品按4分组，然后生成表:

I gess the most elegant way to do it is use linq to group all your products by 4 and then generate your table:

每个组1行，每种产品1列:

1 row for each group and 1 column for each product:

<table class="table-responsive">
    <tbody>
        @foreach (var productGroup in Model.Select((e, i) => new { Product = e, Grouping = (i / 4) }).GroupBy(e => e.Grouping))
        {
            <tr>
                @foreach (var product in productGroup.Select(x => x.Product))
                {
                    <td>
                        <img src=@product.Thumbnail style="width: 100px; height: 100px" />
                        <div class="col-md-6 col-xs-6 small">
                            @product.Title<br>
                            @product.Description<br>
                            @product.Audience<br>
                            @product.Company<br>
                            <label>Published : </label> @product.PubDate<br>
                            <label>Download : JPEG | PDF</label>
                        </div>
                    </td>
                }
            </tr>
        }
    </tbody>
</table>

注意分组=(i/4)行.在这里，您可以更改连续要拥有的产品数量.

Note Grouping = (i / 4) line. That's where you can change how many products you will have in a row.

这篇关于ASP.NET MVC如何将集合填充到4列表中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！