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

现在我有两个问题：

三元运算符应呈现的HTML标记以纯文本形式出现。我尝试了@Html.Raw和@Html.Encode和字符串的不同组合，但它对我没什么用处
似乎最后一个三元运算符呈现变量i的当前值。我该如何防止这种情况？

其他信息/代码说明

逻辑已经正常工作：

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

谢谢

更新

两者， MajoB ＆ Chris Pratt 的方法基本上都有效。由于 MajoB 的解决方案更详细，我选择了那个。但是，为了让它起作用，我不得不进行一些修改：

在财务主任，我必须保证，IList正在被退回，而不是IEnumberable
```
public ActionResult Index()
{
    return View(db.leModel.ToList());
}
```
在View中，我不得不更改签名（如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">
        }
    }
}

谢谢你们：）

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尝试解析此行，因此不会抛出错误的语法错误。

用于呈现Html标签的Razor三元运算符（ASP.NET MVC）

2 个答案: