Razor - sử dụng foreach, chèn html mỗi mục thứ n

Question

tôi xuất ra một danh sách lớn các mặt hàng trên trang của mình sử dụng Razor và MVC 5. Dưới đây là những gì tôi hiện có:

@foreach (var item in Model.Items) 
{ 
    <a>@item.Name</a> 
} 

Những gì tôi đang cố gắng để làm điều gì đó sẽ xuất ra điều này:

<div class="tab-0"> 
    <a>Item 1</a> 
    <a>Item 2</a> 
    <a>Item 3</a> 
    <a>Item 4</a> 
</div> 
<div class="tab-1"> 
    <a>Item 5</a> 
    <a>Item 6</a> 
    <a>Item 7</a> 
    <a>Item 8</a> 
</div> 
<div class="tab-2"> 
    <a>Item 9</a> 
    <a>Item 10</a> 
    <a>Item 11/a> 
    <a>Item 12</a> 
</div> 

Tôi cần phải nhóm tất cả 4 mục trong thẻ div. Làm thế nào tôi có thể làm điều đó trong Razor?

Answer 1

Không chắc chắn nếu bạn muốn tăng số Item (hoặc nếu @item.Name thực sự chứa số tăng), nhưng mã sau sẽ tăng cả tên lớp (một mới div mỗi lần lặp thứ tư) và số mục.

@{ var t = 0; var i = 1; } 
<div class="tab-@t"> 
    @foreach (var item in Model.Items) 
    { 
     <a>Item @i</a> // this may be just @item.Name? 
     if (i % 4 == 0) 
     { 
      t++; 
      @:</div><div class="tab-"@t> 
     } 
     i++; 
    } 
</div> 

Answer 2

foreach không cung cấp cho bạn chỉ mục. Đó là C#.

Tôi đề nghị bạn thay đổi nó thành for.

@foreach (var index = 0; index < Model.Items.Count; index++) 
{ 
    var item = Model.Items[index]; 
    <a>@item.Name</a> 
    @* Use `item` or `index` as you wish here *@ 
} 

Có thể bạn sẽ sử dụng Length thay vì Count. Nếu Model.Items chỉ là IEnumerable không phải mảng hoặc List<>, bạn có thể muốn gọi Model.Items.ToList(), v.v. Bạn có thể có ý tưởng.

Answer 3

Đây là giải pháp của tôi. Ghi nhớ rằng tôi đã không được biên dịch mã bản thân mình, vì vậy hãy kiểm tra xem nó:

foreach(var item in Model.Items.Select((x, i) => new {Index = i, Value = x})) 
{ 
    if (item.Index % 4 == 0) 
    { 
     <div class="tab-@(item.Index/4)"> 
    } 

      <a>Item @(item.Index + 1)</a> 

    if (item.Index % 4 == 0) 
    { 
     </div> 
    } 
} 

// If the number of items has a remainder of 4, close the div tag 
if(Model.Items.Count %4 != 0) 
{ 
    @:</div> 
} 

Tôi đã thêm Value trong Linq Select trong trường hợp bạn cần những thông tin bên trong vòng lặp.