Datatables is a quite popular JQuery based plugin. There are a lot of flavors of Datatables plugins and it supports many major web programming technologies.
In this article, I shall be focusing more on how Datatables plugin can be integrated with classic ASP.NET webform server side. If anyone is interested to integrate this beautiful plugin with ASP.NET MVC5 server then here is the link.
Following are some prerequisites before you proceed any further in this tutorial,
Prerequisites:
The prerequisites include knowledge about the following technologies:
- Classic ASP.NET webform.
- HTML.
- Javascript.
- AJAX.
- CSS.
- Bootstrap.
- C# programming.
- C# LINQ.
- JQuery.
- WebMethod attribute
The example code is developed in Microsoft Visual Studio 2015 Enterprise. I am using SalesOrderDetail table extract from Adventure Works Sample Database.
Let's begin now.
- Create new Webform web application project and name it "JqDatatablesWebfoms".
- 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 "RouteConfig.cs" file, open it and replace it with following code,
- ...
- public static void RegisterRoutes(RouteCollection routes)
- {
- ...
- settings.AutoRedirectMode = RedirectMode.Off;
- ...
- }
- ...
In above code, 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 serverside will not work.
- Now, create your website require layout template and incorporate links of the require scripts and styles into "Site.Master" file.
- Create "Default.aspx" page file and create HTML table as shown below,
- ..
- <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>
- ...
Here, I have created a table holder that will be integrated with Datatables plugin with data from server side. I have only provided table header information here, since the data will be integrated from server side.
- Now create two new models under "Model", name it "SalesOrderDetail.cs" & "DataTables.cs" and add following properties in them,
- ...
- 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; }
- }
- ...
- Load the provided sample data from the text file into list object.
- Now, create new script file under "Scripts" folder, name it "custom-datatable.js" and place following code in it,
- ...
- $('#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..
- Now, in "Default.aspx.cs" file let's create "GetData" method as follow,
- ...
- [WebMethod]
- [ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true)]
- public static object GetData()
- {
-
- DataTables result = new DataTables();
-
- ...
-
-
- 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"]);
-
-
- List<SalesOrderDetail> data = new List<SalesOrderDetail>();
-
- ...
-
-
- int totalRecords = data.Count;
-
-
-
- ...
-
-
-
- ...
-
-
- int recFilter = data.Count;
-
-
-
- ...
-
-
- result.draw = Convert.ToInt32(draw);
- result.recordsTotal = totalRecords;
- result.recordsFiltered = recFilter;
- result.data = data;
-
- ...
-
-
- return result;
- }
- ...
In above piece of code, we have created a WebMethod which is based on searching, sorting and pagination information sent from Datatebles plugin, following have been done i.e.
- Data is being loaded first.
- Data is being churned out base on searching criteria.
- Data is sorted by provided column in provided order.
- Data is then paginated.
- Data is returned.
"GetData" function will be executed each time the table is being searched, sorted or new page is accessed. Here are the following two lines which are important,
-
- int totalRecords = data.Count;
-
-
- 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 filtering.
Now, execute the project and you will be able to see following,
Conclusion
This article was about
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 Datatebles plugin using ASP.NET classic webforms. I have also created a post for integrating Datatables JQuery base plugin server side integration with ASP.NET MVC5.