Razor View dynamic table rows

Question

I want have a table in my view that is going to put 3 elements from my Model in each row. So the way I was going to do this is to loop through the model and inside of the foreach loop do a check on a count variable I have set up. If count mod 3 == 0 I would do something like </tr><tr> to start a new row. This isn't working the way I want it to because I would have a } following the <tr>. So basically my question is, how would I create a dynamic table inside of a razor view based on the elements in the model where each row has 3 items?

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

Maybe there is a much easier way of doing this that I am not thinking of

Solution 1

How about using two loops - this will make your document be setup much more nicely and make it a bit more readable. Also, it takes care of the problems that occur if the number of rows is not divisible by three:

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

Edited to reflect your pasted code. Note, this assumes the model implements IList or an array

Solution 2

Maybee this is the solution you are looking for works for 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> 
} 

Solution 3

Check this out, this should work for you !!!

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

Solution 4

The @christian solution worked for me.I was not sure of "trclose" and "tr" hence posting here the solution that worked for me in razor view.

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

View more solutions

Comments

[esastincy]

I am not sure what you are trying to do here, but I think if you look at my code you will see that we seem to be talking about 2 different things

[eouw0o83hf]

No, I'm just going about it in a much different way - I've updated my code to reflect exactly what you're trying to do. Note that it assumes that the Model is an IEnumerable or array.

[esastincy]

I like this solution. I am in a meeting at work but 2 things. 1) In the image tag it will need to be Model[i + j]. 2) Wont integer division just truncate the remainder?

[eouw0o83hf]

Yes, you're correct, it does need to be Model[i+j] - I had that previously but missed it in the edit. Regarding integer division: by doing <= Model.Count / 3 (less than or equal to), we won't truncate. However, you will need another clause in your inner loop that makes sure (i + j) is always < count of the Model.

[eouw0o83hf]

Final edit: Changed the outer loop constraint to i <= (Model.Count - 1). This will eliminate the possibility of a trailing, empty <tr> for counts that are multiples of 3.

[esastincy]

If Model.Count = 28, then Model.Count / 3 will round to 9. So we would have 9 rows, and the 28th elements would be missed

[eouw0o83hf]

If Count = 28, i will run from 0 to 9, inclusive. So we have 10 rows (0 - 9), with the last row not being full.

[Lee Seongho]

I'm not sure about the entire suggestion, but the @Html.Raw() did the trick for me.

[AH.]

I think there is an issue with this solution. The loop variable "i" corresponds to the row and "j" corresponds to the column. So i guess you should write "for(int j = 0; j < 3 && i*3 + j < Model.Count; ++j)" and "new { id = Model[i*3 + j].drw_ID })" " if you want 3 columns in each row.

[Draken]

You may want to expand on your answer a bit, explain the code and make it more useful for the user

[Mike Homol]

@AH. Thanks for your updated comment. It was the missing piece to making this solution reusable for any variable amount of columns.