0

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>
Raj
  • 73
  • 5
  • 15
  • Instead of a `foreach` loop use a `for` loop with index and do a modulo (%2) calculation on index to determine odd or even (left or right). – Jasen Sep 11 '13 at 23:10
  • Hi can you check my comment on comet answer.I am getting Operator '/' cannot be applied to operands of type'System.Collections.Generic.List' and 'int error.. – Raj Sep 12 '13 at 07:13

2 Answers2

1

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

U.P
  • 7,357
  • 7
  • 39
  • 61
  • Hi when i try to use for loop i am not able to type count that is model.count.Its not showing in intellisense. If i type i' and 'int .. what mistake i am doing? – Raj Sep 12 '13 at 07:11
  • `Count` is not available on `IEnumerable` you should use `@using System.Linq` on top of your view to enable it – U.P Sep 12 '13 at 07:38
  • Hi now i am getting cannot implicitly convert into to bool error. I am not able to use complex type also that is @model Market.Models.History. So i removed this and added using linq. – Raj Sep 12 '13 at 07:48
  • Hi comet now its working.You saved my day. but i am having one slight error. in first row i am getting 1st record on left and 2nd record on right side.but in 2nd row it is starting from 2nd record number instead of 3rd record. what i mean is 1st row - 1 2 and in second row - 2 3. but i want in second row 3 4. I know i am doing some mistake in for loop. can you help me in this? – Raj Sep 12 '13 at 08:10
  • Yeah, I get your point. Please see my updated answer. I have changed the loop. Now, your `i` will go from 0,2,4,6 and by doing `i+1` you get 0 at left, 1 at right, 2 at left, 3 at right and so on. – U.P Sep 12 '13 at 08:22
  • Hi just for curiosity i am asking what if i want to put 3 columns in a row? that is 1,2,3 and in next row 4,5,6? – Raj Sep 12 '13 at 09:03
  • Hi now i am facing one problem.In my table if i have only three records i am getting index out of range exception.How can i deal with this? – Raj Sep 13 '13 at 05:44
  • See my updated answer. You'll have to test for `i+1` value to be less than `Model.Count` in order to avoid `out of range exception`. You can do `i+=3` in for loop to get `left`, `middle`, and `right` – U.P Sep 13 '13 at 12:32
  • when i have only odd number of records my formatting is not working properly.some of my contents will place on right side. What i observed here is if i have only 3records then in fourth record place even cell is empty i can see pointer in that place since i am using pointer. So can i make this like if there is only odd row then loop should stop and should not proceed further? – Raj Sep 13 '13 at 14:08
1

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
    }
}
Jasen
  • 14,030
  • 3
  • 51
  • 68
  • Hi thanks for your reply. when i use comet's solution i got to know i should have even number of records in my table else i will get index out of range exception. So i will try yours and will see whether this works for odd numbers also. – Raj Sep 13 '13 at 05:47
  • Hi when i tried to implement your solution i dont know what mistake i am doing but i am not able to declare int of your first line in my view and i am getting columns doesnt exist in current context error. – Raj Sep 13 '13 at 14:10
  • @Raj you need to wrap that in `@{ int columns = 3; }` – Jasen Sep 13 '13 at 17:40
  • In my case I didnot declare columns, I just gave int col = i % 2; where I have 4 columns and 1 and 3, and 2 and 4 repeat. – Ziggler Jun 23 '16 at 14:52