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

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

---

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

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

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

@model Products[]
@对于（变量i=0；i


}
}

您可以在这里找到有关如何使用引导的更多信息

我使用了网格系统

---

缩略图：

欢迎来到Stackoverflow，您的问题太广泛了，为了更快地得到答案，您必须更加具体，例如：您尝试了什么？你有密码吗？有很多帖子解释了GridView是如何工作的。请参阅How to Ask（如何询问）页面以帮助澄清此问题。我不知道如何实现它，因此我没有任何代码。我只想知道是否有任何htlm控件（如listview或api）可用于迭代列表中的对象，我将传递给视图并将每个对象放入gridsWell，也就是说，您可以使用基本HTML，使用一个CSS库，比如bootstrap，它有一个简单的网格系统，试试看：，bootsnipp中有一些例子，你可以告诉我们，如果你需要更多的帮助，我可以写一个使用MVC的一般例子。@nramirez我正在使用bootstrap 4，但现在我的疑问是如何实现分页或“加载更多”.我可以考虑在表格中分页，但不确定如何在网格系统中进行分页。因为答案解决了您最初的问题，所以您可以接受答案。对于分页，您可以使用Ajax并将此逻辑移动到Javascript，呈现应该直接使用此基本逻辑，但是您必须在MVC中创建一个API操作，以便您可以在每次页面更改时请求新产品。尝试一下，但是，这并不是显示这种网格类型的最有效的方法，您可能会对使用像或这样的框架感兴趣，因为这样可以更高效、更容易地显示这种HTML。