asp.net-mvc - 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和字符串，但它对我没有任何作用
2. 似乎最后一个三元运算符呈现了变量的当前值 i .我该如何防止这种情况？

附加信息/代码解释

逻辑已经运行良好:

• i变量是计数变量。
• If i = 0我首先渲染开始 <div>包装器的标签，然后我呈现当前的 model.item
• If i = 1我只渲染当前的 model.item
• If i = 2我首先渲染当前 model.item而不是 </div>结束标记

谢谢

更新

MajoB 和 Chris Pratt 的方法基本上都有效。由于 MajoB 的解决方案更详细，所以我选择了那个。但是，我必须进行一些修改才能使其正常工作:

1. 在 Controller 中，我必须确保返回的是 IList，而不是 IEnumberable

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

2. 在 View 中，我必须更改签名(例如 1.，IList 而不是 IEnumerable)

   @model IList<leProject.Models.leModel>
   

3. Razor 代码的各种修改(否则会抛出异常)

最终代码:

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