Razor三元運算符呈現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)
}

現在我有兩個問題：

1. 三元運算符應呈現的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和Chris Pratt的方法基本上都起作用。 由於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嘗試解析此行，因此它不會引發錯誤的語法錯誤。