How can I loop through my table to display contents side by side in MVC Razor View?

Question

How can I loop through my table to display contents side by side in MVC Razor View?

6.7k views Asked by Raj At 11 September 2013 at 18:37

Hi i want help in putting contents side by side.

Right now i can display content separately in left side and right side. But i need to display records from database. For this i am using foreach loop. So how i need to display is 1st records on left side and 2nd record on right side and 3rd on left and so on. How can i loop through like this.

I am stucked here.I need help..

I am using this code but all the contents are displaying as i told earlier.

   <body>
   @foreach (var item in Model)

        {
  <!-- Main Table(You can define padding accordingly) -->
    <table width="80%" border="0" cellspacing="0" cellpadding="5">
  <tr>
  <td width="50%">

   <!-- Table on left side -->
  <table width="100%" border="0" cellspacing="0" cellpadding="1">
    <tr>
  <td>
  <span class="Title">APP</span>
  <br/>
    <div class="listRowA" onmouseover="this.className='listRowAHover'" onmouseout="this.className='listRowA'">
    <div class="listPageCol"  onclick="location.href='../Home/ControlPanel'">
    <span class="listlCol1">

          <br />
             @item.ID
            </span>
      <span class="listCol2"><img src="../Content/Images/20_thumb.jpg" width="281" height="200" border="0" alt="image"  /></span>


         </div>
        </div>

      </td>

      </tr>

    <tr>
    <td>&nbsp;</td>
   <td></td>
   <td>&nbsp;</td>
   </tr>
    <tr>
   <td>&nbsp;</td>
   <td> </td>
   <td>&nbsp;</td>
  </tr>
  </table>
  <!-- END -->
  </td>
  <td width="50%">

  <!-- Table on right side -->
  <table width="100%" border="0" cellspacing="0" cellpadding="1">
  <tr>

   <td>
  <div class="listRowA" onmouseover="this.className='listRowAHover'"  onmouseout="this.className='listRowA'">
    <span class="listCol2"><img src="../Content/Images/20_thumb.jpg" width="281"  height="200" border="0" alt="image"  /></span></div>
    </td>
     </tr>
   <tr>
  <td>&nbsp;</td>
  <td></td>
   <td>&nbsp;</td>
  </tr>
   <tr>
  <td>&nbsp;</td>
  <td> </td>
 <td>&nbsp;</td>
   </tr>
 </table>
  <!-- END -->
   </td>
  </table>

<!-- END OF MAIN TABLE -->
    }
 </body>

Original Q&A

There are 2 answers

Jasen On 12 September 2013 at 23:59

Using this pattern you can make as many columns as you like. If you're using an html table you need to also test if you need blank cells when the total collection size is not divisible by columns.

@{
    int columns = 3;
}

@for (int i = 0; i < Model.Count; i++)
{
    var currentModel = Model[i];

    int col = i % columns;

    if (col == 0)
    {
        // left
    }
    else if (col == 1)
    {
        // middle
    }
    else  // col == 2
    {
        // right
    }
}

**U.P** · Accepted Answer · 2013-09-12 02:13:42

Instead of

@foreach (var item in Model)

use

@for (var i=0; i < Model.Count; i+=2)
{

}

and access properties of model like

 @Model[i].ID

In order to determine which should go to right which should go left you can use

@Model[i].ID for left

and

@if(i+1 < Model.Count)
{
  Model[i+1].ID for right
}

Just make sure that i+1 is never more than Model.Count

TechQA.

How can I loop through my table to display contents side by side in MVC Razor View?

There are 2 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in ASP.NET-MVC

Related Questions in RAZOR

Related Questions in ASP.NET-MVC-VIEWS

Popular Questions

Popular Tags

Trending Questions