Mittwoch, November 16, 2005

Moving the server

Update you favorites ! (and I hope that my AJAX project is part of them)

Thanks to http://www.centron.de I could host the samples live on a beta web site for ASP.NET 2.0 for free, but that time is over soon.

I decided to move my personal domain http://www.mathertel.de/AJAXEnginethat moved to a ASP.NET 2.0 enabled host so I can put both sides together.

If you have saved a link to the AJAX Demo WebSite you should update this link.

You can find the new samples at http://www.mathertel.de/AJAXEngine and the documentations at http://www.mathertel.de/AJAX.

This blog and the rss url will stay here, but I plan to bring the valuable content into a eBook that I started some time ago.

Stay tuned.

Sonntag, November 13, 2005

Tuning 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 version (still available here) 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 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.

FireFox compatibility

After some months of working with both browsers (IE and FireFox) I've got some experience in implementing one source for both browsers - but forgot to test.

I fixed some minor things:

  • The parentElement attribute of the html dom should not be used. Use parentNode instead.
  • The firstChild attribute might get a text node in FireFox that is skipped or not existing in IE. Whitespace should not be used between a parent node and the fist child node.
  • The onscroll event it is not documented but works as expected in FireFox. Great !

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.

Freitag, November 11, 2005

Displaying huge tables using AJAX

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 by posts in this blog or the documentation on the sample web site 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 pahse 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 every row that is visible 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.

Also when you request another set of records by using another sort criteria 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.

Give it a try and check out the sample implementation at: http://www.mathertel.de/AjaxEngine/S03_AJAXControls/TableData.aspx.

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 deferred 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.

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.

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 rows 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.

DataTable Control

The DataTablePager is the client side view of the MVC pattern and is responsible for dynamically building up the 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 row data must be shown 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 is used by the AJAX Actions of the DataTablePager Control is the server side model of the implementation. This WebService must implement the methods defined by the ITableData interface.

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.

I see still some optimization potential in reducing the number of call to the server by bundling the records that got visible together into a single WebService call. – Stay connected.