将MVC列表分隔为多个div

我是一个新手。只是对前一个问题的后续问题："How to Display a list of objects in MVC View?"。我的问题是：如何将此列表分成多个列表，每个列表包含5个对象并将每个列表分隔到不同的div中？将MVC列表分隔为多个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个元素等等。

来源

2015-04-06 sri

请提供一些代码，使这方面的一个备选答案。现在，你太宽泛了。仅仅因为这个问题与你以前的问题有关，并不能免除你必须将相关代码放入这个问题。 – krillgar

你为什么要“划分”这个列表？你想达到什么目的？ –

@krillgar：添加了代码 – sri

你必须遍历该列表并利用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="[email protected]"> 
      <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> 
    } 
}

来源

2015-04-06 18:09:14 adricadar

为什么我得到错误：'System.Collections.Generic.List '不包含'Skip'的定义。我有“使用System.Linq;”在我的模型中。框架是mvc3。 – sri

您正在视图顶部使用'@using System.Linq;'？ – adricadar

好了，所以如果你想打破你的成套的名单说，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> 
}

来源

2015-04-06 18:41:59

介意丢弃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> 
    } 
}

来源

2015-04-06 19:09:23 Shoe

如果将i ++更改为++ i，以使增量在模数之前发生，则第二个示例很有用。 – agressen

@agressen固定谢谢 – Shoe

与模型项的值（v）和索引（我）循环中的foreach

查看

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

来源

2015-04-06 20:41:43

将MVC列表分隔为多个div

回答

相关问题