CODEWITHSUNDEEP
asp.net-mvcasp.net-mvc-4razornopcommerce
user1987035
user1987035

Reputation: 23

How to show data in columns in ASP.net?

I have some data which should be displayed in 5 columns. The current code works well and the data is picked from the database and displayed correctly in the first 5 columns (each column has 7 data).

But after the fifth column the next column should start below the first column, instead it starts from the second column and goes on.

Below is the code currently used.

 <li><a href="/c/@Model.CatList[0].Id/all/@Model.CatList[0].Name" class='white'>@Model.CatList[0].Name</a></li>

                      @for (int i = 1; i < Model.CatList.Count(); i++)
                      {
                            <li><a href="/c/@Model.CatList[i].Id/all/@Model.CatList[i].Name" class='white'>@Model.CatList[i].Name</a></li>


                          if (i % Model.FooterCount == 0)
                          {

                               @Html.Raw("</ul><ul>");
                                <li class='itemCaption f17o'>&nbsp;</li>
                          }

                      }

Upvotes: 0

Views: 200

Answers (1)

Colin Young
Colin Young

Reputation: 3058

Without more details of the exact html, you'll want to add a style="clear: left" on the first block for each row of your display. Something like:

@{
    int cellCount = 1;
    int columns = 5;

    var items = Model.CatList.Take(Model.FooterCount);
}

@while(items.Count > 0)
{
    string style = "float:left;"
    if(cellCount % columns == 0)
    {
        style += "clear:left;"
    }

    <ul style='@style'>
        @if (cellCount != 1)
        {
            <li class='itemCaption f17o'>&nbsp;</li>
        }

        @foreach(item in items)
        {
            <li>
                <a href="/c/@item.Id/all/@item.Name" class='white'>@item.Name</a>
            </li>
        }
    </ul>

    @{
    items = Model.CatList.Skip(cellCount * Model.FooterCount).Take(Model.FooterCount);
    cellCount++;
    }
}

I didn't like the embedded raw html closing the ul tags, so I modified the code to avoid that. I think it also expresses the intent more clearly.

Upvotes: 1

Related Questions