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.



Add New Controller in Controller Folder.



Select MVC 5 Controller - Empty.



Give Controller Name as Home.



Add a View.

Right click on the Action Name and add view.





Add Employee Class in Model folder.

class Employee
{

    public int EmployeeId { get; set; }

    public string FirstName { get; set; }

    public string LastName { get; set; }

    public string Email { get; set; }

    public int Salary { get; set; }

    public string Company { get; set; }

    public string Dept { get; set; }

}

Home Controller Code

public class HomeController : Controller
{
    private List<Employee> emp;
    public HomeController()
    {
        emp = new List<Employee>()
        {
            new Employee()
            { EmployeeId =1,FirstName="Rakesh",LastName="Kalluri", Email="[email protected]", Salary=30000, Company="Summit", Dept="IT" },
            new Employee()
            { EmployeeId =2,FirstName="Naresh",LastName="C", Email="[email protected]", Salary=50000, Company="IBM", Dept="IT" },
            new Employee()
            { EmployeeId =3,FirstName="Madhu",LastName="K", Email="[email protected]", Salary=20000, Company="HCl", Dept="IT" },
            new Employee()
            { EmployeeId =4,FirstName="Ali",LastName="MD", Email="[email protected]", Salary=26700, Company="Tech Mahindra", Dept="BPO" },
            new Employee()
            { EmployeeId =5,FirstName="Chithu",LastName="Raju", Email="[email protected]", Salary=25000, Company="Dell", Dept="BPO" },
            new Employee()
            { EmployeeId =6,FirstName="Nani",LastName="Kumar", Email="[email protected]", Salary=24500, Company="Infosys", Dept="BPO" },

        };
    }
    public ActionResult Index()
    {

        return View(emp);
    }

Table Format Data Displaying in ForEach

Index.Cshtml

@model IEnumerable<List_Data_Binding_in_MVC.Models.Employee>

@{
    ViewBag.Title = "Index";
}
<div><b>Table Format Data Displaying in ForEach</b><br /></div>
<table class="table table-bordered table-responsive table-hover">
    <tr>
        <th>Employee Id </th>
        <th>First Name </th>
        <th>Last Name </th>
        <th>Email</th>
        <th>Salary</th>
        <th>Company</th>
        <th>Department</th>
    </tr>
    @foreach (var d in Model)
    {
        <tr>
            <td>@d.EmployeeId</td>
            <td>@d.FirstName</td>
            <td>@d.LastName</td>
            <td>@d.Email</td>
            <td>@d.Salary</td>
            <td>@d.Company</td>
            <td>@d.Dept</td>

        </tr>
    }
</table>

Output



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.

public ActionResult WebGrid()
{
    return View(emp);

}

View Page

@model IEnumerable<List_Data_Binding_in_MVC.Models.Employee>

@{
    ViewBag.Title = "WebGrid";
}
<div><b>Table Format Data Displaying Using WebGrid</b><br /></div>
@{ var grid = new WebGrid(Model, canPage: false);}
<div>

    @grid.GetHtml(tableStyle: "table table-bordered table-responsive table-hover",
    columns: grid.Columns(
         grid.Column("EmployeeId", "Employee Id"),
         grid.Column("FirstName", "First Name"),
         grid.Column("LastName", "Last Name"),
         grid.Column("Email", "Email"),
         grid.Column("Salary", "Salary"),
         grid.Column("Company", "Company"),
         grid.Column("Dept", "Department")
    )
    )
</div>

Chaange Default Action Method Name in RouteConfig.cs file



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.

public ActionResult JsonView()
{
    return View();
}

public JsonResult EmployeeData()
{
    return Json(emp, JsonRequestBehavior.AllowGet);
}

JsonView.cshtml 

@{
    ViewBag.Title = "JsonView";
}

<div><b>Table Format Data Displaying Using Jquery</b><br /></div>

<div>
    <table class="table table-bordered table-responsive table-hover" id="tblEmployee">
        <tr>
            <th>Employee Id </th>
            <th>First Name </th>
            <th>Last Name </th>
            <th>Email</th>
            <th>Salary</th>
            <th>Company</th>
            <th>Department</th>
        </tr>

    </table>
</div>
<script src="~/scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        GetEmployeeData();
    });
    function GetEmployeeData() {
        $.get('/Home/EmployeeData', {}, function (data) {
            var tblEmployee = $("#tblEmployee");
            $.each(data, function (index, item) {
                var tr = $("<tr></tr>");
                tr.html(("<td>"+item.EmployeeId+"</td>")
                + " " + ("<td>" + item.FirstName + "</td>")
                + " " + ("<td>" + item.LastName + "</td>")
                + " " + ("<td>" + item.Email + "</td>")
                + " " + ("<td>" + item.Salary + "</td>")
                + " " + ("<td>" + item.Company + "</td>")
                + " " + ("<td>" + item.Dept + "</td>"));
                tblEmployee.append(tr);
            });
        });
    }

Change Default View in Routeconfig.cs file



Run the Solution

Output