HTML表显示一行中的所有数据而不是MVC的多行

Question

我正在使用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的datatables插件，看起来像这样

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

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

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

Answer 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表格，它的显示方式可能因浏览器而异。