Header Ads

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.

23 comments:

  1. Your coding examples are really excellent and i am looking forward more things from your blog, so please say about it.

    Best Implant Clinic In Chennai | Best Laser Clinic In Chennai | Best Dental Clinic In Vellore

    ReplyDelete
  2. Thank you for your kind comments. More stuff is coming soon.

    ReplyDelete
  3. Thanks Very much @ASMA-KHALID its quite nicely explained. helped me alot.

    ReplyDelete
  4. Hi Asma, is there any way I can use POST Method instead of GET, as I want to send some parameters. please advise

    ReplyDelete
    Replies
    1. You can use parameters with GET as well. I haven't use POST myself bit you can read Jquery Datatables documentation.

      Delete
  5. Hi Asma,
    When I deploy this code on server I am getting 401 unauthorized error. It's working fine in my local. Please let me know if I am missing any settings. Thanks.

    ReplyDelete
    Replies
    1. You might be missing some package on IIS server. Install all IIS server features.

      Delete
  6. Hi to all, the contents present at this website are truly awesome for people experience, well, keep up the good work fellows.
    Web Development Design Bengaluru

    ReplyDelete
  7. I am very happy to see this knowledgeable post for each web developers. Surely they can use it for their Dot net programming. There is no word to express about your hard work.
    Web Development Company in Madurai

    ReplyDelete
  8. Very interesting and it caught my attention. Bookmarking your article which will probably be my guide. Thank you very much.
    By cloudi5
    Web Design Company in Coimbatore

    ReplyDelete
  9. Excellent pieces. Keep writing such kind of information on your
    page. Im really impressed by it.
    Hi there, You have performed a great job. I’ll certainly digg
    it and in my opinion recommend to my friends.
    I am confident they’ll be benefited from this web site.
    website designing company in karol bagh

    website designing company in pitampura

    website designing company in rohini

    website designing company in noida
    responsive web design company in india
    website designing company in noida
    website development company in delhi
    wordpress development company delhi
    magento development company in delhi

    ReplyDelete
  10. When I visit your blog, then I have understood the value of the ASP net. Dotnet developers can easy to understand how to make web forms using data tables. I am forever indebted to you for your help.

    Website Design Company in Madurai | Drop Taxi in Salem

    ReplyDelete
  11. I read your blog and that was an amazing experience and thanks for sharing such useful information. Golden Triangle Tour Package India

    ReplyDelete
  12. Excellent blog with valuable information and just added your blog to my bookmarking sites thank for sharing.
    Data Science Course in Bangalore

    ReplyDelete
  13. The article was absolutely fantastic! Lot of great information which can be helpful in some or the other way. Keep updating the blog, looking forward for more contents.
    by cloudi5 is the Web Design Company in Coimbatore

    ReplyDelete
  14. Thank a lot. You have done excellent job. I enjoyed your blog . Nice efforts
    Cyber Security Course in Bangalore

    ReplyDelete
  15. Nice Blog and i would like to thank for the efforts you have made in writing this post, hoping the same best work from you in the future as well. Thanks for sharing. Great websites!
    Tableau Training in Bangalore

    ReplyDelete
  16. Such a very useful article and very interesting to read this article, i would like to thank you for the efforts you had made for writing this awesome article. Thank you!
    Python Training in Bangalore

    ReplyDelete
  17. I enjoy reading your blog! Thank you for writing such an informative post. Excellent and appreciative blog. Continue to update.

    ReplyDelete