在MVC 3中着色局部视图

时间:2012-06-26 13:23:58

标签: asp.net-mvc-3 css3

在我看来,我使用部分视图和模型中的对象列表,如下所示:

@foreach (var item in Model.MyObjectList)
{
    @Html.Partial("DisplayObject", item)   
}

这在我的主视图中形成一个网格图案,每个对象一行。

我想用奇数行的常规方法对一种颜色进行条纹化,甚至是另一种颜色。 (例如this

通常你会通过做某种mod计算来做到这一点。

问题是如果不将项目中的行号传入局部视图,我无法弄清楚如何做到这一点。

有更简单的方法吗? Html.Partial没有我可以挂钩的任何html属性。

我当然可以在局部周围放一张桌子并以那种方式对其进行条纹化处理,但不愿意这样做。

4 个答案:

答案 0 :(得分:1)

我认为你应该传递传递给局部视图的模型中的信息,或者将局部视图包装在一个元素中并将正确的css应用于它......如:

@foreach (var item in Model.MyObjectList) {
    <li class="odd|even">
    @Html.Partial("DisplayObject", item)  
    </li>  
}

答案 1 :(得分:1)

如果您可以限制对CSS3的支持,则可以使用:nth-child(odd):nth-child(even)规则 - 如本页W3C所示 - http://www.w3.org/Style/Examples/007/evenodd.en.html

这些示例显示了如何在tr标记上使用它 - 但它适用于您可以将选择器应用于的任何内容:

<style type="text/css">
  div p:nth-child(odd) { color:red; }
  div p:nth-child(even) { color:green; }
</style>
<div>
  <p>first</p>
  <p>second</p>
  <p>third</p>
</div>

答案 2 :(得分:0)

将行号作为属性添加到定义每个“项目”的类定义中。

在局部视图中使用该属性来确定它是奇数行还是偶数行。

答案 3 :(得分:0)

Mode值从ViewBag传递到主视图。

@foreach (var item in Model.MyObjectList) 
{
    if(ViewBag.Mode == "odd")
    {
       ViewBag.Mode = "even";
    }
    else
    {
      ViewBag.Mode = "odd";
    }

    @Html.Partial("DisplayObject", item)  
}