Refreshing Content of the Table using AJAX in ASP.NET MVC (jQuery DataTables and ASP.NET MVC Integration - Part III)

• Download source code - 247 KB

Table of Contents

1. Introduction
2. Background
3. Using the Code
   1. Model
   2. View
   3. Controller
4. Summary
5. History

Introduction

In this article, I will show how you can refresh an HTML table content via AJAX. If you are using regular HTML tables, reloading the table is not a very complicated task. All you need to do is send an AJAX request to the server-side page, take the response from the server, and put it in the table. I believe that this is something that you have done a lot of times. There is a simple jQuery code that can do this:

$("table#employees tbody").load("TableContent.aspx");

This call will send an AJAX call to the server-side page TableContent.aspx, read the response that TableContent.aspx provides, and put it into the body of the table. In the TableContent.aspx page, you will need to return a valid HTML representing the set of rows that will be placed in the table.

This works fine if you have a simple table where you can replace content with response from the server. However, if you have some advanced functionalities such as pagination, sorting, filtering, this might get more complicated. When you send a request to the server, you will need to include information about the current page and table state, and make sure that you have loaded proper content, selected the correct page number in the pagination, etc. If you have more advanced tables, it would be better to use some existing component where the refresh functionality is already built-in.

My choice is the jQuery DataTables plug-in. With the jQuery DataTables plug-in, you can take a plain table and add pagination, filtering, and sorting using a single JavaScript line of code:

var oEmployeesTable = $('table#employees').dataTable();

In this example is taken a plain HTML table with id "employees" and the DataTables plug-in is applied to the table. This call will add pagination, sorting, and filtering on the table.

You can also easily create a fully AJAXified table using a slightly different call:

var oEmployeesTable = $('table#employees').dataTable({
           "bServerSide": true,
           "sAjaxSource": "DataContent.aspx"
});

In this case are set two parameters specifying that information will be taken not from the HTML but from the server-side page DataContent.aspx.

If you use DataTables to refresh the table content, you will need to execute a single line of JavaScript code:

oEmployeesTable.fnDraw();

This call will refresh the table content. In this article, I will show how you can implement refresh functionality in the ASP.NET MVC application.

Background

The jQuery DataTables plug-in is an excellent jQuery library that enables you to create fully AJAXified tables with minimal effort. To create an AJAXified table with the jQuery DataTables plug-in, you will need to implement the following elements:

1. Put an empty table in the HTML of the page. This empty table will define the structure of the table (e.g., columns, styles, etc.). The table should have only a heading in the THEAD element, empty body, and an optional footer in the TFOOT element. Rows in the table are not required because they will be loaded via an AJAX call.
2. Create some server-side page that will provide rows to the table when it is called via AJAX. In this article, an ASP.NET MVC controller that will provide data rows to the table will be implemented.
3. Initiate the jQuery DataTables plug-in to load table content from the controller.

As a result, instead of an empty table, you will get a fully AJAXified table where jQuery DataTables has automatically added pagination, sorting by table headings, and filtering by keyword. An example of the table is shown in the following figure:

As you can see, the jQuery DataTables plugin has taken a plain table with no content, populated it with rows via an AJAX call, and added elements for sorting, filtering, and pagination. You will see in the following sections that the only thing that is needed are a few lines of JavaScript code to initialize this table, and convert it to the fully functional AJAXified table.

You can find detailed instructions about the integration of the jQuery DataTables plug-in with the ASP.NET MVC controller in the jQuery DataTables and ASP.NET MVC Integration - Part I article.

Once you implement the controller and initialize the jQuery DataTables plug-in, it will handle the complete interaction with the user. Each time the user changes the state of the table (e.g., change page using pagination, sort rows by column, or perform some search) the DataTables plug-in will send information to the controller and refresh the content of the table.

However, in some cases, you will need to refresh the table content manually. Refreshing the table content is a common requirement in many applications - some examples are:

1. You might want to add a Refresh button that enables the user to refresh the data displayed in the table.
2. You might want to implement some periodical refresh of table content to provide the latest data to the user (e.g., some live scores implementation).
3. You might want to implement some kind of AJAXified search where the user enters search criterion in the form and you want to refresh data in the table without refreshing the whole page.
4. You might want to add some master table or drop-down so when the user selects some value in the table or dropdown, you might want to refresh the dependent table.
5. You might want to add some filter to the table where the user will type some text or select some value in the dropdown list, so you will need to refresh the table content to match the filter.

