How can I loop through my table to display content

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>

标签： html css asp.net-mvc razor asp.net-mvc-views

2条回答

做个烂人

2楼-- · 2019-09-13 10:25

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

0人赞添加讨论(0) 举报

Summer. ? 凉城

3楼-- · 2019-09-13 10:50

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

0人赞添加讨论(0) 举报

How can I loop through my table to display content

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间