http://www.mathertel.de/AjaxEngine/S03_AJAXControls/TableData.aspx
There are many implementations available in the ASP.NET framework to display tabular data. Most of them send the content of the table to the client as a part of the page including all the other parts of the page. If it comes to mass data situations the implementations offer a mechanism to navigate through pages containing a smaller set of the records and sending the whole page again and again.
Here comes another approach that offers paging and scrolling even with huge datasets without refreshing the page that uses AJAX calls to a WebService to fetch the data.
If you have followed this documentation you can easily identify the AJAX part of the sample. Most of the JavaScript you can see on the client is written to handle all the events and the HTML DOM operations.
In fact it's a 3 steps approach:
1. When the page loads an empty table that acts as the template is downloaded to the client. No data integration is needed for this phase to finish.
2. Then a query is started by passing some parameters to the WebService that selects all the rows that should be displayed and returns a unique ID for each row.
3. Then a row gets visible the data of this row is fetched from the server using another WebService call that returns a XML document for each row.
The amount of data that is transferred has some overhead in the case of the first page that is displayed but if you scroll down to the next page by using the scrollbars or the page navigation buttons, only the new row data is fetched from the server - far less than a whole page refresh. It gets better when you scroll back to a region or page that was already displayed because the data is already on the client and can be displayed without requesting the server at all.
the rows that are already known on the client can they can be displayed without fetching them again from the server.
As you can imagine, using this approach it is possible to send huge tables to a client without the need to send all record data immediately.
Walk-Through
First select some data using one of the 3 Select buttons. You can now page through the recordset or (by favorite) press the all-button and scroll through the table. You can see the lazy loading of the table rows.
The implementation consists of a WebService, 2 Web Controls and the AJAX Engine that does the asynchronous communication and the caching.
The DataTablePager Control
The DataTablePager is the client side controller of the MVC pattern and is an AJAX Control that implements the AJAX action for retrieving the dataset on the client side. This control acts together with additional buttons as the client- side controller of the whole implementation.
There are some methods available that can be used by additional buttons to load a specific view or to clear the actual data.
Buttons can use these functions to select by supplying a filter and a sorting criteria.
The events that are triggered by scrolling the table also use methods of this control to fetch data from the server.
The DataTable Control
The DataTable control is the client side view of the MVC pattern and is responsible for building up a table that displays the record data fetched from the server formatted by the format given by the template row.
When the page load the template gets saved and when new rows are added this template is copied for every row that should be displayed.
Right now there is only a very simple template processing functionality implemented that can only display columns as simple text and the template is constructed on the server by interpreting the cols attribute of the datatable tag. Every time a row gets visible a fetching the data is initiated by calling the DataTablePager Control's FetchRow Method.
When data comes back from the server the AJAX Action will call the
DataTable Control's FillRow method to fill up the corresponding row with the record data.
The TableData WebService
The WebService that brings the data and the functionality is located at: http://www.mathertel.de/AjaxEngine/S03_AJAXControls/TableData.asmx. The WebService that is used by the AJAX Actions of the DataTablePager Control is the server side model of the implementation.
To bind all 3 elements together only some lines of coding are needed and the sample page itself, containing the controls and the WebService’s proxy, has only some specific attributes that must be set. – Have a look.
Tuning the TableData
After realizing the first working version of TableData I found several things that did not work as expected so I published a better version with some enhancements.
Speed
The first, non optimized version is still available at
http://www.mathertel.de/AjaxEngine/S03_AJAXControls/TableData1.aspx
It retrieved the row from the WebService one row each time. The time that is needed to update a page full of visible rows was only a second or two when developing on my local system but is about 4-6 second on the real internet. The reason for this slow down is the time a package needs to be transferred from the client to the server and back. You can use the tracert command (tracert http://www.mathertel.de) line tool to verify this timing. You can see how long an almost empty package needs to be transferred and that is extremely longer than a package that doesn't leave a development machine. Reducing the number of packages is the key and I decided to bundle the Fetch call for all newly visible rows together into a singe call to the server.
Reusability
When trying to reuse the controls on a different project I found that I need more parameters to make them portable. The name (alias) of the service that is used for selecting and fetching the data is now configurable.