С# MVC3 Razor чередует элементы в списке @foreach?

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

Ответ 1

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

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

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

Ответ 2

Предполагая, что вы не будете использовать 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>

Ответ 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>
}

Ответ 4

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

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

Ответ 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>

Ответ 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++;
    }
}

Ответ 7

Оригинал: http://15daysofjquery.com/table-striping-made-easy/5/ Автор: Джек Борн jQuery Zebra_Striping_Made_Easy

=============== Java script ===================

$(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">

Ответ 8

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

Ответ 9

как насчет использования плагина jQuery DataTable. Я использовал его в приложении MVC2, которое я разработал.

http://www.datatables.net/

Ответ 10

Решение, которое я использую для поддержки IE8 (корпоративный браузер, а не по выбору), заключалось в том, чтобы объединить решение the_lotus с jquery solution

Так как IE8 не поддерживает nth-child(), используйте этот css

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

И используйте jQuery для этого:

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

Ответ 11

Вы можете позволить фреймворку решить, как наилучшим образом его отобразить, предположительно используя бит логики обнаружения браузера и любую другую доброту, которую он имеет встроенный, что-то вроде следующего, и продолжить свою жизнь.

: -)

Моя точка зрения заключается в том, что при таком подходе WebGrid будет управлять чередующимися цветами сетки, используя наилучшую технологию, которую он может (лучше всего, чтобы она использовалась, по крайней мере) для обнаруженного браузера. Он может не использовать синтаксис "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
    );

Ответ 12

Что вы можете сделать, это установить переменную odd вне foreach()

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

Ответ 13

@helper Prop (Список поддержки) { foreach (var p in prop) { п } }

format: @Prop (@item.Prop)

Ответ 14

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

Поскольку вы используете 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.