Question

我是新手。只是前一个问题的后续问题："How to Display a list of objects in MVC View?"。我的问题是：如何将此列表分成多个列表，每个列表包含5个对象，并将每个列表分隔为不同的div？

列表控制器：我正在使用此控制器过滤掉db中的行：

public ActionResult FilteredElements()
    {
        var elem = DB.elements.Where(a => a.Criterion == "criterion")
            .OrderByDescending(a => a.ElementFrequency.Count())
            .ToList();

        return View(elem);
    }

我现在的观点将立即征集所有元素：

@foreach (var elem in Model)
{
<a href="@Url.Action("Details", "Table", new{ id = elem.ElementID }, "")">
<img src="@elem.ImagePath" /></a>
}

我想在一个div中一次列出所有元素，而不是在第一个div中列出前5个元素，在第二个div中列出下一个5，依此类推。

Answer 1

您必须遍历该列表并使用linq函数.Skip和.Take。

注意：使用.Skip(listIndex * listSize)确保您不再显示过去的值。 .Take(listSize);用于获取您想要显示的金额元素。

@{
    var listSize = 5;
    var numberOfLists = Model.Count/listSize;
    for (int listIndex = 0; listIndex < numberOfLists; listIndex++)
    {
        var list = Model.Skip(listIndex * listSize).Take(listSize);

        <div id="list@listIndex">
            <p>List @listIndex </p>
            @foreach(var element in list)
            {
                 <a href="@Url.Action("Details", "Table", new{ id = element.ElementID }, "")">
                 <img src="@element.ImagePath" /></a>
            }
        </div>
    }
}

Answer 2

好吧，所以如果你想在5个集合中打破你的列表，你可以使用for循环和索引代替foreach迭代该列表

@for (int i=0;i<=Model.Count; i+=5)
{
    <div class="group">
    for(int j=0;(j<5)&&(i+j-1)<Model.Count;j++)
    {
        <a href="@Url.Action("Details", "Table", new{ id = Model[i+j].ElementID }, "")">
        <img src="@Model[i+j].ImagePath" /></a>
    }
    </div>
}

Answer 3

如果您不介意放弃div要求，可以通过这种方式获得更清洁的剃刀......

@{ int i = 0; }
@foreach (var elem in Model)
{
    if (i++ % 5 == 0)
    {
        <h3>List @(i / 5 + 1)</h3>
    }
    <a href="@Url.Action("Details", "Table", new{ id = elem.ElementID }, "")">
    <img src="@elem.ImagePath" /></a>
}

否则这似乎也可行......

@{ int i = 0; }
@foreach(var elem in Model)
{
    if (i % 5 == 0)
    {
        @:<div><p>List @(i / 5 + 1)</p>
    }
    <a href="@Url.Action("Details", "Table", new{ id = elem.ElementID }, "")">
    <img src="@elem.ImagePath" /></a>
    if (++i % 5 == 0)
    {
        @:</div>
    }
}

Answer 4

在foreach中以模型项的值（ v ）和索引（ i ）循环的替代答案

查看

<div class="group"> // open and closing div tags for structure and default requirement // add 1 to index to make correct comparison with .Count() and % @foreach (var elem in Model.Select((v, i) => new { i = i + 1, v })) { // display stuff <a href="@Url.Action("Details", "Table", new{ id = elem.v.ElementID }, "")"> <img src="@elem.v.ImageUrl" /> </a> // Check if item is multiple of 5 and not the last one in the loop if(elem.i % 5 == 0 && elem.i != Model.Count()) { // close and open div . Top and bottom div tags keeps structure @:</div><div class="group"> } } </div>

将MVC列表分成多个div

4 个答案: