How to use If mode statement correctly inside Html code

Question

I have a "td" which contains 9 pictures and i want to split them 3 by 3. So i want to get a view like this:

Pic1 Pic2 Pic3
Pic4 Pic5 Pic6
Pic7 Pic8 Pic9

Here is my View code.

@for (int k = 0; k < Model.Count; k++)
  {
  <td>
  <img src="(Model[k].Pic)" width="80" height="90" />
  </td>
  }

I am trying to split pics by this code:

@for (int k = 0; k < Model.Count; k++)
{
 <td>

 <div>
  <img src="(Model[k].Pic)" width="80" height="90" />

  </div>   
 @if (k % 3 == 0)
{
     @:<div></div>
}

     </td>
  }

But i can't split pictures. It's an easy code but i failed. Where the problem is?

Ufuk Hacıoğulları · Accepted Answer · 2015-01-07 08:29:47Z

2

You can create a LINQ method to create partitions with a specified size:

public static class PartitionExtensions
{
    private static IEnumerable<IEnumerable<T>> ToSizedPartition<T>(IEnumerable<T> source, int size)
    {
        int currentPartitionCount = 0;
        T[] array = null;

        foreach (T item in source)
        {
            if (array == null)
            {
                array = new T[size];
            }

            array[currentPartitionCount] = item;
            currentPartitionCount++;

            if (currentPartitionCount == size)
            {
                yield return array;
                currentPartitionCount = 0;
                array = null;
            }
        }

        if (array != null)
        {
            Array.Resize(ref array, currentPartitionCount);
            yield return array;
        }
    }
}

Then change your view:

<td>
    @foreach (var partition in Model.ToSizedPartition(3))
    {
         <div>
             @foreach(var item in partition)
             {
                 <img src="@item.Pic" width="80" height="90" />
             }
         </div>
    }
</td>

answered Jan 7, 2015 at 8:29

Ufuk Hacıoğulları

38.6k14 gold badges120 silver badges157 bronze badges

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

4 Comments

kojirosan Over a year ago

Thank you for your answer. As a MVC rookie, it's hard to implement to me.

Ufuk Hacıoğulları Over a year ago

@ispanak It's not that hard. Just add PartitionExtensions class to your project.

kojirosan Over a year ago

How can i bind ToSizedPartition with my Model? I didn't get how to implement it. I just have a simple model which has 3-4 properties and one of them is Foto property.

Ufuk Hacıoğulları Over a year ago

@ispanak It's a generic extension method. You don't have to implement it for your type.

HardikS · Accepted Answer · 2015-01-07 08:47:08Z

1

You can simply use like mentioned below:

<table>
    <tr>
        <td>
            @for (int k = 0; k < Model.Count; k++)
            {
                if (k % 3 == 0 && k != 0)
                {
                    <div style="clear: both"></div>
                }
                <div style="float: left">
                    <img src="@Model[k].Pic" width="80" height="90" />
                </div>
            }
        </td>
    </tr>
</table>

answered Jan 7, 2015 at 8:47

HardikS

10.1k2 gold badges25 silver badges42 bronze badges

2 Comments

kojirosan Over a year ago

Thanks for your reply. I didnt get the result what i want.

HardikS Over a year ago

what result are you getting ?

Collectives™ on Stack Overflow

How to use If mode statement correctly inside Html code

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related