Welcome to weblogs.com.pk Sign in | Join | Help

ASP.NET–DataTables with PageMethods

Javascript apps are fancy gardens of glass, attractive but fragile. I personally don’t like it, but it’s hip these days! A friend asked if we can incorporate “DataTables” a popular jQuery plugin into an existing ASP.NET application, and I availed an opportunity to get my hands a bit dirty!

If you haven't started using NUGET; you should, using it one can maintain the project that’s using third party libraries and scripts quite easily. In the first step, we upgraded the project adding required NUGET packages as per their deployment and also DataTables NUGET package!


A simple proof of concept ASPX page having “DataTables” loading the data through AJAX call will look like this. Notice how the PageMethod “GetDataTable” is being called, type and contentType are set so that we can invoke ASP.NET “WebMethod” accordingly.image

One gothcha here that we havnt set serverSide property to true, and all the paging/searching will happen at client end and we have to load all the data in the single go, not very good if data is large. The issue if we try to use serverSide is that DataTables will send paging/search data to server using query string and at server side we will get Invalid JSON primitive exceptions! We will revisit this scenario in the next post!

Coding PageMethod is bit tricky as we need to prepare the data in JSON according to the “DataTables” requirement. You can read about it all online. Here's the simple implementation.     Code Snippet

  1. [WebMethod]
  2. public static void GetDataTable()
  3. {
  4.     var context = HttpContext.Current;
  5.     var list = getList(100);
  6.     var orderedList = list.OrderBy(n => n.Description);
  7.     //http://datatables.net/manual/server-side
  8.     var result = new
  9.     {
  10.         recordsTotal = orderedList.Count(),
  11.         recordsFiltered = orderedList.Count(),
  12.         data = orderedList
  13.             .Select(o => new[] { o.NoteID.ToString(), o.Description }),
  14.         error = string.Empty
  15.     };
  17.     //context.Response.Clear();
  18.     var serializer = new JavaScriptSerializer();
  19.     var json = serializer.Serialize(result);
  20.     context.Response.ContentType = "application/json";
  21.     context.Response.Write(json);
  22.     context.Response.Flush();
  23.     context.Response.End();
  24. }

Note that we used JavaScriptSerializer to encode the data into JSON and wrote it directly to the Response setting content type. We flushed the Response and then End it, if we don’t do it; the ASP.NET prefixes the response with its own JSON data which will be NULL; and we will end up having two JSON values that DataTables something like { /* DataTables required Data */ }{ “d”:null /*ASP.NET stuff */ }

Debugging Tip is to use “F12 Developer Tools” or Fiddler to see what’s being communicated between server and browser. jQuery and DataTables are sensitive to JSON format and ASP.NET, especially PageMethods is very strict. http://datatables.net/manual/tech-notes/1 has more details. Watchout for these little things, as said in start, all these things are very fragile Smile

Published Wednesday, August 26, 2015 3:13 PM by khurram
Filed under: ,


No Comments

New Comments to this post are disabled