Click here to Skip to main content
Click here to Skip to main content

Web Page Loading in Steps - ASP.NET Solution

, 23 Nov 2009
Rate this:
Please Sign up or sign in to vote.
Web Page Loading in Steps - ASP.NET Solution
Prize winner in Competition "Best ASP.NET article of November 2009"

Table Of Contents

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

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.

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

History

  • 23. November 2009 - Initial release

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Petr Pechovic
Software Developer (Senior)
Czech Republic Czech Republic

Comments and Discussions

 
QuestionUsing in a website [modified] Pinmembereleazaro18-Nov-11 0:21 
GeneralVery Nice Article [modified] Pinmemberpcphuc24-Mar-10 21:43 
GeneralRe: Very Nice Article PinmemberPetr Pechovic24-Mar-10 22:18 
QuestionHow to fire an event Pinmemberrahulcapquest22-Mar-10 5:03 
AnswerRe: How to fire an event PinmemberPetr Pechovic22-Mar-10 9:33 
GeneralProblem Pinmemberknocknock8-Mar-10 5:22 
GeneralProblem Pinmemberknocknock8-Mar-10 5:21 
GeneralRe: Problem PinmemberPetr Pechovic8-Mar-10 6:07 
Hi, yes, I can Smile | :)
 
Petr
GeneralGreat work PinmemberNazrul23-Feb-10 19:56 
GeneralRe: Great work PinmemberPetr Pechovic23-Feb-10 22:22 
GeneralMuch easier ways to achive this PinmemberKikoz6823-Feb-10 10:16 
AnswerRe: Much easier ways to achive this PinmemberPetr Pechovic23-Feb-10 12:31 
GeneralRe: Much easier ways to achive this PinmemberKikoz6824-Feb-10 3:27 
GeneralRe: Much easier ways to achive this PinmemberPetr Pechovic24-Feb-10 6:16 
GeneralRe: Much easier ways to achive this PinmemberKikoz6824-Feb-10 7:46 
GeneralRe: Much easier ways to achive this PinmemberPetr Pechovic24-Feb-10 10:42 
GeneralGreat Idea PinmemberEng. Jalal22-Feb-10 23:09 
GeneralRe: Great Idea PinmemberPetr Pechovic23-Feb-10 0:18 
GeneralRe: Great Idea PinmemberEng. Jalal23-Feb-10 6:27 
GeneralRe: Great Idea PinmemberPetr Pechovic23-Feb-10 12:44 
GeneralExcelent Work !!! PinmvpAbhijit Jana16-Feb-10 3:20 
GeneralRe: Excelent Work !!! PinmemberPetr Pechovic16-Feb-10 7:12 
GeneralI had to bookmark this one too! PinmemberMarcelo Ricardo de Oliveira7-Feb-10 11:04 
GeneralRe: I had to bookmark this one too! PinmemberPetr Pechovic7-Feb-10 21:13 
GeneralGreat! PinmemberJorge Bay Gondra20-Jan-10 1:57 
Generalgood job PinmemberArlen Navasartian14-Jan-10 22:44 
GeneralRe: good job PinmemberPetr Pechovic15-Jan-10 3:02 
GeneralMy 5 ! Pinmembercwp423-Jan-10 23:07 
GeneralRe: My 5 ! [modified] PinmemberPetr Pechovic4-Jan-10 2:59 
QuestionConflict with App_Themes??? Pinmembertruongpham14-Dec-09 6:49 
AnswerRe: Conflict with App_Themes??? PinmemberPetr Pechovic14-Dec-09 9:39 
GeneralRe: Conflict with App_Themes??? Pinmembertruongpham15-Dec-09 15:38 
GeneralRe: Conflict with App_Themes??? [modified] PinmemberPetr Pechovic16-Dec-09 0:15 
GeneralNice One PinmemberAnurag Gandhi30-Nov-09 23:27 
GeneralRe: Nice One PinmemberPetr Pechovic1-Dec-09 0:28 
Generalvery-very useful, thanks PinmemberEugene Kosevtsov30-Nov-09 10:01 
GeneralRe: very-very useful, thanks PinmemberPetr Pechovic30-Nov-09 21:46 
GeneralNice Ariticle Pinmemberthiru_thiru23-Nov-09 19:40 
GeneralRe: Nice Ariticle PinmemberPetr Pechovic23-Nov-09 21:04 
GeneralVery Userful Pinmembernicholas_pei23-Nov-09 16:36 
GeneralRe: Very Userful PinmemberPetr Pechovic23-Nov-09 21:04 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140718.1 | Last Updated 23 Nov 2009
Article Copyright 2009 by Petr Pechovic
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid