MVC formatting td dynamically

Question

I am new to razor engine syntax and I have issue with formatting adding the logic in the view. Here is what I want to accomplish. I have collection of items coming from model. I need to iterate that collection and align 6 item in a row.

This is how the final output should look like:


<table>
   <tr>   
     <td>checkbox comes here</td>
     <td>checkbox comes here</td>
     <td>checkbox comes here</td>
   </tr>   
   <tr>   
     <td>checkbox comes here</td>
     <td>checkbox comes here</td>
     <td>checkbox comes here</td>
   </tr>   
    ................. and so on
</table>

Here is the code I wrote in the view


 <table>
     @for (int i = 0; i <= Model.checkItems.Count; i++)
     {
          if (i % 6 == 0)
          { <tr> }

               <td>
                 <input type="checkbox" 
                    id="chk_@(Model.checkItems[i].DisplayText)"
                    name="chk"
                    nameVal = "@Model.checkItems[i].DisplayText"
                    value="@Model.checkItems[i].Value"/>

                 <label for="chkGroup_@(Model.checkItems[i].DisplayText)">@Model.checkItems[i].DisplayText
               </td>                        

           if(i % 6 == 0) 
           { </tr> }

       }                    
</table>

When the page finally gets rendered, the first if condition getting executed but not the second one. Can somebody help to figure out how the accomplish this?

Shyju · Accepted Answer · 2012-08-24 14:08:04Z

1

Try this

<table>
@{    int count = 0; } 
<tr>
@foreach (var item in Model.checkItems)
{
   <td>
       <input type="checkbox" 
                id="chk_@(item.DisplayText)"
                name="chk"
                nameVal = "@item.DisplayText"
                value="@item.Value"/>
       <label for="chkGroup_@(item.DisplayText)">@item.DisplayText</label>
   </td>
    if (++count % 6 == 0)
    {
        @:</tr><tr>
    }    
} 
</tr>
</table>

answered Aug 24, 2012 at 14:08

Shyju

220k106 gold badges421 silver badges499 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MiiisterJim · Accepted Answer · 2012-08-24 13:41:54Z

0

You're missing a closing tag on your label

<label for="chkGroup_@(Model.checkItems[i].DisplayText)">@Model.checkItems[i].DisplayText

should be

<label for="chkGroup_@(Model.checkItems[i].DisplayText)">@Model.checkItems[i].DisplayText</label>

answered Aug 24, 2012 at 13:41

MiiisterJim

4291 gold badge5 silver badges16 bronze badges

3 Comments

Krishna Over a year ago

Its my bad.. I have it in the code, when I am formatting in the stackoverflow, it got missed.. but my actual view has the closing label tag.

MiiisterJim Over a year ago

ok, try changing your second if statement to @if(i % 6 == 0) { @:</tr> } as it might still think it's in text mode from the code prior to this, this tells it that you're swapping back into code....you may not need the @: inside the {} but won't do any harm

Krishna Over a year ago

No luck :( It was throwing that : is invalid in the context

Forty-Two · Accepted Answer · 2012-08-24 14:08:51Z

0

would this work:

<table>
     @for (int i = 0; i <= Model.checkItems.Count; i++)
     {
          if (i % 6 == 0)
          { 
            <tr> 
               <td>
                 <input type="checkbox" 
                    id="chk_@(Model.checkItems[i].DisplayText)"
                    name="chk"
                    nameVal = "@Model.checkItems[i].DisplayText"
                    value="@Model.checkItems[i].Value"/>

                 <label for="chkGroup_@(Model.checkItems[i].DisplayText)">@Model.checkItems[i].DisplayText
               </td>                        

           </tr> 
          }

       }                    
</table>

answered Aug 24, 2012 at 14:08

Forty-Two

7,6252 gold badges39 silver badges54 bronze badges

Comments

Ian Routledge · Accepted Answer · 2012-08-24 15:18:50Z

Here's another solution that uses 2 nested loops for rows and columns. I don't know if its necessarily better (it certainly looks more complicated on the face of it), but it does at least allow you to easily see the nested nature of the rows and cells:

<table>
@{
    const int cols = 3;
    int rows = (Model.checkItems.Count + cols - 1) / cols;
}
@for (int rowIndex = 0; rowIndex < rows; rowIndex++)
{
    <tr>
        @for (int colIndex = rowIndex * cols; colIndex < Math.Min(Model.checkItems.Count, cols * (rowIndex + 1)); colIndex++)
        {
           <td>
             <input type="checkbox" 
                id="chk_@(Model.checkItems[colIndex].DisplayText)"
                name="chk"
                nameVal="@Model.checkItems[colIndex].DisplayText"
                value="@Model.checkItems[colIndex].Value"/>

             <label for="chkGroup_@(Model.checkItems[colIndex].DisplayText)">@Model.checkItems[colIndex].DisplayText</label>
           </td>
        }
    </tr>
}
</table>

Collectives™ on Stack Overflow

MVC formatting td dynamically

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related