Displaying information in a grid on my ASP.NET MVC page

Question

There is a "Weekly Monitoring tool" on the intranet I'm working on that displays the following information (supposedly) in a grid : the company, the employee (name), his expected work time, and his current weekly activity.

The Data is saved and filtered week by week, it's all sent to my WeeklyMonitoring.aspx view.

The issue is that I can't seem to find a way to display it as a grid, cleanly, separating each information to make it easier to read.

Here is the relevant part of my View :

<table width="300" border="1" cellpadding="0" cellspacing="0">
    <tr>
        <th>Company</th>
        <th>Employee</th>
        <th>Expected Time</th>
        <th>Activity</th>
    </tr>

    <%            
    int i = 0;
    foreach (var name in ViewBag.Names)
    {
        if ((string)ViewBag.Names[i] != null)
        { %>  

            <td><%= (string)ViewBag.Company[i]%></td>
            <td><%= (string)ViewBag.Names[i]%></td>
            <td> --- </td>
            <td><%= (string)ViewBag.RecTime[i]%></td>           
      <%} %>
            <%i++; %>         
    <%      
    }
    %>

</table>

It does display it as a board, separating the information by spaces, how may I create a clean looking grid as it is supposed to be?

If you want your table to look like a grid, you need to apply styling to it. EG http://stackoverflow.com/questions/1763032/html-css-table-with-gridlines — Luke, Oct 22 '15 at 07:46
Just adding to what @Mahbubur said, JQuery Datatables is something you should definitiely consider, for more information check out http://www.datatables.net/ — Scanner, Oct 22 '15 at 13:13

score 1 · Accepted Answer · answered Oct 22 '15 at 11:59

JQuery DataTables in an awesome plugin for this and it's very simple to use. First, add the plugin:

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.css">      
<script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.10.2.min.js"></script>     
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>

then Format the table properly:

<table id ="table_id" class="display">
  <thead>
      <tr>
          <th>Company</th>
          <th>Employee</th>
          <th>Expected Time</th>
          <th>Activity</th>
       </tr>
  </thead>   

<%            
int i = 0;
foreach (var name in ViewBag.Names)
{
   <tr>
    if ((string)ViewBag.Names[i] != null)
    { %>  

        <td><%= (string)ViewBag.Company[i]%></td>
        <td><%= (string)ViewBag.Names[i]%></td>
        <td> --- </td>
        <td><%= (string)ViewBag.RecTime[i]%></td>           
  <%} %>
        <%i++; %>    
 </tr>     
<% } %>

Now, apply the DataTable properties on the table:

 <script>
 $(document).ready(function () {
        $('#table_id').DataTable();
    });
</script>

and see the charm.

This is marvelous, thanks you ! Would there be a way to add vertical lines between each columns though? — , Oct 22 '15 at 13:09
yes. you have to add additional css for that like ``. welcome :) — Mahbubur Rahman, Oct 22 '15 at 13:27

Displaying information in a grid on my ASP.NET MVC page

1 Answers1