将 MVC 列表分离为多个 div

Question

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

列表控制器： 我正在使用此控制器从数据库中过滤掉行：

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

另一种答案，它在 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>

Answer 4

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

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