HTML table showing all data in one row instead of multiple rows with MVC

Question

I am using the aws .net sdk to get all security groups and show them in a table like so.

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

In my controller I call the method and pass the data into my view like so

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

The variable awsGroups looks something like this

My table set up in my view uses the datatables plugin for JQuery and looks like this

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

However when I run the program and go into my view the data displays weirdly and shows all of my groups on one row instead of displaying correctly on multiple rows. Something like this

Why is my data being displayed only on one row?

CodingGorilla · Accepted Answer · 2016-04-05 17:14:22Z

4

You're missing the <tr> tag:

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

This is really just simple, well formed HTML. Every row in a <table> is denoted by the <tr> tag, without it it's really not even a valid HTML table and how it displays probably varies from browser to browser.

answered Apr 5, 2016 at 17:14

CodingGorilla

19.9k4 gold badges50 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pudding Over a year ago

Thanks! I am new to .net glad it was a simple thing I missed.

Collectives™ on Stack Overflow

HTML table showing all data in one row instead of multiple rows with MVC

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related