To implement these scenarios, you will need to refresh the DataTables content. The goal of this article is to show how you can do it with the API provided by the jQuery DataTables plug-in.

This is the third article in the series explaining how the jQuery DataTables plug-in can be integrated in an ASP.NET MVC web application. If you are not familiar with the integration of the DataTables plug-in with the ASP.NET MVC server-side code, you might want to read the first article in this series before you proceed.

Using the Code

For illustrative purposes, we'll use a simple ASP.NET MVC web application to list the employees. The first thing you need to do is to create a standard ASP.NET Model-View-Controller structure. There are three steps required for this setup:

1. Creating the model classes that represent a data structure to be shown.
2. Creating the controller class that will react on the user events.
3. Creating the view that will render the data and create the HTML code that is sent to the browser window.

Also, you will need to include some JavaScript components in your project. The following JavaScript components need to be downloaded:

1. jQuery library v1.4.4., containing the standard classes used by the DataTables plug-in.
2. jQuery DataTables plug-in v1.7.5., including the optional DataTables CSS style-sheets used for applying the default styles on the page.

These files should be stored in the local file system and included in the HTML page that is rendered on the client. An example of usage of these files is explained below.

Model

Two classes that contain information about companies and employees need to be added in the example. The classes are shown in the following listing:

public class Company
{
    public int ID { get; set; }
    public string Name { get; set; }
    public string Address { get; set; }
    public string Town { get; set; }
}  
public class Employee
{
    public int EmployeeID { get; set; }
    public string Name { get; set; }
    public string Position { get; set; }
    public int CompanyID { get; set; }
}

The employees are connected to the companies via the CompanyID property. These classes will be used to show information on the page.

View

The view is used to render data on the server-side and to send HTML code to the browser. There's one layout page that is used to include all the necessary CSS and JavaScript files that are used on the page. This layout page is shown below:

<!DOCTYPE html>
<html>
    <head>
        <title>Refreshing table content using a JQuery DataTables plugin</title>
        <link href="@Url.Content("~/Content/dataTables/demo_page.css")" 

         rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/dataTables/demo_table.css")" 

         rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/dataTables/demo_table_jui.css")" 

         rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" 

         rel="stylesheet" type="text/css" media="all" />
        <link href="@Url.Content("~/Content/themes/smoothness/jquery-ui-1.7.2.custom.css")"

         rel="stylesheet" type="text/css" media="all" />
        <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" 

         type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.dataTables.min.js")" 

         type="text/javascript"></script>
        @RenderSection("head", required: false)
    </head>
    <body id="dt_example">
        <div id="container">
            @RenderBody()
        </div>
    </body>
</html>

The layout page has two sections that can be populated on the page:

1. head section where the JavaScript calls from the page will be injected
2. body section that enables the page that uses this layout page to inject code to the page that will be shown on the page

In the following sections, I will show a few implementations of the pages that use this layout page and refresh the table content.

Case 1 - Adding the "Refresh" Button

In the first example, I will show how you can add a Refresh button that will reload the content of the table when the user presses it. An example is shown in the following figure:

As described above, we would need an empty table that holds table data and a refresh button. The body of the page is shown in the following listing:

<button id="Refresh" type="button">Refresh<button/>
    <table id="employees" class="display">
        <thead>
            <tr>
                <th>ID</th>
                <th>Employee</th>
                <th>Position</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

Once we have prepared static HTML, we would need to initialize the DataTables plug-in, and attach a click handler to the refresh button that will redraw the table. Example of code is shown in the following listing.

@section head{
    <script language="javascript" type="text/javascript">
    $(document).ready(function () {

        var oEmployeesTable = $('#employees').dataTable({
            "bJQueryUI": true,
            "bServerSide": true,
            "sAjaxSource": "MasterDetailsAjaxHandler"
        });

        $("#Refresh").click(function (e) {
            oEmployeesTable.fnDraw();
        });
    });
</script>
}

This code should be placed in the head section of the view. The first statement in the document ready function applies the DataTables plug-in on the employees table, specified that it will work in server-side mode (meaning that on each user action, the plug-in will ask the server-side page to provide new data that should be displayed), defines that URL that will be called via an AJAX call is MasterDetailsAjaxHandler - this is the path of the controller that will provide the content of the table. The bJQueryUI flag is not mandatory - it is just used to apply jQuery UI styles to the table.

When the table is initialized, in the code is added a click handler for the refresh button that will draw the content of the table. On each draw call, the DataTables plug-in will call the server-side page again and take the new set of data which will be loaded in the table body.

The controller that provides content is described in the section controller.

Case 2 - Refreshing Table Content Periodically

If you do not want to force the user to refresh the table, you can add a function that will be periodically called to refresh the table. The code is very similar to the code shown in case 1. The only difference is that the refresh button is not needed and instead of the click handler is used a set interval function as shown in the following listing:

@section head{
<script language="javascript" type="text/javascript">

    var oEmployeesTable = null;
    function refresh() {
        if (oEmployeesTable != null)
            oEmployeesTable.fnDraw();
    }
    setInterval("refresh()", 1000);

    $(document).ready(function () {
        oEmployeesTable = $('#employees').dataTable({
            "bJQueryUI": true,
            "bServerSide": true,
            "sAjaxSource": "/Home/MasterDetailsAjaxHandler"
        });
    });
</script>
}

In the global scope are defined references to the employees table, function that refreshes the table, and a timer that calls the refresh function each second. Then, in the document ready handler, the employees table is initialized with the DataTables plug-in and a global reference is set.

As a result, this table will be automatically reloaded each second. A trace of the AJAX calls that are sent to the server is shown on the figure below:

Note that the reference to the employees table, function and interval call are placed in the global scope and not in the body of the document ready handler, because these function references will be lost once the document ready handler finishes.

Case 3 - Refreshing Table Content when Parent Row is Selected

In this example, I will show how you can refresh the content of the dependent table (employees) when a company is selected in the master table. In this case, we will have two tables - a parent table containing the list of companies and a child table containing the list of employees. An example of that kind of page is shown in the following figure:

When the user selects the company in the master table, in the child table will be shown the employees that belong to this company. The body of the page is shown in the following listing:

<div id="demo">
    <table id="companies" class="display">
        <thead>
            <tr>
                <th>Company name</th>
                <th>Address</th>
                <th>Town</th>
            </tr>
        </thead>
        <tbody>
            <tr id="0" class="masterlink">
                <td>Emkay Entertainments</td>
                <td>Nobel House, Regent Centre</td>
                <td>Lothian</td>
            </tr>
            <tr id="1" class="masterlink">
                <td>The Empire</td>
                <td>Milton Keynes Leisure Plaza</td>
                <td>Buckinghamshire</td>
            </tr>
            <tr id="2" class="masterlink">
                <td>Asadul Ltd</td>
                <td>Hophouse</td>
                <td>Essex</td>
            </tr>
            <tr id="3" class="masterlink">
                <td>Ashley Mark Publishing Company</td>
                <td>1-2 Vance Court</td>
                <td>Tyne &amp; Wear</td>
            </tr>
            <tr id="4" class="masterlink">
                <td>MuchMoreMusic Studios</td>
                <td>Unit 29</td>
                <td>London</td>
            </tr>
            <tr id="5" class="masterlink">
                <td>Audio Records Studios</td>
                <td>Oxford Street</td>
                <td>London</td>
            </tr>
        </tbody>
    </table>

    <table id="employees" class="display">
        <thead>
            <tr>
                <th>ID</th>
                <th>Employee</th>
                <th>Position</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div> 

The first table with companies contains a list of five companies, and the employees table is empty. The employees table will be populated with AJAX JavaScript calls. Each row in the companies table contains the ID of the company - this information will be used to load the employees for the selected company.

The head section holds the JavaScript code that initializes and connects these two tables. The JavaScript initialization code is shown in the following listing:

<script language="javascript" type="text/javascript">
    $(document).ready(function () {

        /* Initialize master table - optionally */
        var oCompaniesTable = $('#companies').dataTable({ "bJQueryUI": true });
        /* Highlight selected row - optionally */
        $("#companies tbody").click(function (event) {
            $(oCompaniesTable.fnSettings().aoData).each(function () {
                $(this.nTr).removeClass('row_selected');
            });
            $(event.target.parentNode).addClass('row_selected');
        });

        var MasterRecordID = null;

        var oEmployeesTable = $('#employees').dataTable({
            "sScrollY": "100px",
            "bJQueryUI": true,
            "bServerSide": true,
            "sAjaxSource": "MasterDetailsAjaxHandler",
            "bProcessing": true,
            "fnServerData": function (sSource, aoData, fnCallback) {
                aoData.push({ "name": "CompanyID", "value": MasterRecordID });
                $.getJSON(sSource, aoData, function (json) {
                    fnCallback(json)
                });
            }
        });

        $(".masterlink").click(function (e) {
            MasterRecordID = $(this).attr("id");
            oEmployeesTable.fnDraw();
        });
    });
</script>

The first two statements are optional. The first statement initializes the companies table with the jQuery DataTables plug-in in order to add pagination, filtering, and sorting functionality (this is not required for the parent-child relationship between the tables because the parent table can be a plain table). The second statement adds the row_selected class on the selected row in the parent table. This is also not required, but it's useful to highlight a company whose employees are shown in the child table.

A local variable MasterRecordID is used to hold the ID of the currently selected company. The fourth statement initializes the child employees table. Most of the settings are optional and do not affect the parent-child configuration because the only relevant statements in the initialization are:

1. Server-side processing configuration implemented using the bServerSide and sAjaxSource parameters,
2. fnServerData method used to inject the ID of the selected company into the AJAX call sent to the server-side. This method is used to add the additional parameter called CompanyID with the value of the MasterRecordID variable to the AJAX call sent to the server-side.

The last statement attaches the event handler which populates the ID of the selected row and forces the redraw of the child table on each click on a row in the parent table. Redrawing of the table sends an AJAX request to the server-side and updates the table with the employee records that belong to the selected company.

Case 4 - Refreshing Table when Form is Posted

A common scenario when you might need to reload a table is you post some form content via AJAX and you want to reload the table to refresh the rows. As an example, you might add some add form in the page, and when a new item is successfully added, you might want to reload the table content. An example of that kind of form is shown in the following figure.

In order to create that kind of functionality, we would need to add a button and a dialog to the view. The view body looks like the following HTML code:

<div id="dialog" title="Add new item">
   <label for="name">Title</label>
   <input type="text" id="name" name="name" value="" />
   <button type="button" id="save">Save</button>
</div>
<button id="add">Add</button>

<table id="employees" class="display">
    <thead>
        <tr>
            <th>ID</th>
            <th>Employee</th>
            <th>Position</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

A dialog is added in HTML where are placed text input for the new item and a Save button. Also, a button that is used to open a dialog is added above the table. The table that is enhanced with the DataTables plug-in is the same as in the previous cases.

Now we would need to refresh the table after the Save button posts request to the server-side. In this case, we would need to call the function fnDraw in the success handler of the AJAX call. An example of that kind of JavaScript code is shown in the following listing:

var oEmployeesTable = $('#employees').dataTable({
    "bJQueryUI": true,
    "bServerSide": true,
    "sAjaxSource": "/Home/MasterDetailsAjaxHandler"
});

$("#dialog").dialog({ autoOpen: false });
$("#add").click(function (e) {
                $("#dialog").dialog("open");
            });

$("#save").click(function (e) {
    e.preventDefault();
    e.stopPropagation();
    $.ajax({
        url: "/Home/AddItem",
        data: {
            name: function(){$("#name").val();}
        },
        success: function () {
            $("#dialog").dialog("close");
            oEmployeesTable.fnDraw();
        }
    });
});

The first part is a standard initialization of DataTable as in the previous examples. Then the dialog is initialized (it is not automatically opened), on the Add button is added a handler that opens a dialog, and on the Save button is added a handler that posts AJAX requests to the server-side page and sends a name that is entered. In the success handler of the AJAX call, the dialog is closed and the table is redrawn.

As a result, each time you post the form, you will see that the table is reloaded.

Case 5 - Filtering Using Form Elements

Implementation of other cases of usage are similar to the three approaches described above. You can easily add some select dropdown, check boxes, or even the entire form that will refresh the table content.

All you will need to do is attach an event handler that will call the fnDraw function and inject parameters you want to send to the controller via an AJAX call in the fnServerData settings in the initialization. When fnDraw is called, the DataTables plug-in will send a new AJAX request, pass the parameters defined in fnServerData, accept results, and put them in the table. Therefore, I will not show implementations of other cases because they are very similar.

