Working With jQuery DataTables in MVC 4 - Part 3

If you are new to this plug-in then please go through the previous articles that will provide you the basics of the jQuery plug-in.

• jQuery Data tables - Part 1
• Exploring Data tables deeply - Part 2

Let’s explore step-by-step how to use this plug-in within a MVC 4 application.

Step 1

Open Visual Studio and create the Empty MVC 4 application.

Step 2

Create a new Controller named “JQueryDataTableController” within the controller folder. 

Step 3

Within the Model folder just create a class named Employee.cs.

Step 4

Please find the following simple Employee class structure.

class Employee
{
   public string ID { get; set; }
   public string Name { get; set; }
   public string Designation { get; set; }
   public string Address { get; set; }
   public string DateOfJoining { get; set; }
}

Step 5

Globally create a List<Employee> object to generate list of employees.

List<Employee> objEmployee = new List<Employee>();

Step 6

Within the JQueryDataTableController constructor method paste the following set of code. Before adding the Employee object into the List collection I am checking whether the count is 0, if it’s 0 then I am adding the entire employee object to the List collection.

public JQueryDataTableController()
{
    if (objEmployee.Count == 0) {
        objEmployee.Add(new Employee {
            ID = "1", Name = "Sathish", Address = "Chennai", Designation = "Technical Lead", DateOfJoining = "10/01/2010"
        });
        objEmployee.Add(new Employee {
            ID = "2", Name = "Muthu", Address = "Chennai", Designation = "Technical Architect", DateOfJoining = "10/01/2011"
        });
        objEmployee.Add(new Employee {
            ID = "3", Name = "Arul", Address = "Delhi", Designation = "Technical Lead", DateOfJoining = "10/01/2015"
        });
        objEmployee.Add(new Employee {
            ID = "4", Name = "Avinash", Address = "Coimbatore", Designation = "Software Developer", DateOfJoining = "10/02/2012"
        });
        objEmployee.Add(new Employee {
            ID = "5", Name = "Bala", Address = "Madurai", Designation = "Technical Lead", DateOfJoining = "10/01/2015"
        });
        objEmployee.Add(new Employee {
            ID = "6", Name = "Selva", Address = "Delhi", Designation = "Project Manager", DateOfJoining = "10/01/2015"
        });
        objEmployee.Add(new Employee {
            ID = "7", Name = "Vaishanth", Address = "Chennai", Designation = "Technical Architect", DateOfJoining = "10/01/2012"
        });
        objEmployee.Add(new Employee {
            ID = "8", Name = "Prabhu", Address = "Chennai", Designation = "Technical Lead", DateOfJoining = "10/04/2015"
        });
        objEmployee.Add(new Employee {
            ID = "9", Name = "Rajesh", Address = "Delhi", Designation = "Software Developer", DateOfJoining = "10/01/2015"
        });
        objEmployee.Add(new Employee {
            ID = "10", Name = "Purushoth", Address = "Madurai", Designation = "Technical Lead", DateOfJoining = "10/06/2013"
        });
        objEmployee.Add(new Employee {
            ID = "11", Name = "Anbu", Address = "Chennai", Designation = "Technical Architect", DateOfJoining = "10/01/2015"
        });
        objEmployee.Add(new Employee {
            ID = "12", Name = "Moorthy", Address = "Delhi", Designation = "Project Manager", DateOfJoining = "10/01/2015"
        });
        objEmployee.Add(new Employee {
            ID = "13", Name = "Ganesh", Address = "Coimbatore", Designation = "Technical Lead", DateOfJoining = "10/07/2014"
        });
        objEmployee.Add(new Employee {
            ID = "14", Name = "Rahul", Address = "Madurai", Designation = "Technical Lead", DateOfJoining = "10/01/2015"
        });
        objEmployee.Add(new Employee {
            ID = "15", Name = "Sibeesh", Address = "Delhi", Designation = "Technical Architect", DateOfJoining = "10/08/2015"
        });
        objEmployee.Add(new Employee {
            ID = "16", Name = "Ravi", Address = "Chennai", Designation = "Project Manager", DateOfJoining = "10/01/2015"
        });
        objEmployee.Add(new Employee {
            ID = "17", Name = "Mahindra", Address = "Coimbatore", Designation = "Software Developer", DateOfJoining = "11/09/2015"
        });
        objEmployee.Add(new Employee {
            ID = "18", Name = "Arjun", Address = "Delhi", Designation = "Technical Architect", DateOfJoining = "10/01/2015"
        });
        objEmployee.Add(new Employee {
            ID = "19", Name = "Joe", Address = "Madurai", Designation = "Project Manager", DateOfJoining = "15/01/2015"
        });
        objEmployee.Add(new Employee {
            ID = "20", Name = "Martin", Address = "Chennai", Designation = "Technical Architect", DateOfJoining = "17/02/2015"
        });
    }
}

Step 7

Right-click on top of the default Index action method and create View.cshtml.

The following image contains 7 steps, that are the entire procedure for getting data from the server side.

 

1. Layout as null, which means I m not using any layout file for this page.
   
   
2. We require a jQuery data table plug-in JavaScript & CSS files.
   
   
3. Within the Data Table method, the “ServerSide” : ”True” property is explicitly saying that the data is coming from the server side.
   
   
4. From the data table method we need to fire the Ajax request using the Ajax property.
   
   
5. The Columns attribute contains the entire column collection from the data source, be sure your <th> header row count and Columns collection count match or else you will receive the jQuery data table error.
   
   
6. Sometimes we might need to fire some piece of code before or after an Ajax request has been made, so we have two builtin events that will be very useful during the Ajax request. 
   
   I am going to prepare another set of articles that explain all the built-in events available inside the jQuery data tables.
   
   6.1. Xhr: After the completion of the Ajax request this event will be triggered but you need to hook up this event to the existing Data Table plug-in using the jQuery.On method.
   
   6.2. PreXhr: Before completing the Ajax request this event will is triggered.
   
   
7. The table tblEmployee contains only <thead> tags, <tbody> should be empty only. While invoking the $("#tblEmployee").dataTable() method dynamically generate the <TR> tags based on the result set.
   
   

Step 8

Within the JQueryDataTableController.cs controller, create another Ajax action method, JsonOutputMethod(), and paste the piece of code inside this method. 

Because this specific Ajax method is hardcoded inside the Ajax URL parameter in the jQuery Data table, the return type of this method is marked as an ActionResult base class. That means we are able to return both an Ajax and a normal response.

"url": '@Url.Action("JsonOutputMethod")'

public ActionResult JsonOutputMethod()
{
   if (Request.IsAjaxRequest())
   {
     return Json(new { draw = 1, recordsTotal = objEmployee.Count, recordsFiltered = 10,          data = objEmployee }, JsonRequestBehavior.AllowGet);
   }
   return View();
}

Within this method, if the request should be Ajax then I will only return the entire List collection object to the View. I am getting the help from the Request.IsAjaxRequest(). 

Step 9

Open the RouteConfig.cs file within the App_Start folder, change the default route details (like change the controller name from Home to JQueryDataTable).

That’s it, you are good to go. If you browse the application you will be able to get the data from server side and the jQuery data table plug-in renders based on the server-side data.

I hope you guys enjoyed this a lot, after reading this article please provide your valuable comments. Your comments are highly appreciated.