Razor Ternary Operator для рендеринга Html-тегов (ASP.NET MVC)

Question

Я пытаюсь применить отзывчивый дизайн к моему приложению asp.net mvc 4. Я хочу зациклить мою модель и отобразить 3 элемента в строке. Каждая строка должна быть завернута в div. Результат должен выглядеть примерно так:

<div class='ResponsiveWrapper'> 
    <div> 
     <!-- item1 --> 
    </div> 
    <div> 
     <!-- item2 --> 
    </div> 
    <div> 
     <!-- item3 --> 
    </div> 
</div> 
<div class='ResponsiveWrapper'> 
    <div> 
     <!-- item4 --> 
    ... 

Для того, чтобы сделать это, я пытаюсь использовать тройные операторы:

@{ var i = 0; } 
@foreach (var item in Model) 
{ 

    @Html.Raw(i == 0 ? Html.Encode("<div class='section group'>") : "") 

    <div> 
     //Responsive Content comes here 
    </div> 

    @Html.Raw(i == 2 ? Html.Encode("</div>") : "") 

    @(i<3 ? i++ : i=0) 
} 

Теперь у меня есть 2 проблемы:

1. The HTML-теги, которые тройные операторы должны отображать, представлены в виде обычного текста. Я пробовал разные комбинации @Html.Raw и @Html.Encode и Strings, но для меня ничего не получилось
2. Кажется, что последний Тернарный оператор отображает текущее значение переменной i. Как я могу это предотвратить?

Дополнительная информация/Код Объяснение

Логика уже работает отлично:

• i переменная является переменной счетчика.
• If i = 0 я впервые визуализировать старт <div> тег обертки, и чем я сделать текущий model.item
• If i = 1 Я только визуализации текущего model.item
• If i = 2 я сначала делаю текущий model.item и чем </div> конца тег

Спасибо

UPDATE

И, MajoB 's и Прэтт' s подходы в основном работают. С MajoB решение было более подробно, я пошел с этим. Однако, я должен был сделать некоторые изменения для того, чтобы заставить его работать:

1. В контроллере, я должен был гарантировать, что IList возвращается, а не IEnumberable

   public ActionResult Index() 
   { 
       return View(db.leModel.ToList()); 
   } 
   

2. В представлении мне пришлось изменить подпись (например, 1., IList вместо IEnumerable)

   @model IList<leProject.Models.leModel> 
   

3. Различные модификации в коде бритвы (в противном случае было бы бросить меня исключения)

Окончательный код:

<div class="ResponsiveWrapper"> 
@for (var i = 0; i < Model.Count; i++) 
{ 
    // the lambda expression modelItem => item.leProperty did not work for some reason. So I had to replace the item with Model[i], which means, the following line is not neccessary 
    { var item = Model[i]; } 

    <div> 
     @Html.DisplayFor(modelItem => Model[i].leProperty) 
    </div> 

    if ((i + 1) % 3 == 0 || i == (Model.Count - 1)) 
    { 
     @:</div> 
     if (Model.Count + 1 - i >= 3) 
     { 
      @:<div class="ResponsiveWrapper"> 
     } 
    } 
} 

Спасибо, ребята :)

Answer 1

Решение без обертки div:

@for(var i = 0; i < Model.Count; i++) 
{ 
    @{ var item = Model[i]; }  

    <div style="float:left;"> 
     <!-- item1 --> 
    </div> 

    @if((i+1) % 3 == 0) 
    { 
    <div style="clear:both;"></div> 
    } 
} 

Решение с оберткой:

<div class="ResponsiveWrapper"> 
@for(var i = 0; i < Model.Count; i++) 
{ 
    @{ var item = Model[i]; }   


    <div> 
     <!-- item1 --> 
    </div> 

    @if((i+1) % 3 == 0 || i == (Model.Count-1)) // in case you have for example 7 items in your list 
    { 
    @:</div> <!-- end ResponsiveWrapper --> 
    @if (i != Model.Count-1) 
    { 
    @:<div class='ResponsiveWrapper'> 
    } 
    }  
} 

Answer 2

Вот обычный способ справиться с этим:

<div class="ResponsiveWrapper"> 
@for (var i = 0; i < Model.Count; i++) 
{ 
    <div> 
     <!-- item --> 
    </div> 

    @if ((i + 1) % 3 == 0) 
    { 
     @:</div><div class="ResponsiveWrapper"> 
    } 
} 
</div> 

Каждый третий элемент, оболочка DIV закрывается и открывается снова. @: не позволяет Razor пытаться разобрать эту строку, поэтому она не вызывает ошибочных синтаксических ошибок.