HTML 表格在一行中显示所有数据，而不是使用 MVC 的多行答案

【问题标题】：HTML table showing all data in one row instead of multiple rows with MVCHTML 表格在一行中显示所有数据，而不是使用 MVC 的多行
【发布时间】：2016-04-05 17:09:09
【问题描述】：

我正在使用 aws .net sdk 获取所有安全组并将它们显示在这样的表格中。

public object GetGroups()
    {
        var allSgRequest = new DescribeSecurityGroupsRequest();
        var allSgResponse = client.DescribeSecurityGroups(allSgRequest);
        var allSgGroups = allSgResponse.SecurityGroups;
        return allSgGroups;
    }

在我的控制器中，我调用该方法并将数据传递到我的视图中

 public ActionResult SecurityGroups()
    {
        dynamic model = new ExpandoObject();
        SecurityGroupModel sgm = new SecurityGroupModel();
        var awsGroups = sgm.GetGroups();
        model.group = awsGroups;
        return View(model);
    }

变量 awsGroups 看起来像这样

我在视图中设置的表使用 JQuery 的数据表插件，看起来像这样

@model dynamic

@{
ViewBag.Title = "SecurityGroups";
}
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery- 1.10.2.js"></script>
<link rel="stylesheet" type="text/css" href="/DataTables/datatables.css" />
<script type="text/javascript" src="/DataTables/datatables.js"></script>

<h2>SecurityGroups</h2>

<table id="table" class="table table-bordred table-striped">
<thead>
    <tr>
        <th>Group ID</th>
        <th>Group Name</th>
        <th>VPC ID</th>
    </tr>
 </thead>
 <tbody>
     @foreach (var group in Model.group)
     {
     <td>@group.GroupId</td>
     <td>@group.GroupName</td>
     <td>@group.VpcId</td>
     }
 </tbody>

<script type="text/javascript">
$('#table').DataTable();
</script>

但是，当我运行程序并进入我的视图时，数据显示很奇怪，并在一行上显示我的所有组，而不是在多行上正确显示。像这样

为什么我的数据只显示在一行上？

【问题讨论】：

标签： .net asp.net-mvc datatables

【解决方案1】：

您缺少<tr> 标签：

 <tbody>
     @foreach (var group in Model.group)
     {
     <tr>
     <td>@group.GroupId</td>
     <td>@group.GroupName</td>
     <td>@group.VpcId</td>
     </tr>
     }
 </tbody>

这真的只是简单、格式良好的 HTML。 <table> 中的每一行都由 <tr> 标签表示，没有它，它甚至不是一个有效的 HTML 表格，而且它的显示方式可能因浏览器而异。

【讨论】：

谢谢！我是 .net 的新手，很高兴我错过了一件简单的事情。