在 MVC 3 中为局部视图着色答案

【问题标题】：Coloring a Partial view in MVC 3在 MVC 3 中为局部视图着色
【发布时间】：2012-06-26 13:23:58
【问题描述】：

在我看来，我使用带有来自我的模型的对象列表的局部视图，如下所示：

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

这在我的主视图下方形成了一个网格图案，每个对象有 1 行。

我想使用普通方法对它们进行条纹，奇数行一种颜色，偶数行另一种颜色。（例如this。

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

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

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

我当然可以在部分周围放一张桌子并以这种方式对其进行条纹，但不希望这样做。

【问题讨论】：

能贴出部分视图代码吗？
能不能把渲染的html代码贴出来。
现在基本上不相关了，因为我们有很多答案，但是谢谢！

标签： asp.net-mvc-3 css

【解决方案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>

【讨论】：

定义“所有浏览器”。您打算拥有IE7 tax 吗？或者确实是 IE8 税？否则，你有 IE9+ 和其他。 Check it on Quirksmode
我的意思是大多数浏览器不是全部
不是吗！？我正在认真考虑将其推荐给管理层！

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

将Mode 值通过ViewBag 从主视图传递到部分视图。

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

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

【讨论】：