asp.net mvc - самый простой способ обеспечить альтернативную стилизацию строк в Razor

Question

Учитывая следующий код бритвы:

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

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

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

Answer 1

Я бы порекомендовал сделать это простым CSS ( см. Здесь для получения более подробной информации ):

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

Answer 2

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

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

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

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

}

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

Answer 4

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

alternatingRowStyle: "alternateRow"

Подробнее о этот блог asp.net .

Answer 5

Поскольку вы используете MVC Razor, использование функции @helper - это самый простой, чистый и лучший подход.

В папке App_Code вашего проекта добавьте новый элемент или измените существующий файл CustomeHelpers.cshtml следующим образомcode:

@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 () и переходите оттуда.

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