CODEWITHSUNDEEP
asp.netasp.net-mvcrazor
MrPixel6
MrPixel6

Reputation: 377

ASP.NET MVC multiple columns display in view

In my asp.net mvc website, I have a Model that contains 6 entries and I use this code to display it :

<table class="table" cellspacing="0">
    @foreach (var item in Model)
    {
    <tr>
        <td style="border:0 none;">
            @Html.DisplayFor(modelItem => item.name)
        </td>
    </tr>
    }
</table>

The Resulet is :

Homer

Bart

Lisa

Marge

Maggie

Moe

But How can I do to make it look like this : ( | is just for show they are in different columns)

Homer | Marge

Bart | Maggie

Lisa | Moe

PS : This is just an example ! I work with a database that count more than 100 entries so I need a solution that can work on for large amount of rows and not especially in 2 columns. I want to have like 10 items in a column and if I got an other, it goes in a new column

Thanks in advance

Upvotes: 1

Views: 8540

Answers (3)

user3559349
user3559349

Reputation:

Using table elements is not appropriate here because you not displaying tabular data, your just displaying a collection in columns of data. If you happy with displaying the data across the page, then its simply

@foreach (var item in Model)
{
    <div class="column">@item.name</div>
}

where the css is

.column {
    width: 25%; // adjust based on the number of columns you want
    float: left;
}

If you want to display them down the page (with 10 items per column), then its

@{ int i = 0; }
<div class="container">
    <div class="column">
        @foreach (var item in Model)
        {
            if (i > 0 && i % 10 == 0)
            {
                // close the div and start again
                @:</div><div class="column">
            }
            <div>@item</div>
            i++;
        }
    </div>
</div>

where the css is

.container {
    width: 800px;
    overflow-x: scroll;
    white-space:nowrap;
}
.column {
    display: inline-block;
    width: 200px;
}

Note in the above example you could replace if (i > 0 && i % 10 == 0) with (say) if (i > 0 && i % @ViewBag.Rows == 0) in order to control the number of items per column in the controller

Upvotes: 6

andreasnico
andreasnico

Reputation: 1488

Try this:

The view:

@for (int i = 0; i < Model.Items.Count; i += Model.ColumnCount)
{
    <tr>
        @for (int j = 0; j < Model.ColumnCount; j++)
        {
            <td style="border:0 none;">
                @Html.DisplayFor(modelItem => Model.Items[i+j].Name)
            </td>
        }
    </tr>
}

The Action in the Controller:

public ActionResult Index()
{    
    MyViewModel model = new MyViewModel    
    {
            Items = new List<Person>
            {
                new Person { Name = "Homer"},
                new Person { Name = "Lisa"},
                new Person { Name = "Maggie"},
                new Person { Name = "DoctorWho"},
                new Person { Name = "SantaClaus"},
                new Person { Name = "Pippi"},
            },
            ColumnCount = 3
        };
        return View(model);
}

The ViewModel and Person-class:

public class MyViewModel
{
    public List<Person> Items { get; set; }
    public int ColumnCount { get; set; }
}

public class Person
{
    public string Name { get; set; }
}

Edit: I Adjustet my answer to reflect your question

As a sidenote: You should add code to handle the edge-cases. I.e When the number of persons in the list is 10, and your column-count is 3, something gonna break.

Upvotes: 0

SamGhatak
SamGhatak

Reputation: 1493

Try this:

<table class="table" cellspacing="0">
    @for (int i = 0; i < Model.Count/2; i++)
    {
        <tr>
            <td style="border:0 none;">
                @Html.DisplayFor(modelItem => item[i].name) 
            </td>
            <td style="border:0 none;">
                @Html.DisplayFor(modelItem => item[(Model.Count/2)+i+1].name)
            </td>
        </tr>
    }
</table>

Upvotes: 0

Related Questions