ASP.NET Webform: Datatables Jquery plugin Server Side Integration

There are many flavors of Jquery Datatables Plugin and it supports many major web-programming technologies.

Today, I shall be demonstrating on How Datatables plugin can be integrated with classic ASP.NET webform server side data. You can also look into ASP.NET MVC5 Datatables Plugin Server Side Integration.

Prerequisites:

Following are some prerequisites before you proceed any further in this tutorial:

1. Knowledge about classic ASP.NET webform.
2. Knowledge about WebMethod attribute
3. Knowledge about JQuery.
4. Knowledge about AJAX.
5. Knowledge about Javascript.
6. Knowledge about C# programming.
7. Knowledge about C# LINQ.

The example code is developed in Microsoft Visual Studio 2015 Enterprise. I am using SalesOrderDetail table extract from Adventure Works Sample Database.

Download Now!

Let's begin now.  

1) Create new Webform web application project and name it "JqDatatablesWebfoms".  

 
2) Since the project is created with ".Net 4.5.2" framework therefore you will see its project hierarchy a bit similar to MVC5 hierarchy. If that's the case then you will see "App_Start\RouteConfig.cs" file, open it and in 'RegisterRoutes(...)' method add/replace following line of code i.e.

...

    public static void RegisterRoutes(RouteCollection routes)  
     {  
       ...  

       settings.AutoRedirectMode = RedirectMode.Off; // RedirectMode.Permanent  

       ... 
     }

...

In above, I have changed "RedirectMode.Permanent" to "RedirectMode.Off". The reason is that since, I am going to use ajax call in datatables plugin, so, if redirect mode in friendly URL is not off then my ajax call will redirect to root page and ajax call to server-side will not work.  

3) Now, create your website require layout template and incorporate links of the require scripts and styles into "Site.Master" file. 

 
4) Next, create "Default.aspx" page file and create HTML table tag as shown below i.e.

...

<table class="table table-striped table-bordered table-hover"  
       id="TableId"  
       cellspacing="0"  
       align="center"  
       width="100%">  
   <thead>  
      <tr>  
         <th>Sr</th>  
         <th>Order Track Number</th>  
         <th>Quantity</th>  
         <th>Product Name</th>  
         <th>Special Offer</th>  
         <th>Unit Price</th>  
         <th>Unit Price Discount</th>  
      </tr>  
   </thead>  
</table>  
      
...

In the above code, I have created a table holder that will integrated Jquery Datatables plugin with the data from the server side. I have only provided table header information here, since the data will be integrated from the server side.  

5) Create two new object view models "Models\SalesOrderDetail" & "Models\DataTables" in order to map target data from data source and in order to map property settings of Jquery Datatables plugin as shown below i.e.

...

   public class SalesOrderDetail  
   {  
     public int Sr { get; set; }  
     public string OrderTrackNumber { get; set; }  
     public int Quantity { get; set; }  
     public string ProductName { get; set; }  
     public string SpecialOffer { get; set; }  
     public double UnitPrice { get; set; }  
     public double UnitPriceDiscount { get; set; }  
   } 

...

...

   public class DataTables  
   {  
     public int draw { get; set; }  
     public int recordsTotal { get; set; }  
     public int recordsFiltered { get; set; }  
     public List<SalesOrderDetail> data { get; set; }  
   }

...

6) Load the provided sample data from the text file into list object of data type 'List<SalesOrderDetail>'.

7) Now, create new script file "Scripts\custom-datatable.js" and configure Jquery Datatables plugin in order to integrate it with HTML table tag with data loading from server-side as shown below i.e.

...

   $('#TableId').DataTable(  
   {  
     ...

     "serverSide": true,  
     "ajax":  
       {  
         "url": "Default.aspx/GetData",  
         "contentType": "application/json",  
         "type": "GET",  
         "dataType": "JSON",  
         "data": function (d)  
         {  
           return d;  
         },  
         "dataSrc": function (json)  
         {  
           json.draw = json.d.draw;  
           json.recordsTotal = json.d.recordsTotal;  
           json.recordsFiltered = json.d.recordsFiltered;  
           json.data = json.d.data;  
           var return_data = json;  
           return return_data.data;  
         }  
       },  
     "columns": [  
           { "data": "Sr" },  
           { "data": "OrderTrackNumber" },  
           { "data": "Quantity" },  
           { "data": "ProductName" },  
           { "data": "SpecialOffer" },  
           { "data": "UnitPrice" },  
           { "data": "UnitPriceDiscount" }  
     ]  

     ...

   }); 

...

 The above code will display the server side data into the table that we have created earlier into our "Default.aspx" page using Jquery Datatables. The columns here are the exact name of the properties that we have created in "Models\SalesOrderDetail.cs" file and the path "Default.aspx/GetData" is the server-side method that will return the data from the server side. "dataSrc" property will format data from server side and package it into format that is acceptable by Jquery DataTables plugin.

8) In "Default.aspx.cs" file create "GetData(...)" method which will retun the data from the server-side as shown below i.e.

...

     [WebMethod]  
     [ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true)]  
     public static object GetData()  
     {  
       // Initialization.  
       DataTables result = new DataTables(); 

       ... 
 
       // Capture Jquery Datatables Plugin Properties.  
       string search = HttpContext.Current.Request.Params["search[value]"];  
       string draw = HttpContext.Current.Request.Params["draw"];  
       string order = HttpContext.Current.Request.Params["order[0][column]"];  
       string orderDir = HttpContext.Current.Request.Params["order[0][dir]"];  
       int startRec = Convert.ToInt32(HttpContext.Current.Request.Params["start"]);  
       int pageSize = Convert.ToInt32(HttpContext.Current.Request.Params["length"]); 
 
       // Load data from text file. 
       List<SalesOrderDetail> data = new List<SalesOrderDetail>();

       ...
  
       // Configure Jquery Datatable property Total record count property.  
       int totalRecords = data.Count;
  
       // Apply server-side data searching.  

       ...

       // Apply server-side Sorting.  

       ...

       // Configure Jquery Datatable property Filter record count property after applying searching and sorting.  
       int recFilter = data.Count; 
 
       // Apply server-side pagination.  

       ...

       // Mapping final configuration settings for Jquery Datatables plugin.  
       result.draw = Convert.ToInt32(draw);  
       result.recordsTotal = totalRecords;  
       result.recordsFiltered = recFilter;  
       result.data = data;  
       
       ...

       // Return info.  
       return result;  
     }

...

In above piece of code, I have created a WebMethod which is based on searching, sorting and pagination information sent from Jquery Datatables plugin, following have been done in order i.e.

1) Data is being loaded first.
2) Data is being churned out base on searching criteria.
3) Data is sorted by provided column in provided order.
4) Data is then paginated.
5) Data is returned.

"GetData(...)" method will be executed each time the table is being searched, sort or new page is accessed. The following two lines are important i.e.

        // Configure Jquery Datatable property Total record count property.  
        int totalRecords = data.Count;  

        // Configure Jquery Datatable property Filter record count property after applying searching and sorting.  
        int recFilter = data.Count;  

First line determines the actual amount of records that exist in the list and second line determines the amount of records that are left after applying search.

 

9) Now, execute the project and you will be able to see following i .e.

Conclusion

This article was about Jquery Datatables plugin server side integration with ASP.NET Webform. In this article, you will learn to integrate server side data, searching, sorting and pagination information with Datatables plugin using ASP.NET classic webforms. You can also look into ASP.NET MVC5 Datatables Plugin Server Side Integration.