Razor Visualizza righe dinamiche della tabella

Question

Voglio avere una tabella nella mia vista che sta per mettere 3 elementi dal mio modello in ogni riga. Quindi il modo in cui stavo per farlo è quello di fare il loop del modello e all'interno del ciclo foreach fare un controllo su una variabile di conteggio che ho impostato. Se count mod 3 == 0 farei qualcosa come </tr><tr> per iniziare una nuova riga. Questo non funziona nel modo in cui lo voglio perché avrei un } dopo il <tr>. Quindi in pratica la mia domanda è: come creo una tabella dinamica all'interno di una vista del rasoio basata sugli elementi del modello in cui ogni riga ha 3 elementi?

@{ 
int count = 0; 
<div> 
<table> 
<tr> 
@foreach (var drawing in Model) 
{ 
    <td style="width:240px;margin-left:30px; margin-right:30px;"> 
    <img src="@Url.Action("GetImage", "Home", new { id = drawing.drw_ID })" alt="drawing" /> 
    </td> 
    count++; 
    if(count%3==0) 
    { 
     </tr> 
     <tr> 
    } 
} 
</tr> 
</table> 
</div> 
} 

forse c'è un modo molto più semplice di fare questo che non sto pensando a

Answer 1

ne dite di usare due loop - questo renderà il documento sia di installazione molto più bene e lo rendono un po 'più leggibile . Inoltre, si prende cura dei problemi che si verificano se il numero di righe non è divisibile per tre:

<div> 
<table> 
@for(int i = 0; i <= (Model.Count - 1)/3; ++i) { 
    <tr> 
    for(int j = 0; j < 3 && i + j < Model.Count; ++j) { 
    <td style="width:240px;margin-left:30px; margin-right:30px;"> 
     <img src="@Url.Action("GetImage", "Home", new { id = Model[i + j].drw_ID })" alt="drawing" /> 
    </td> 
    } 
    </tr> 
} 
</table> 
</div> 

cura per riflettere il codice incollato. Nota, questo presuppone il modello implementa IList o un array

Answer 2

Maybee questa è la soluzione che state cercando per lavori per me

@{ 
int count = 0; 
** 
var tr = new HtmlString("<tr>"); 
var trclose = new HtmlString("</tr>"); 
** 
<div> 
<table> 
<tr> 
@foreach (var drawing in Model) 
{ 
    <td style="width:240px;margin-left:30px; margin-right:30px;"> 
    <img src="@Url.Action("GetImage", "Home", new { id = drawing.drw_ID })" alt="drawing" /> 
    </td> 
    count++; 

    if(count%3==0) 
    { 
    ** 
    trclose 
    tr 
    ** 
    } 
} 
</tr> 
</table> 
</div> 
} 

Answer 3

check this out, questo dovrebbe funzionare per voi !!!

<h2>Index</h2> 
<table> 
    <tr> 
     @{ 
      var index = 0; 
     } 

     @foreach (int num in Model) 
     { 
      if ((index % 10) == 0) 
      { 
      @Html.Raw("</tr>"); 
      @Html.Raw("<tr>"); 


      } 
      <td> 
       <h2>@num</h2> 
      </td> 
      index++; 
     } 
    </tr> 
</table> 

Answer 4

La soluzione @christian lavorato per me.I non era sicuro di "trclose" e "tr" da cui distacco qui la soluzione che ha funzionato per me in vista rasoio.

<table> 
     <tr><td><input type="checkbox" id="chkAssetCategories" />&nbsp;SELECT ALL</td></tr> 
     <tr> 
     @{ 
      var count=0; 
      foreach (var item in Model.AssetCategories) 
       { 
        <td><input type="checkbox" class = "Catgories" id='@item.ID' value ='@item.ID' /><label>@item.Name</label></td> 
        if (count%5 == 0) 
        { 
         @:</tr><tr> 
        } 
        count++; 
       } 
     } 
     </table> 

Answer 5

@{ int counter = 0;} 
<div> 
    <table> 
     @for(int i = 0; i <= (Model.Count - 1)/3; ++i) { 
      <tr> 
       for(int j = 0; j < 3; ++j) { 
         <td style="width:240px;margin-left:30px; margin-right:30px;"> 
          @Model[counter] 
         </td> 
         counter++; 
       } 
      </tr> 
     } 
    </table> 
</div>