Razor三元運算符呈現Html標籤（ASP.NET MVC）

我想將響應式設計應用到我的asp.net mvc 4應用程序。我想循環我的模型並渲染每行3項。每行應包裝在一個div中。結果應該是這個樣子：Razor三元運算符呈現Html標籤（ASP.NET MVC）

<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個問題：

的三元運營商應該呈現的HTML標籤以純文本形式出現。我嘗試了@Html.Raw和@Html.Encode和Strings的不同組合，但它對我無效
看起來最後一個三元運算符呈現變量i的當前值。我怎樣才能防止這一點？

附加信息/代碼解釋

邏輯已經正常工作：

的i變量是計數變量。
If i = 0我第一次呈現包裝開始<div>標籤，比我呈現當前model.item
If i = 1我只呈現當前model.item
If i = 2我第一次呈現當前model.item，比</div>結束標記

謝謝

UPDATE

兩個，MajoB的和克里斯·普拉特的方法的基本工作原理。由於MajoB的解決方案更詳細，我與那一個去。但是，我不得不作出爲了得到它的工作的一些修改：

在控制器，我必須確保，一個IList中被返回，而不是IEnumberable
```
public ActionResult Index() 
{ 
    return View(db.leModel.ToList()); 
} 
```
在視圖中，我必須更改簽名（如1。，IList的，而不是IEnumerable的）在剃刀代碼
```
@model IList<leProject.Models.leModel> 
```
各種修改（否則會丟我的例外）

終極密碼：

<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"> 
     } 
    } 
}

謝謝你們:)

來源

2014-09-30 Ronin

'@（stuff）'告訴Razor打印輸出。嘗試'@ {stuff}'代替:-) – 2015-11-20 07:08:02

沒有包裝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'> 
    } 
    }  
}

來源

2014-09-30 15:46:39

因爲我的模型是一個IEnumerable我得到一個異常「不能應用索引到一個類型的表達式... ienumerable」我該如何解決這個問題？ – Ronin 2014-09-30 16:28:25

您可以將模型更改爲列出Model.ToList（）或使用您的問題中的foreach方法。 – 2014-09-30 16:31:36

必須進行一些修改，才能使其正常工作。我會用我所做的任務更新我的問題 – Ronin 2014-09-30 16:56:44

下面就來處理這個問題的常用方法：

<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試圖解析這條線，所以它不會拋出錯誤的語法錯誤。

來源

2014-09-30 16:02:46

Razor三元運算符呈現Html標籤（ASP.NET MVC）

回答

相關問題