C # MVC3 Razor чередующихся элементов в списке @foreach?

Question

Как в MVC3 создавать чередующиеся цвета строк в списке @foreach при использовании механизма просмотра Razor?

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

Answer 1

Если вы предпочитаете не использовать CSS (то есть :nth-child(odd)), вы можете:

• использовать нормальный цикл for:

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

Answer 2

Это то, для чего нужен CSS (изменение стиля, а не содержимого). Сохраните усилия сервера: сделайте это на клиенте.

Поскольку вы используете Razor, вы можете использовать JQuery. Вот как я делаю это в своих проектах:

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

Answer 3

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

Answer 4

Вы всегда можете сделать это в чистом CSS, используя:

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

Answer 5

Как насчет этого?

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

Answer 6

@{  
    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++;
    }
}

Answer 7

Оригинал: http://15daysofjquery.com/table-striping-made-easy/5/ Автор: Джек Борн 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">

Answer 8

На нем не так много документации, но Loop Helper (http://nuget.org/Packages/Packages/Details/Loop-Helper-for-WebMatrix-0-1) предоставляет вам поддержку для обнаружения элементов Even / Odd / etc.

Answer 9

Старый пост, но ни один из ответов не охватывал этот подход, поэтому я сделаю это.

Поскольку вы используете 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 будет выглядеть следующим образом:

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

Answer 10

@ helper Prop (List prop) {foreach (var p в prop) {p}}

формат: @Prop (@ item.Prop)