Display Data In Table Format In Different Ways In MVC

We are going to discuss about displaying data in table format by using the following 3 ways,

  1. Using foreach loop
  2. Uisng WebGrid
  3. Using Jquery with Json Result Object

Firstly, we are going to create MVC Solution.

Select Empty Template and add MVC Folder Reference.

Select Empty Template

Add New Controller in Controller Folder.

Add controller

Select MVC 5 Controller - Empty.

MVC 5 Controller

Give Controller Name as Home.

Conroller

Add a View.

Right click on the Action Name and add view.

Add a View

Add index

Add Employee Class in Model folder.

  1. class Employee  
  2. {  
  3.   
  4.     public int EmployeeId { getset; }  
  5.   
  6.     public string FirstName { getset; }  
  7.   
  8.     public string LastName { getset; }  
  9.   
  10.     public string Email { getset; }  
  11.   
  12.     public int Salary { getset; }  
  13.   
  14.     public string Company { getset; }  
  15.   
  16.     public string Dept { getset; }  
  17.   
  18. }  
Home Controller Code
  1. public class HomeController : Controller  
  2. {  
  3.     private List<Employee> emp;  
  4.     public HomeController()  
  5.     {  
  6.         emp = new List<Employee>()  
  7.         {  
  8.             new Employee()  
  9.             { EmployeeId =1,FirstName="Rakesh",LastName="Kalluri", Email="raki.kalluri@gmail.com", Salary=30000, Company="Summit", Dept="IT" },  
  10.             new Employee()  
  11.             { EmployeeId =2,FirstName="Naresh",LastName="C", Email="Naresh.C@gmail.com", Salary=50000, Company="IBM", Dept="IT" },  
  12.             new Employee()  
  13.             { EmployeeId =3,FirstName="Madhu",LastName="K", Email="Madhu.K@gmail.com", Salary=20000, Company="HCl", Dept="IT" },  
  14.             new Employee()  
  15.             { EmployeeId =4,FirstName="Ali",LastName="MD", Email="Ali.MD@gmail.com", Salary=26700, Company="Tech Mahindra", Dept="BPO" },  
  16.             new Employee()  
  17.             { EmployeeId =5,FirstName="Chithu",LastName="Raju", Email="Chithu.Raju@gmail.com", Salary=25000, Company="Dell", Dept="BPO" },  
  18.             new Employee()  
  19.             { EmployeeId =6,FirstName="Nani",LastName="Kumar", Email="Nani.Kumar@gmail.com", Salary=24500, Company="Infosys", Dept="BPO" },  
  20.   
  21.         };  
  22.     }  
  23.     public ActionResult Index()  
  24.     {  
  25.   
  26.         return View(emp);  
  27.     }  
Table Format Data Displaying in ForEach

Index.Cshtml
  1. @model IEnumerable<List_Data_Binding_in_MVC.Models.Employee>  
  2.   
  3. @{  
  4.     ViewBag.Title = "Index";  
  5. }  
  6. <div><b>Table Format Data Displaying in ForEach</b><br /></div>  
  7. <table class="table table-bordered table-responsive table-hover">  
  8.     <tr>  
  9.         <th>Employee Id </th>  
  10.         <th>First Name </th>  
  11.         <th>Last Name </th>  
  12.         <th>Email</th>  
  13.         <th>Salary</th>  
  14.         <th>Company</th>  
  15.         <th>Department</th>  
  16.     </tr>  
  17.     @foreach (var d in Model)  
  18.     {  
  19.         <tr>  
  20.             <td>@d.EmployeeId</td>  
  21.             <td>@d.FirstName</td>  
  22.             <td>@d.LastName</td>  
  23.             <td>@d.Email</td>  
  24.             <td>@d.Salary</td>  
  25.             <td>@d.Company</td>  
  26.             <td>@d.Dept</td>  
  27.   
  28.         </tr>  
  29.     }  
  30. </table>  
Output

run

Table Format Data Displaying Using WebGrid

In this format we use WebGrid Action Method for data displaying.

Add Another Action Method for Web Grid in Home Controller and also add separate view for WebGrid Action Method.
  1. public ActionResult WebGrid()  
  2. {  
  3.     return View(emp);  
  4.   
  5. }  
View Page
  1. @model IEnumerable<List_Data_Binding_in_MVC.Models.Employee>  
  2.   
  3. @{  
  4.     ViewBag.Title = "WebGrid";  
  5. }  
  6. <div><b>Table Format Data Displaying Using WebGrid</b><br /></div>  
  7. @{ var grid = new WebGrid(Model, canPage: false);}  
  8. <div>  
  9.   
  10.     @grid.GetHtml(tableStyle: "table table-bordered table-responsive table-hover",  
  11.     columns: grid.Columns(  
  12.          grid.Column("EmployeeId""Employee Id"),  
  13.          grid.Column("FirstName""First Name"),  
  14.          grid.Column("LastName""Last Name"),  
  15.          grid.Column("Email""Email"),  
  16.          grid.Column("Salary""Salary"),  
  17.          grid.Column("Company""Company"),  
  18.          grid.Column("Dept""Department")  
  19.     )  
  20.     )  
  21. </div>  
Chaange Default Action Method Name in RouteConfig.cs file

Action

Run the Solution

Run the Solution

Table Format Data Displaying Using Jquery

In this format we are using JQuery for data displaying.

Add Another Controller for JsonView and also separate view for JsonView Action method in Hone Controller.

Add JsonResult Method for retrieving data from jquery ajax calls.
  1. public ActionResult JsonView()  
  2. {  
  3.     return View();  
  4. }  
  5.   
  6. public JsonResult EmployeeData()  
  7. {  
  8.     return Json(emp, JsonRequestBehavior.AllowGet);  
  9. }  
JsonView.cshtml 
  1. @{  
  2.     ViewBag.Title = "JsonView";  
  3. }  
  4.   
  5. <div><b>Table Format Data Displaying Using Jquery</b><br /></div>  
  6.   
  7. <div>  
  8.     <table class="table table-bordered table-responsive table-hover" id="tblEmployee">  
  9.         <tr>  
  10.             <th>Employee Id </th>  
  11.             <th>First Name </th>  
  12.             <th>Last Name </th>  
  13.             <th>Email</th>  
  14.             <th>Salary</th>  
  15.             <th>Company</th>  
  16.             <th>Department</th>  
  17.         </tr>  
  18.   
  19.     </table>  
  20. </div>  
  21. <script src="~/scripts/jquery-1.10.2.js"></script>  
  22. <script type="text/javascript">  
  23.   
  24.     $(document).ready(function () {  
  25.         GetEmployeeData();  
  26.     });  
  27.     function GetEmployeeData() {  
  28.         $.get('/Home/EmployeeData', {}, function (data) {  
  29.             var tblEmployee = $("#tblEmployee");  
  30.             $.each(data, function (index, item) {  
  31.                 var tr = $("<tr></tr>");  
  32.                 tr.html(("<td>"+item.EmployeeId+"</td>" 
  33.                 " " + ("<td>" + item.FirstName + "</td>" 
  34.                 " " + ("<td>" + item.LastName + "</td>")  
  35.                 " " + ("<td>" + item.Email + "</td>" 
  36.                 " " + ("<td>" + item.Salary + "</td>")  
  37.                 " " + ("<td>" + item.Company + "</td>")  
  38.                 " " + ("<td>" + item.Dept + "</td>"));  
  39.                 tblEmployee.append(tr);  
  40.             });  
  41.         });  
  42.     }  
Change Default View in Routeconfig.cs file

Routeconfig

Run the Solution

Output

Output