CODEWITHSUNDEEP
asp.net-mvcasp.net-mvc-3razor
Krishna
Krishna

Reputation: 1966

MVC formatting td dynamically

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?

Upvotes: 2

Views: 888

Answers (4)

Ian Routledge
Ian Routledge

Reputation: 4042

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>

Upvotes: 0

Forty-Two
Forty-Two

Reputation: 7605

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>

Upvotes: 0

Shyju
Shyju

Reputation: 218762

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>

Upvotes: 1

MiiisterJim
MiiisterJim

Reputation: 429

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>

Upvotes: 0

Related Questions