將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

回答

相關問題