Полосатые строки таблицы в ASP.NET MVC (без использования jQuery или аналогичного) - PullRequest
10 голосов
/ 16 апреля 2009

При использовании ASP.NET WebForms Элемент управления ListView для отображения данных в таблице HTML Я использую следующую технику для «чередования» строк таблицы:

<ItemTemplate>
    <tr class="<%# Container.DisplayIndex % 2 == 0 ? "" : "alternate" %>">
        <!-- table cells in here -->
    </tr>
</ItemTemplate>

Со следующим CSS:

tr.alternate
{
    background-color: #EFF5FB;
}

Я только что прошел ASP.NET MVC Учебное пособие по базе данных фильмов и узнал, что строки таблицы MVC-land могут (должны быть?) Построены следующим образом:

<% foreach (var item in Model) { %>
    <tr>
        <td>
            <%= Html.Encode(item.Title) %>
        </td>
        <!-- and so on for the rest of the table cells... -->
    </tr>
<% } %>

Что я могу добавить к этому коду для чередования строк моей таблицы?

Примечание: я знаю, что это можно сделать , используя jQuery , я хочу знать, можно ли это сделать другим способом.

Редактировать

Если jQuery (или его эквивалент), по вашему мнению, является лучшим или наиболее подходящим сообщением, мне было бы интересно узнать, почему.

Ответы [ 3 ]

31 голосов
/ 17 апреля 2009

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

<% int i=0; foreach (var item in Model) { %>
    <tr class="<%= i++ % 2 == 0 ? "alternate" : "" %>">
        <td>
            <%= Html.Encode(item.Title) %>
        </td>
        <!-- and so on for the rest of the table cells... -->
    </tr>
<% } %>
7 голосов
/ 16 апреля 2009

А как насчет метода расширения?

public static void Alternate<T>(this IEnumerable<T> items, Action<T, bool> action)
{
    bool state = false;
    foreach (T item in items)
        action(item, state = !state);
}

Так вы могли бы сказать:

<% movies.Alternate((movie, alt) => { %>
  <tr class="<%= alt ? "alternate" : "" %>">
    <td>
        <%= Html.Encode(movie.Title) %>
    </td>
    <!-- and so on for the rest of the table cells... -->
  </tr>
<% }); %>

Изменить, кроме того, если вы хотите индекс, вы можете использовать метод расширения, например:

public static void Each<T>(this IEnumerable<T> items, Action<T, int> action)
{
    int state = 0;
    foreach (T item in items)
        action(item, state++);
}
0 голосов
/ 10 июня 2010

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

<% foreach (var item in Model.Alternating("alternate","") { %>
<tr class="<%= item.ClassName %>">
    <td>
        <%= Html.Encode(item.Model.Title) %>
    </td>
    <!-- and so on for the rest of the table cells... -->
</tr>
<% } %>

Который использует этот метод расширения:

 public class AlternatingItem<T> 
  {
   public string ClassName { get; set; }
   public T Model { get; set; }
  }
  public static IEnumerable<AlternatingItem<T>> Alternating<T>(this IEnumerable<T> model, string oddString, string evenString) 
  {
   int i = 0;
   var query = from x in model
      let c = i++ % 2 == 0 ? oddString : evenString
      select new AlternatingItem<T>() { ClassName = c, Model = x };
   return query;
  }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...