Web Page Loading in Steps - ASP.NET Solution

Prize winner in Competition "Best ASP.NET article of November 2009"

Download source - 41.45 KB

Introduction
Architectural Overview
Concrete Implementation
Conclusion
References
History

Introduction

Based on the [1] article, especially the section “Break UI Loading into Multiple Stages”, I decided to write a reusable ASP.NET control doing the mentioned functionality. As usual in my articles, you can see the live demo here.

The article also tries to explain the architecture and point out to other solutions.

I assume the reader knows the basics about ASP.NET development.

Architectural Overview

What’s the Common Scenario? / How does it Usually Work?

The common scenario to reach the desired page on the internet is to write the URL to a browser and press Enter. Basically say the browser asks a server for the requested page. The server builds the page (HTML) and sends the result back to the browser. The browser displays the result to the user and makes HTTP requests to other content like images, etc. Let’s jump back to the stage when the server is building the content of the page. Some parts of the page are usually static data immediately available to use. Another data of the page could be dynamic, either from huge database heavy for calculation or from another server like RSS channel. The point is that some of the data is quickly available and some of the data need time to be loaded. The HTML build by server isn't sending to the browser until it is completely created. That is obvious.

AJAX Comes to the Scene

Using AJAX, you can split the load of the page into multiple phases in a very elegant way. Basically in the first HTTP request, you return the data undemanding to take time to be prepared and then using AJAX you can ask for the rest of the content. Let’s see the sequential diagram.

Pic 1. – Sequential diagram

Depth Look at the AJAX Request in this Case

There are certainly a few questions about the AJAX request in this case. Let’s see some of them:

What is the best format of the data returned by the server? XML, JSON, proper HTML or something else?
What’s the best type of HTTP endpoint for the AJAX request? Web Service, WCF, ASPX page or something else?
Where to do the data binding? On the client or on the server?

The answers to these questions depend on the architecture of your system. You have to choose which implementation will be suitable for you. I chose one concrete implementation which was suitable for my system. It’s the proper HTML as the response of the server and ASPX page as an HTTP end point. The data binding is done by the server, for I'm not providing the data objects to the client.

Concrete Implementation

As I already mentioned, there are several options to implement it. I will describe my implementation now.

HTTP Endpoint

The HTTP endpoint in my solution is responsible for providing all the data in HTML format. The simplest way to achieve this could be using ASPX page or ASHX handler. I chose ASPX page because it’s very simple. The only thing you have to figure out is to remove all the DOM elements automatically generated by Visual Studio. Look at the example now.

<%@ Page Language="C#" AutoEventWireup="true" 
	CodeBehind="LoadData.aspx.cs" Inherits="DnsSelfLoadDiv.LoadData" %>

<asp:repeater runat="server" id="repMain">
        <HeaderTemplate>
            <table>
        </HeaderTemplate>
        <ItemTemplate>
            <tr>
                <td>
                    <%# Eval("Value1") %>
                </td>
                <td>
                    <%# Eval("Value1") %>
                </td>
            </tr>
        </ItemTemplate>
        <FooterTemplate>
            </table>
        </FooterTemplate>
    </asp:repeater>

See, there are the page directives and then directly the repeater. There is no body tag or such a thing. It’s because the result of HTTP endpoint is bound into the existing HTML page.

ASP.NET AJAX Control Responsible for Data Load

Let’s look at the simple diagram describing used files.

Pic 2.

The control contains two files. It’s the Web Control and the Java Script control. The web control is responsible for creating DIV element into a DOM. The JavaScript class, on the other hand, is far interested because it’s the core of the described functionality. Thanks to Microsoft AJAX JS library the Java Script class can be written as a class and thanks to jQuery the command in the class is very simple to read. So let’s introduce the whole script:

Type.registerNamespace("DotNetSources.SelfLoadDiv");

