在Razor中提供交替行样式的最简单方法

Question

给定以下Razor代码：

<tbody>
    @foreach (Profession profession in Model)
    {
        <tr>
            <td>@profession.Name</td>
            <td>@profession.PluralName</td>
            <td>@Html.ActionLink("Edit", "AddOrEdit", new { Id = profession.ProfessionID })</td>
        </tr>
    }
</tbody>

提供某种替代行样式的最简单方法是什么？(即奇数行和偶数行的不同样式。(

例如，我似乎无法添加任意C#来声明bool变量，该变量在foreach循环的每次迭代中都会被翻转，以便为tr设置类名。

Answer 1

我建议在直接CSS中这样做(请参阅此处了解更多详细信息(：

tr:nth-child(odd)    { background-color:#eee; }
tr:nth-child(even)   { background-color:#fff; }

Answer 2

JQuery可以在客户端实现这一点(我可能会在这里使用客户端脚本而不是服务器逻辑(。

 $("tr:odd").css("background-color", "#bbbbff");

您也可以只使用一个简单的变量来设置css类(几乎是伪代码(：

@foreach (Profession profession in Model)
{
    @i++;
    <td class="@i%2==0?"even":"odd""> 
}

Answer 3

其他人提出了很多方法。从我的观点来看，这不是最简单的，但有点容易：

<tbody>
    @var oddEven = new List { "odd", "even" };
    @var i = 0;
    @foreach (Profession profession in Model)
    {
        <tr style="@oddEven[i++ % 2]">
            <td>@profession.Name</td>
            <td>@profession.PluralName</td>
            <td>@Html.ActionLink("Edit", "AddOrEdit", new { Id = profession.ProfessionID })</td>
        </tr>
    }
</tbody>

Answer 4

很抱歉，这是一个有点迟钝的答案，因为你已经在做标记了，但由于你的表看起来很标准，你可以改用MvcWebGridHelper。对于这样的桌子来说，这是一个很好的工具。我认为对于这个特定的表，您的代码会稍微短一些/更简单一些，并且交替行样式的实际实现会非常简单：

alternatingRowStyle: "alternateRow"

关于这个asp.net博客的更多信息。

Answer 5

由于您使用的是MVC Razor，因此使用@helper函数是最简单、最干净、最好的方法。

在项目的App_Code文件夹中，使用以下代码添加新项或修改现有的CustomeHelpers.cshtml文件：

@helper AlternateBackground(string color, Int32 iViewBagCount) {
    if (iViewBagCount == null) { iViewBagCount = 0; }
    <text>style="background-color:@(iViewBagCount % 2 == 1 ? color : "none")"</text>
    iViewBagCount++;
}

然后在您的视图中，在foreach循环中，将表行代码替换为如下所示：

<tr @CustomHelpers.AlternateBackground("#ECEDEE", ViewBag.count)>

或

<tr @CustomHelpers.AlternateBackground("Red", Model.Count())>

无论哪个适合您的前臂循环

这样，您只需添加一次@Helper函数，它就会在整个应用程序中传播，并且可以根据需要通过引用@CustomHelpers函数在每个视图上调用它。根据需要创建尽可能多的帮助程序，并使用@CustomeHelpers调用它们。NameOfYourFunction((，然后从那里开始。

简单有效。。。