Asp.net mvc - Простейший способ обеспечения альтернативного стиля строк в Razor

Учитывая следующий код 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>

Какой самый простой способ обеспечить какой-то альтернативный стиль строк? (т.е. различные стили для нечетных и четных строк.)

Кажется, я не могу добавить произвольный С#, чтобы объявить переменную bool, которая перебрасывает каждую итерацию цикла foreach, чтобы, например, установить имя класса для tr.

Ответы

Ответ 1

Я бы рекомендовал сделать это в прямом CSS (подробнее см. здесь):

tr:nth-child(odd)    { background-color:#eee; }
tr:nth-child(even)   { background-color:#fff; }

Ответ 2

JQuery может сделать это на стороне клиента (и я, вероятно, использовал бы скрипты на стороне клиента, а не серверную логику).

 $("tr:odd").css("background-color", "#bbbbff");

Вы также можете использовать просто переменную для установки класса css (почти псевдокода):

@foreach (Profession profession in Model)
{
    @i++;
    <td class="@i%2==0?"even":"odd""> 

}

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

Ответ 4

Извините, что это немного тупой ответ, поскольку вы уже делаете разметку, но поскольку ваша таблица выглядит довольно стандартно, вы можете переключиться на использование помощника веб-гридов Mvc. Это аккуратный инструмент для таблиц, подобных этому. Я думаю, что ваш код будет немного короче/проще для этой конкретной таблицы, и фактическая реализация чередующегося стиля строки будет очень простой:

alternatingRowStyle: "alternateRow"

Дополнительная информация о этом блоге asp.net.

Ответ 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() и оттуда.

Простой и эффективный...