在 MVC 中以网格方式显示产品列表，如电子商务网站所示

Question

我正在从数据库中获取产品列表，并希望在我的电子商务项目的 3X4 网格中显示它们(而不是通过网格视图作为列表(，如图所示亚马逊截图

我也想实现分页，以便我应该只显示有限的项目。

Answer 1

如果您有产品列表，那么使用 MVC 和 Bootstrap 可以执行以下操作：

@model Products[]
<div class="container-fluid">
    @for (var i = 0; i < Model.Length; i += 4)
    {
        <div class="row">
            @for (var j = i; j < i + 4; j++)
            {
                <div class="col-md-3">
                    <div class="thumbnail">
                        <img src="@Model[j].Url" alt="...">
                        <div class="caption">
                            <h3>@Model[j].Label</h3>
                            <p>@Model[j].Description</p>
                            <p>
                                <a href="#" class="btn btn-primary" role="button">Add Cart</a> <a href="#" class="btn btn-default" role="button">View</a>
                            </p>
                        </div>
                    </div>
                </div>
            }
        </div>

    }
</div>

您可以在此处找到有关可以使用 Bootstrap 执行的操作的更多信息 http://getbootstrap.com/css/

我使用了网格系统 http://getbootstrap.com/css/#grid

和缩略图：http://getbootstrap.com/components/#thumbnails