Parece que no se puede crear condicionalmente una nueva fila de tabla usando las instrucciones foreach y if de Razor.

Question

Quiero un bucle para crear dinámicamente una tabla de hasta 2 columnas de ancho, y luego aumentar el número de filas hasta que no queden entradas en la lista. Suena fácil, y se me ocurrió esto:

<table> 
        <tr> 
         @{ var i = 0; } 
         @foreach (var tm in Model.TeamMembers) 
         { 
          <td>@tm.FirstName @tm.LastName @tm.Role</td> 

          if(++i % 2 == 0) 
          { 
           </tr> 
           <tr> 
          } 
         } 
        </tr> 
       </table> 

Pero consigo errores que indican} esperado tanto para el bucle y la sentencia if. Si cambio las etiquetas a otra cosa (como por ejemplo), funciona bien.

Supongo que está tratando de validar el final de la fila, lo ve y decide que el ciclo debe haber terminado? ¿Cómo puedo hacerlo NO hacer eso, o tengo que poner toda la mesa dentro del ciclo con un montón de condicionales desordenadas? :(

Answer 1

Trate de esta manera:

@{ var i = 0; } 
@foreach (var tm in Model.TeamMembers) 
{ 
    <td>@tm.FirstName @tm.LastName @tm.Role</td> 
    if(++i % 2 == 0) 
    { 
     <text></tr><tr></text> 
    } 
} 

o:

@{ var i = 0; } 
@foreach (var tm in Model.TeamMembers) 
{ 
    <td>@tm.FirstName @tm.LastName @tm.Role</td> 
    if(++i % 2 == 0) 
    { 
     @:</tr><tr> 
    } 
} 

Answer 2

Razor espera que el código HTML siguiente de su código C# para ser encerrado en un par de etiquetas html Aquí tenemos. la etiqueta de finalización primero, y la etiqueta de inicio posterior, es por eso que la afeitadora tuvo problemas para analizar el texto.

Encerrando su bloque de código html para resolver este problema como lo señala Darin.

se podía leer esta guía rápida de Phil Haacked http://haacked.com/archive/2011/01/06/razor-syntax-quick-reference.aspx

Answer 3

En la sintaxis Razor puede utilizar el @: Para insertar texto literal.

@:This allows literal text & arbitrary html 

Puede ver cómo esto se implementa en mi solución publicada a continuación. Cierra correctamente la tabla con el número correcto de celdas de la tabla por fila.

Necesitaba una lista de botones de opción tabulares con la capacidad de vincular un valor seleccionado.

@{ 
    int iSelectedId = (int)ViewData["SelectedMember"]; 
    long iCols = 3; 
    long iCount = Model.TeamMembers.Count(); 
    long iRemainder = iCount % iCols;      
    decimal iDiv = iCount/repeatCols;      
    var iRows = Math.Ceiling(iDiv); 
} 
<table> 
    <tr> 
    @for (int i = 0; i < iCount; i++) 
    { 
     var tm = Model.TeamMembers[i]; 
     <td><input type="radio" name="item" value="@(tm.Id)" @(tm.Id == iSelectedId) ? "checked=checked" : "") /> @(tm.FirstName) @(tm.LastName)) - @(tm.Role) </td> 

     if (i % iCols == iCols -1 && i < iCount - 1) 
     { 
     //The alternate syntax for adding arbitrary text/html @: 
     //was crucial in getting this to work correctly. 
     @:</tr><tr> 
     } 
    } 
    if (iRem > 0) 
    { 
     <td colspan="@(iCols - iRem)">&nbsp;</td> 
    } 
    </tr> 
</table>