DotNetSources.SelfLoadDiv = function(element) {
    DotNetSources.SelfLoadDiv.initializeBase(this, [element]);

    // handlers
    this._onLoadHandler = null;
    this._data = false;

    // properties
    this._httpEndPoint = null;
    this._progressImageUrl = null;
}

DotNetSources.SelfLoadDiv.prototype = {

    initialize: function() {
        DotNetSources.SelfLoadDiv.callBaseMethod(this, 'initialize');

        // register handler
        this._onLoadHandler = Function.createDelegate(this, this._get_content);
        Sys.Application.add_load(this._onLoadHandler);

        // hide me fast
        $("#" + this.get_id()).hide();
    },

    _get_content: function() {

        // load progress into myself as another div

        // create div
        var innerDiv = document.createElement("div");
        innerDiv.setAttribute('style', 'text-align: center;');

        // create image
        var pImg = document.createElement("img");
        pImg.setAttribute('src', this.get_progressImageUrl());

        // put image into div
        innerDiv.appendChild(pImg);

        // empty myself
        this.get_element().innerHTML = "";

        // put everything into myself
        this.get_element().appendChild(innerDiv);

        // show me slowly using jQuery
        $("#" + this.get_id()).slideDown("slow", Function.createDelegate
					(this, this._show_progress_step1));

    },

    _show_progress_step1: function() {
        // continue with request

        $.get(this.get_httpEndPoint(), Function.createDelegate
					(this, this._data_available));
    },

    _data_available: function(data) {

        this._data = data;
        // hide myself slowly
        $("#" + this.get_id()).slideUp("slow", Function.createDelegate
					(this, this._data_available_step1));
    },

    _data_available_step1: function() {

        // empty myself
        this.get_element().innerHTML = "";

        // put new content into myself
        this.get_element().innerHTML = this._data;

        // show me slowly
        $("#" + this.get_id()).slideDown("slow");

        // DONE
    },

    //
    // Properties 
    //

    get_httpEndPoint: function() {
        return this._httpEndPoint;
    },

    set_httpEndPoint: function(value) {
        this._httpEndPoint = value;
    },

    get_progressImageUrl: function() {
        return this._progressImageUrl;
    },

    set_progressImageUrl: function(value) {
        this._progressImageUrl = value;
    },

    //
    // Properties 
    //

    dispose: function() {
        //Add custom dispose actions here
        Sys.Application.remove_load(this._onLoadHandler);
        DotNetSources.SelfLoadDiv.callBaseMethod(this, 'dispose');
    }
}
DotNetSources.SelfLoadDiv.registerClass('DotNetSources.SelfLoadDiv', Sys.UI.Control);

I hope there is no need for additional description. Everything begins with the function _get_content and continues with the functions below it. At last, it ends up with the comment //DONE. If you are familiar with jQuery, you can simply change the animations as you like.

Using the Code

To use it, you need to add ScriptManager into your page, register the jQuery library and at last, add the server control. In the server control, you need to specify the progress image URL and the HTTP endpoint from where the data will be loaded. It can look like:

<%@ Register tagPrefix="ex3" namespace="DnsSelfLoadDiv" assembly="DnsSelfLoadDiv" %>
…
<asp:ScriptManager runat="server" ID="sManager">
        <Scripts>
            <asp:ScriptReference Path="~/js/jquery-1.3.1.min.js" />
        </Scripts>
    </asp:ScriptManager>
...
<ex3:SimpleSelfloadDiv runat="server" ID="sLoader1" ProgressImageUrl="ajax-loader.gif"
                        HttpEndpoint="LoadData.aspx" />

You can find the whole example in the download package.

Conclusion

Thank you for reading. I'm open for discussion and proposals. Please don't hesitate to write your opinion or vote.

References

[1] Omar Al Zabir’s 7 Tips for Loading JavaScript Rich Web 2.0-like Sites Significantly Faster
[2] Dino Esposito, Microsoft ASP.NET and AJAX: Architecting Web Applications, ISBN: 978-0-7356-2621-8