@foreach列表中的C#MVC3项目？

在MVC3中，当使用Razor视图引擎时，如何在@foreach列表上创建交替的行颜色

@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>
}

@foreach（模型中的变量项）{
@item.DisplayName
@项目.货币
@String.Format（“{0:dd/MM/yyyy}”，item.CreatedOn）
@String.Format（“{0:g}”，item.CreatedBy）
@ActionLink（“编辑”，“编辑”，新的{id=item.id}）
}

像这样的东西怎么样

@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>

@for（int i=0；i

假设您不想使用CSS（即

：n个孩子（奇数）

），您可以：

• 使用普通for循环：

  @for (int i = 0; i < Model.Count; i++)
  {
      ...
  }
  

无论哪种方式，您都可以访问当前索引，然后可以使用

i%2==1

作为背景色的条件。例如：

<tr style="background-color:@(i % 2 == 1 ? "red" : "white")">...</tr>

。。。

关于它的文档不多，但是循环助手（）为您提供了检测偶数/奇数/等项的支持。

使用jQuery DataTable插件怎么样。我在开发的MVC2应用程序上使用了它

---

使用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++;
}

@helper AlternateBackground（字符串颜色）{
如果（ViewBag.count==null）{ViewBag.count=0；}
style=“背景色：@（ViewBag.count%2==1？颜色：“无”）
ViewBag.count++；
}

然后只需在

元素中添加对助手的调用

@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>
}

@foreach（模型中的变量项）{
@item.DisplayName
@项目.货币
@String.Format（“{0:dd/MM/yyyy}”，item.CreatedOn）
@String.Format（“{0:g}”，item.CreatedBy）
@ActionLink（“编辑”，“编辑”，新的{id=item.id}）
}

这就是CSS的作用（改变样式而不是内容）。节省服务器的工作量：在客户端上完成

---

因为您使用的是Razor，所以您可以使用JQuery。以下是我在项目中的操作方式：

$(document).ready(function () {
    $("table > tbody tr:odd").css("background-color", "#F7F7F7");
}

原件： 作者：杰克·伯恩

===================Java脚本===================

$(document).ready(function () {
          $('.stripeMe tr:even').addClass('alt');

          $('.stripeMe tr').hover(
            function () {
                $(this).addClass("highlight");
              },
             function () {
                $(this).removeClass("highlight");
              });
      });

tr.alt td {
background-color : #F7F7F7;
}
tr.highlight td {
background-color : #bcd4ec;
}

<table class="stripeMe">

======================css=================

$(document).ready(function () {
          $('.stripeMe tr:even').addClass('alt');

          $('.stripeMe tr').hover(
            function () {
                $(this).addClass("highlight");
              },
             function () {
                $(this).removeClass("highlight");
              });
      });

tr.alt td {
background-color : #F7F7F7;
}
tr.highlight td {
background-color : #bcd4ec;
}

<table class="stripeMe">

===================HTML===============

$(document).ready(function () {
          $('.stripeMe tr:even').addClass('alt');

          $('.stripeMe tr').hover(
            function () {
                $(this).addClass("highlight");
              },
             function () {
                $(this).removeClass("highlight");
              });
      });

tr.alt td {
background-color : #F7F7F7;
}
tr.highlight td {
background-color : #bcd4ec;
}

<table class="stripeMe">

@{
int i=0；
foreach（模型中的帐户）
{
i++；
}
}

您可以使用以下纯css进行操作：

TABLE.test tr:nth-child(even)
{
    background-color: #EFEFEF;
}

---

我用于支持IE8（企业浏览器，而非个人选择）的一个解决方案是将_lotus的解决方案与

由于IE8不支持

nth-child（）

使用此css

.tableclass tr.even{
    background:#E6EDF5;
}

并使用jQuery执行以下操作：

$(document).ready(function() {
    $(".table tr:nth-child(even)").addClass("even");
});

您可以让框架决定如何最好地渲染它，可能需要使用一些浏览器检测逻辑和它内置的任何其他优点，比如下面的内容，然后继续您的生活

：-）

我的观点是，通过这种方法，WebGrid将使用它能为检测到的浏览器使用的最佳技术（至少是它设计使用的最佳技术）来控制交替的网格颜色。它可能不使用“n”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
    );

public IHtmlString GetHtml
(
string tableStyle=null，
字符串headerStyle=null，
字符串footerStyle=null，
字符串rowStyle=null，
字符串alternatingRowStyle=null，
字符串selectedRowStyle=null，
字符串标题=null，
bool displayHeader=true，
bool fillEmptyRows=false，
字符串emptyRowCellValue=null，
IEnumerable columns=null，
IEnumerable exclusions=null，
WebGridPagerModes=WebGridPagerModes.Numeric | WebGridPagerModes.NextPrevious，
字符串firstText=null，
字符串previousText=null，
字符串nextText=null，
字符串lastText=null，
int numericLinkScont=5，
对象htmlAttributes=null
);

您可以做的是在

foreach（）之外设置一个变量
odd

然后，在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>
}

@foreach（模型中的变量项）{
奇数=！奇数；
@item.DisplayName
@项目.货币
@String.Format（“{0:dd/MM/yyyy}”，item.CreatedOn）
@String.Format（“{0:g}”，item.CreatedBy）
@ActionLink（“编辑”，“编辑”，新的{id=item.id}）
}
@helper道具（列表道具）
{
foreach（道具中的var p）
{
P
}
}

格式：@Prop（@item.Prop）
一篇老文章，但是没有一个答案涉及到这种方法，所以我会的

因为您使用的是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++;
}

@helper AlternateBackground（字符串颜色，Int32 iViewBagCount）{
如果（iViewBagCount==null）{iViewBagCount=0；}
style=“背景色：@（iViewBagCount%2==1？颜色：“无”）
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>
}

@foreach（模型中的变量项）{
@item.DisplayName
@项目.货币
@String.Format（“{0:dd/MM/yyyy}”，item.CreatedOn）
@String.Format（“{0:g}”，item.CreatedBy）
@ActionLink（“编辑”，“编辑”，新的{id=item.id}）
}

您可以传递颜色标识符，如“#ECEDEE”或命名颜色“Blue”

这样，您只需添加