c# - ASP.NET mvc html 列显示

Question

我想构建两列，第一列应包含 FirstList 的元素，第二列应包含 SecondList 的元素。为什么在我的实现中将一列放在另一列下面？如何解决这个问题？我需要使用 css 样式而不是 html？

Controller 和类:

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

索引.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 相应地定位它们。

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