If you want to refresh using the form elements that are directly related to the columns in the table, there is an easier option. You can use the jQuery DataTables ColumnFilter add-on that can add form filters to the DataTable. You can see how this form filter works if you add the filters in the columns or in the separate form. This filter can be applied either on the row data that are already populated in the table or on the AJAXified table. With this plug-in, you do not need to implement event handlers and an AJAX request. All you need to do is to apply a column filter plug-in on the DataTables plug-in configured in the server side mode. An example of the code that initializes the columnfilter plug-in with DataTables in the server-side processing mode is shown in the following listing:

$('#employees').dataTable({
    "bJQueryUI": true,
    "bServerSide": true,
    "sAjaxSource": "MasterDetailsAjaxHandler"
}).columnFilter({
    aoColumns: [ { type: "select"},
             { type: "text" },
             { type: "text" },
             { type: "text" }
        ]
});

This example adds a select list for filtering by first column and text boxes for filtering by other columns. If the DataTables plug-in is initialized in server-side mode, filters will also be sent to the server-side via AJAX calls. You can see more details about the column filter configuration on the jQuery DataTables ColumnFilter site.

The last required part of the example is a controller that will handle the requests.

Controller

The controller handles the request sent from the browser and provides view/data that will be shown in the browser. Here, the controller has two methods that handle a request:

1. Load method that returns the view page when the page is loaded,
2. Employees AJAX handler that returns the employees when jQuery DataTables sends the AJAX request. This action will return employees data when the jQuery DataTables plug-in wants to refresh the content, therefore it should accept standard parameters (current page, number of items per page, etc.) that define the current view state of the table. However, to support refreshing a table for a selected company (case 3 above), in this controller action is added the company ID parameter that will be used to additionally filter employees by company.

The first controller method is fairly simple. This method just returns the view that will be shown in the browser, as shown in the following listing:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
}

The second controller method is crucial - it returns the employees for the employees table. This method is shown in the following listing:

public class HomeController : Controller
{
    public ActionResult MasterDetailsAjaxHandler(
             JQueryDataTableParamModel param, int? CompanyID)
    {

        var employees = DataRepository.GetEmployees();

        //"Business logic" method that filters employees by the employer id
        var companyEmployees = (from e in employees
                                where (CompanyID == null || e.CompanyID == CompanyID)
                                select e).ToList();

        //UI processing logic that filter company employees by name and paginates them
        var filteredEmployees = (from e in companyEmployees
                                 where (param.sSearch == null || 
                                 e.Name.ToLower().Contains(param.sSearch.ToLower()))
                                 select e).ToList();
        var result = from emp in filteredEmployees.Skip(
                     param.iDisplayStart).Take(param.iDisplayLength)
                     select new[] { Convert.ToString(emp.EmployeeID), 
                     emp.Name, emp.Position };

        return Json(new
        {
            sEcho = param.sEcho,
            iTotalRecords = companyEmployees.Count,
            iTotalDisplayRecords = filteredEmployees.Count,
            aaData = result
        },
        JsonRequestBehavior.AllowGet);
    }
}

The name of the method must match the sAjaxSource parameter set in the employees data table. This method accepts an object that encapsulates the parameters sent from the DataTables plug-in (current page, sort direction, number of items that should be displayed per page, etc.) More details about the server side processing parameters can be found in the first article in this series. Besides this parameter, an additional parameter called CompanyID is added in the method signature. This parameters is relevant only for case three and it is used to filter employees by the selected company ID. The name of this parameter must match the name of the parameter that is added in the fnServerData function in case 3. The other code in the body of the method just filters the employee data and returns it in JSON format as it is expected by the jQuery DataTables plug-in. More details about the server-side configuration can be found in the first article in this series.

Summary

This article shows how you can easily reload table content in ASP.NET MVC using the jQuery DataTables plug-in. Minimal code is required on the client-side, and on the server-side, we need standard processing functions. This plug-in allows you to create an effective, AJAXified, Web 2.0 interface with minimal effort and straightforward implementation guidelines. You can download the example project implemented in ASP.NET MVC here.

You might also be interested in the other articles in this series showing:

1. How to implement server-side processing in ASP.NET MVC with the jQuery DataTables plug-in
2. How to implement a fully editable table in ASP.NET MVC with jQuery DataTables and several jQuery plug-ins that enable complete data management functionality.

I hope these articles will help you while implementing ASP.NET MVC applications.

History

• 5^th April, 2011: Initial version