ultimo - saber si un elemento existe en una lista c#

C#MVC3 Razor alternar elementos en una lista @foreach?

Question

En MVC3, ¿cómo se crean colores de fila alternativos en una lista @foreach cuando se usa el motor Razor view?

@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

¿Qué pasa con el uso del complemento jQuery DataTable? Lo usé en una aplicación MVC2 que desarrollé.

http://www.datatables.net/

Answer 2

¿Qué tal algo como esto?

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

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

formato: @Prop (@ item.Prop)

Answer 4

Con ASP.NET MVC 3 y la nueva sintaxis de @helper, hay una manera más ordenada de manejar esto.

Primero agregue este método @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++;
}

Luego simplemente agrega la llamada al ayudante en tu elemento <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 5

Esto es lo que CSS es para (cambiar el estilo en lugar del contenido). Ahorre el esfuerzo del servidor: hágalo en el cliente.

Como está usando Razor, puede usar JQuery. Así es como lo hago en mis proyectos:

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

Answer 6

Lo que puede hacer es establecer una variable odd fuera de foreach()

@{
    var odd = false;
}

Y luego, dentro de su ciclo foreach, cambiaría su valor y luego lo usaría en una condición if para establecer las clases alternas.

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

Answer 7

No hay mucha documentación al respecto, pero el Loop Helper ( http://nuget.org/Packages/Packages/Details/Loop-Helper-for-WebMatrix-0-1 ) le brinda soporte para detectar Even / Odd / etc. . artículos.

Answer 8

Original: http://15daysofjquery.com/table-striping-made-easy/5/ Autor: Jack Born jQuery Zebra_Striping_Made_Easy

=============== Guión de 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 9

Podrías dejar que el marco decida la mejor forma de renderizarlo, presumiblemente usando un poco de lógica de detección del navegador y cualquier otra bondad que tenga incorporada, algo como lo siguiente, y sigas con tu vida.

:-)

Mi punto es que con este enfoque, WebGrid controlará los colores alternos de la grilla utilizando la mejor tecnología que pueda (mejor que esté diseñada para usar, al menos) para el navegador detectado. Puede que no use la sintaxis CSS "nth", pero eso podría no funcionar para toda la audiencia prevista, de todos modos, por lo que tendría que detectar el navegador y emitir contenido diferente por su cuenta. Por supuesto, todos deberían usar un navegador que cumpla con CSS 3.x, pero el kilometraje varía.

@myWebGrid.GetHtml
    (
    tableStyle: "some-style",
    headerStyle: "some-head-style",
    alternatingRowStyle: "some-fancy-alt-row-style",
    etc ...
    )

La firma del método GetHtml System.Web.Helpers.WebGrid ve así:

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

Answer 10

Siempre puedes hacerlo en css puro usando:

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

Answer 11

Suponiendo que prefiera no usar CSS (es decir, :nth-child(odd) ) puede:

• usa un ciclo for normal:

  @for (int i = 0; i < Model.Count; i++)
  {
      ...
  }

• use. .Select :

  @foreach (var item in Model.Select((x, i) => new { Data = x, Index = i }))
  {
      ...
  }

De cualquier manera, tendría acceso al índice actual y podría usar i % 2 == 1 como condición para el color de fondo. Algo como:

<tr style="background-color:@(i % 2 == 1 ? "red" : "white")">...</tr>

Answer 12

Una publicación anterior, pero ninguna de las respuestas cubrió este enfoque, así que lo haré.

Ya que está utilizando MVC Razor utilizando la función @helper es el enfoque más simple, más limpio y mejor.

En la carpeta App_Code de su proyecto, agregue un nuevo elemento o modifique su archivo existente CustomeHelpers.cshtml con el siguiente código:

@helper AlternateBackground(string color, Int32 iViewBagCount) {
    if (iViewBagCount == null) { iViewBagCount = 0; }
    <text>style="background-color:@(iViewBagCount % 2 == 1 ? color : "none")"</text>
    iViewBagCount++;
}

Luego, en su vista, su ciclo foreach se vería así:

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

Puede pasar un identificador de color como "#ECEDEE" o el color con el nombre "Azul".

De esta forma, solo tiene que agregar la función @Helper una vez y se propaga a través de su aplicación y se puede invocar en cada vista según sea necesario haciendo referencia a la función @CustomHelpers.

Answer 13

Una solución que uso para soportar IE8 (navegador corporativo, no por elección) fue combinar la solución de lotus con una solución jquery

Como IE8 no es compatible con nth-child() use este css

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

Y usa jQuery para hacer esto:

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

Answer 14

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