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（see here for more details）中执行此操作：

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

道歉，这是一个稍微迟钝的答案，因为你已经在做标记，但是因为你的表看起来非常标准，你可以切换到使用Mvc Web Grid Helper。对于像这样的表来说，这是一个很好的工具。我认为你的代码对于这个特定的表会稍微更短/更简单，并且交替行样式的实际实现将是非常简单：

alternatingRowStyle: "alternateRow"

有关this asp.net blog的更多信息。

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循环内部，将tablerow代码替换为如下所示：

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

或

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

适合您的foreach循环

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

简单有效......

asp.net mvc - 在Razor中提供备用行样式的最简单方法

5 个答案: