使用.net MVC 實現 Datalist的垂直順序排列

  • 384
  • 0
  • 2016-03-24

.net MVC Webfrom Datalist 垂直 水平 排列

這幾天在工作的時候發現DataList 的資料的排列順序的問題
如果DataList的排列順序也就是RepeartDirection 若為Vertical
資料的排列順序是垂直的 也就是如下示意圖一樣
1 4 7
2 5 8
3 6 9
若是改成Horizontal 則是我們一般MVC用Foreach也寫的出來的排法
1 2 3
4 5 6
7 8 9
如上示意圖 一般來說 MVC Foreach可以簡單寫出來
但是垂直排列卻沒那麼簡單 我想了又想
沒理由WebForm可以做到的事 MVC就不行
因為我數學本身就不是很好 不過我還是想出了個人的唯一解法如下

@model List<Mvc_Repository.Models.Categories>
 
@{
    ViewBag.Title = "Index";
    @*取得總行數*@
    int trcount = Convert.ToInt32(Math.Ceiling(Convert.ToDouble(Model.Count()) / 3));
    @*設定每行幾列*@
    int rowcount = 3;
}
<h2>Index</h2>
 
<p>
    @Html.ActionLink("Create New""Create")
</p>
<table class="table">
    @*依照有幾行跑tr迴圈*@
    @for (int i = 0; i < trcount; i++)
    {
        <tr>
            @*每行有幾列砲td迴圈*@
            @for (int k = 0; k < rowcount; k++)
            {
                @*暫存目前行數*@
                int row = i;
                @*判斷是否為第一行*@
                if (k % rowcount > 0)
                {
                    @*不是第一行就要取得List裡的元素位置 則為 目前行數 + (所有列數 * 目前列數) *@
                    row += rowcount * k;
                }
 
                @*判斷元素位置是否超過 Model的最大元素*@
                if (row > (Model.Count() - 1))
                {
                    @*若超過則跳出td迴圈*@
                    break;
                }
 
                <td>
                    @*列出目標元素位置的資料*@
 
                    @Model[row].CategoryName
                </td>
            }
 
 
        </tr>
    }
 
</table>
 
 
 

特別的是不能使用IEnumerable 必需使用List才可以
因為我們需要元素的位置
如果有其他解法 請告知一下讓我參考看看XD