CODEWITHSUNDEEP
c#htmlcssasp.netasp.net-mvc-4
A191919
A191919

Reputation: 3462

ASP.NET mvc html columns displaying

I want to build two columns , first column should contain items of FirstList second column should contain items of SecondList. Why in my implemetation it's placing one column under another? How to fix this? I need to uss css style instead of html?

Controller and classes:

namespace MvcApplication4.Controllers
{
public class HomeController : Controller
{
    //
    // GET: /Home/

    public ActionResult Index()
    {
        List<Employee> emp1 = new List<Employee>();
        emp1.Add(new Employee { Number="1",Text="dfsfdsfsafdsafdasfadsf"});
        emp1.Add(new Employee { Number = "2", Text = "asdfsa" });
        emp1.Add(new Employee { Number = "3", Text = "dfsfdsfdasfsafdsafdasfdsafsaadsf" });
        List<Employee> emp2 = new List<Employee>();
        emp2.Add(new Employee { Number = "1", Text = "dfsfdsfsafdsafdasfadsf" });
        emp2.Add(new Employee { Number = "2", Text = "asdfsa" });
        emp2.Add(new Employee { Number = "3", Text = "dfsfdsfdasfsafdsafdasfdsafsaadsf" });
        emp2.Add(new Employee { Number = "4", Text = "asdfsa" });
        emp2.Add(new Employee { Number = "5", Text = "dfsfdsfdasfsafdsafdasfdsafsaadsf" });
        return View(new IndexViewModel { FirstList = emp1, SecondList = emp2 });
    }
}
public class IndexViewModel
{
    public IEnumerable<Employee> FirstList { get; set; }

    public IEnumerable<Employee> SecondList { get; set; }
}
public class Employee
{
    public string Text { get; set; }

    public string Number { get; set; }
}
}

Index.cshtml

@model MvcApplication4.Controllers.IndexViewModel
@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<table>

<tbody>
    @foreach (var item in Model.FirstList)
    {
        <tr>
            <td>@item.Number</td>
            <td>@item.Text</td>
        </tr>
    }
    @foreach (var item in Model.SecondList)
    {
        <tr>
            <td>@item.Number</td>
            <td>@item.Text</td>
        </tr>
    }
</tbody>
</table>

Upvotes: 3

Views: 523

Answers (2)

Ahmet Remzi EKMEKCI
Ahmet Remzi EKMEKCI

Reputation: 394

This code works as you expect:

<table border="1">
    <thead>
        <th colspan="2">First List</th>
        <th colspan="2">Second List</th>
    </thead>
    <tbody>
        @for (int i = 0; i < Math.Max(Model.FirstList.Count(), Model.SecondList.Count()); i++)
        {
            Employee  first = Model.FirstList.Count() > i ? Model.FirstList.ToList()[i] : null;
            Employee second = Model.SecondList.Count() > i ? Model.SecondList.ToList()[i] : null;
            <tr>
                <td>@(first?.Number)</td>
                <td>@(first?.Text)</td>
                <td>@(second?.Number)</td>
                <td>@(second?.Text)</td>
            </tr>
        }
    </tbody>
</table>

You should merge both foreach loops to display lists side by side.

Upvotes: 1

Matthew Alltop
Matthew Alltop

Reputation: 545

You're writing both models' values into the same table directly on top of each other. In order to achieve what I think it is you are trying to do, you will need to separate the values into separate tables and position them accordingly with HTML and CSS.

   @model MvcApplication4.Controllers.IndexViewModel
@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<table>

<tbody>
    @foreach (var item in Model.FirstList)
    {
        <tr>
            <td>@item.Number</td>
            <td>@item.Text</td>
        </tr>
    }
</tbody>
</table>
<table>
<tbody>
   @foreach (var item in Model.SecondList)
    {
        <tr>
            <td>@item.Number</td>
            <td>@item.Text</td>
        </tr>
    }
</tbody>
</table>

Upvotes: 3

Related Questions