ASP.NET mvcのhtml列の表示

Question

私は2列を構築したい、最初の列はFirstListの項目を含む必要があります第二列はSecondListの項目を含める必要があります。なぜ私の実装では、ある列を別の列の下に置くのですか？これを修正するには？私はHTMLの代わりに私たちのCSSスタイルが必要ですか？

コントローラーとクラス：

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> 

Answer 1

あなたが直接互いの上に同じテーブルに両方のモデルの値を書いています。あなたがしようとしていると思っていることを達成するためには、値を別々のテーブルに分けてHTMLとCSSで適切に配置する必要があります。

<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> 

あなたは両方のforeachはサイドでリスト側を表示するには、ループマージする必要があります

@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> 

Answer 2

このコードは期待どおりに動作します。