C＃MVC3剃刀在@foreach列表中交替项目？
在MVC3中，如何在使用Razor视图引擎时在@foreach列表上创build交替的行颜色？
@foreach (var item in Model) { <tr> <td>@item.DisplayName</td> <td>@item.Currency</td> <td>@String.Format("{0:dd/MM/yyyy}", item.CreatedOn)</td> <td>@String.Format("{0:g}", item.CreatedBy)</td> <td>@Html.ActionLink("Edit", "Edit", new { id = item.Id })</td> </tr> } 这是什么CSS（改变风格，而不是内容）。 保存服务器的努力：在客户端上执行。
由于您使用的是Razor，因此您可以使用JQuery。 以下是我在项目中的做法：
$(document).ready(function () { $("table > tbody tr:odd").css("background-color", "#F7F7F7"); }
假设你不想使用CSS（即:nth-child(odd) ），你可以：
-
使用正常的循环：
@for (int i = 0; i < Model.Count; i++) { ... } -
使用。select：
@foreach (var item in Model.Select((x, i) => new { Data = x, Index = i })) { ... }
无论哪种方式，你都可以访问当前的索引，然后可以使用i % 2 == 1作为背景色的条件。 就像是：
<tr style="background-color:@(i % 2 == 1 ? "red" : "white")">...</tr>
使用ASP.NET MVC 3和新的@helper语法，有一个更好的方法来处理这个问题。
首先添加这个@helper方法：
@helper AlternateBackground(string color) { if (ViewBag.count == null) { ViewBag.count = 0; } <text>style="background-color:@(ViewBag.count % 2 == 1 ? color : "none")"</text> ViewBag.count++; }
然后，只需在<TR>元素中添加对帮助程序的调用
@foreach (var item in Model) { <tr @AlternateBackground("Red")> <td>@item.DisplayName</td> <td>@item.Currency</td> <td>@String.Format("{0:dd/MM/yyyy}", item.CreatedOn)</td> <td>@String.Format("{0:g}", item.CreatedBy)</td> <td>@Html.ActionLink("Edit", "Edit", new { id = item.Id })</td> </tr> }
你总是可以在纯CSS中使用：
TABLE.test tr:nth-child(even) { background-color: #EFEFEF; }
这样的事情呢？
@for (int i = 0; i < Model.length; i++) { <tr @(i % 2 != 0 ? class="odd" : "")> <td>@Model[i].DisplayName</td> <td>@Model[i].Currency</td> <td>@String.Format("{0:dd/MM/yyyy}", Model[i].CreatedOn)</td> <td>@String.Format("{0:g}", Model[i].CreatedBy)</td> <td>@Html.ActionLink("Edit", "Edit", new { id = Model[i].Id })</td> </tr>
@{ int i = 0; foreach (Account acct in Model) { <div class="row @(i%2==0?"even":"odd")"> <a href="/Account/Details/@acct.id">@acct.name</a> </div> i++; } }
原文： http ： //15daysofjquery.com/table-striping-made-easy/5/作者：Jack Born jQuery Zebra_Striping_Made_Easy
=============== Java脚本===================
$(document).ready(function () { $('.stripeMe tr:even').addClass('alt'); $('.stripeMe tr').hover( function () { $(this).addClass("highlight"); }, function () { $(this).removeClass("highlight"); }); });
================= css =================
tr.alt td { background-color : #F7F7F7; } tr.highlight td { background-color : #bcd4ec; }
=============== HTML ===============
<table class="stripeMe">
没有太多的文档，但循环帮助（ http://nuget.org/Packages/Packages/Details/Loop-Helper-for-WebMatrix-0-1 ）给你支持检测偶/奇/等。 项目。
怎么样使用jQuery DataTable插件。 我用它开发的MVC2应用程序。
我用来支持IE8（企业浏览器，而不是select）的解决scheme是结合使用jQuery解决scheme的解决scheme
由于IE8不支持nth-child()使用这个CSS
.tableclass tr.even{ background:#E6EDF5; }
并使用jQuery来做到这一点：
$(document).ready(function() { $(".table tr:nth-child(even)").addClass("even"); });
你可以让框架决定如何最好地呈现它，大概使用一些浏览器检测逻辑，以及它内置的其他任何好处，如下所示，继续你的生活。
🙂
我的观点是，通过这种方法，WebGrid将使用最佳技术（最好是devise用于至less）检测浏览器来控制交替网格颜色。 它可能不会使用“nth”CSS语法，但是这可能不适用于所有目标受众，无论如何，您必须检测浏览器并发出不同的内容。 当然，现在每个人都应该使用符合CSS 3.x标准的浏览器，但里程不一。
@myWebGrid.GetHtml ( tableStyle: "some-style", headerStyle: "some-head-style", alternatingRowStyle: "some-fancy-alt-row-style", etc ... )
System.Web.Helpers.WebGrid的GetHtml方法签名如下所示：
public IHtmlString GetHtml ( string tableStyle = null, string headerStyle = null, string footerStyle = null, string rowStyle = null, string alternatingRowStyle = null, string selectedRowStyle = null, string caption = null, bool displayHeader = true, bool fillEmptyRows = false, string emptyRowCellValue = null, IEnumerable<WebGridColumn> columns = null, IEnumerable<string> exclusions = null, WebGridPagerModes mode = WebGridPagerModes.Numeric | WebGridPagerModes.NextPrevious, string firstText = null, string previousText = null, string nextText = null, string lastText = null, int numericLinksCount = 5, object htmlAttributes = null );
你可以做的是在foreach()之外设置一个odd的variables
@{ var odd = false; }
然后，在你的foreach循环中，你会改变它的值，然后在if条件中使用它来设置交替类。
@foreach (var item in Model) { odd = !odd; <tr class="@(odd ? "odd" : "even")"> <td>@item.DisplayName</td> <td>@item.Currency</td> <td>@String.Format("{0:dd/MM/yyyy}", item.CreatedOn)</td> <td>@String.Format("{0:g}", item.CreatedBy)</td> <td>@Html.ActionLink("Edit", "Edit", new { id = item.Id })</td> </tr> }
@helper prop（List prop）{foreach（var p in prop）{p}}
格式：@Prop（@ item.Prop）
一个旧的post，但没有一个答案涵盖了这个方法，所以我会的。
由于您使用MVC剃刀利用@帮助function是最简单，最干净和最好的方法。
在项目的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循环将如下所示：
@foreach (var item in Model) { <tr @CustomHelpers.AlternateBackground("#ECEDEE", Model.Count())> <td>@item.DisplayName</td> <td>@item.Currency</td> <td>@String.Format("{0:dd/MM/yyyy}", item.CreatedOn)</td> <td>@String.Format("{0:g}", item.CreatedBy)</td> <td>@Html.ActionLink("Edit", "Edit", new { id = item.Id })</td> </tr> }
您可以传递一个颜色标识符，如“#ECEDEE”或指定的颜色“蓝色”。
这样你只需要添加@Helper函数一次，它就可以遍历你的应用程序，并且可以根据需要通过引用@CustomHelpers函数在每个视图上调用它。
