Click here to Skip to main content
12,635,662 members (25,143 online)
Click here to Skip to main content
Add your own
alternative version


155 bookmarked

Web Page Loading in Steps - ASP.NET Solution

, 23 Nov 2009 CPOL
Rate this:
Please Sign up or sign in to vote.
Web Page Loading in Steps - ASP.NET Solution

Table Of Contents


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">
                    <%# Eval("Value1") %>
                    <%# Eval("Value1") %>

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:


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);

        // 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

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

        // put everything into myself

        // 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
        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">
            <asp:ScriptReference Path="~/js/jquery-1.3.1.min.js" />
<ex3:SimpleSelfloadDiv runat="server" ID="sLoader1" ProgressImageUrl="ajax-loader.gif"
                        HttpEndpoint="LoadData.aspx" />

You can find the whole example in the download package.


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



  • 23. November 2009 - Initial release


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

You may also be interested in...

Comments and Discussions

QuestionUsing in a website Pin
eleazaro18-Nov-11 1:21
membereleazaro18-Nov-11 1:21 
GeneralVery Nice Article [modified] Pin
pcphuc24-Mar-10 22:43
memberpcphuc24-Mar-10 22:43 
GeneralRe: Very Nice Article Pin
Petr Pechovic24-Mar-10 23:18
memberPetr Pechovic24-Mar-10 23:18 
QuestionHow to fire an event Pin
rahulcapquest22-Mar-10 6:03
memberrahulcapquest22-Mar-10 6:03 
AnswerRe: How to fire an event Pin
Petr Pechovic22-Mar-10 10:33
memberPetr Pechovic22-Mar-10 10:33 
GeneralProblem Pin
knocknock8-Mar-10 6:22
memberknocknock8-Mar-10 6:22 
GeneralProblem Pin
knocknock8-Mar-10 6:21
memberknocknock8-Mar-10 6:21 
GeneralRe: Problem Pin
Petr Pechovic8-Mar-10 7:07
memberPetr Pechovic8-Mar-10 7:07 
GeneralGreat work Pin
Nazrul23-Feb-10 20:56
memberNazrul23-Feb-10 20:56 
GeneralRe: Great work Pin
Petr Pechovic23-Feb-10 23:22
memberPetr Pechovic23-Feb-10 23:22 
GeneralMuch easier ways to achive this Pin
Kikoz6823-Feb-10 11:16
memberKikoz6823-Feb-10 11:16 
AnswerRe: Much easier ways to achive this Pin
Petr Pechovic23-Feb-10 13:31
memberPetr Pechovic23-Feb-10 13:31 
GeneralRe: Much easier ways to achive this Pin
Kikoz6824-Feb-10 4:27
memberKikoz6824-Feb-10 4:27 
GeneralRe: Much easier ways to achive this Pin
Petr Pechovic24-Feb-10 7:16
memberPetr Pechovic24-Feb-10 7:16 
GeneralRe: Much easier ways to achive this Pin
Kikoz6824-Feb-10 8:46
memberKikoz6824-Feb-10 8:46 
GeneralRe: Much easier ways to achive this Pin
Petr Pechovic24-Feb-10 11:42
memberPetr Pechovic24-Feb-10 11:42 
GeneralGreat Idea Pin
Eng. Jalal23-Feb-10 0:09
memberEng. Jalal23-Feb-10 0:09 
GeneralRe: Great Idea Pin
Petr Pechovic23-Feb-10 1:18
memberPetr Pechovic23-Feb-10 1:18 
GeneralRe: Great Idea Pin
Eng. Jalal23-Feb-10 7:27
memberEng. Jalal23-Feb-10 7:27 
GeneralRe: Great Idea Pin
Petr Pechovic23-Feb-10 13:44
memberPetr Pechovic23-Feb-10 13:44 
GeneralExcelent Work !!! Pin
Abhijit Jana16-Feb-10 4:20
mvpAbhijit Jana16-Feb-10 4:20 
GeneralRe: Excelent Work !!! Pin
Petr Pechovic16-Feb-10 8:12
memberPetr Pechovic16-Feb-10 8:12 
GeneralI had to bookmark this one too! Pin
Marcelo Ricardo de Oliveira7-Feb-10 12:04
memberMarcelo Ricardo de Oliveira7-Feb-10 12:04 
GeneralRe: I had to bookmark this one too! Pin
Petr Pechovic7-Feb-10 22:13
memberPetr Pechovic7-Feb-10 22:13 
GeneralGreat! Pin
Jorge Bay Gondra20-Jan-10 2:57
memberJorge Bay Gondra20-Jan-10 2:57 
Generalgood job Pin
Arlen Navasartian14-Jan-10 23:44
memberArlen Navasartian14-Jan-10 23:44 
GeneralRe: good job Pin
Petr Pechovic15-Jan-10 4:02
memberPetr Pechovic15-Jan-10 4:02 
GeneralMy 5 ! Pin
cwp424-Jan-10 0:07
membercwp424-Jan-10 0:07 
GeneralRe: My 5 ! [modified] Pin
Petr Pechovic4-Jan-10 3:59
memberPetr Pechovic4-Jan-10 3:59 
QuestionConflict with App_Themes??? Pin
truongpham14-Dec-09 7:49
membertruongpham14-Dec-09 7:49 
AnswerRe: Conflict with App_Themes??? Pin
Petr Pechovic14-Dec-09 10:39
memberPetr Pechovic14-Dec-09 10:39 
GeneralRe: Conflict with App_Themes??? Pin
truongpham15-Dec-09 16:38
membertruongpham15-Dec-09 16:38 
GeneralRe: Conflict with App_Themes??? [modified] Pin
Petr Pechovic16-Dec-09 1:15
memberPetr Pechovic16-Dec-09 1:15 
GeneralNice One Pin
Anurag Gandhi1-Dec-09 0:27
memberAnurag Gandhi1-Dec-09 0:27 
GeneralRe: Nice One Pin
Petr Pechovic1-Dec-09 1:28
memberPetr Pechovic1-Dec-09 1:28 
Generalvery-very useful, thanks Pin
Eugene Kosevtsov30-Nov-09 11:01
memberEugene Kosevtsov30-Nov-09 11:01 
GeneralRe: very-very useful, thanks Pin
Petr Pechovic30-Nov-09 22:46
memberPetr Pechovic30-Nov-09 22:46 
GeneralNice Ariticle Pin
thiru_thiru23-Nov-09 20:40
memberthiru_thiru23-Nov-09 20:40 
GeneralRe: Nice Ariticle Pin
Petr Pechovic23-Nov-09 22:04
memberPetr Pechovic23-Nov-09 22:04 
GeneralVery Userful Pin
nicholas_pei23-Nov-09 17:36
membernicholas_pei23-Nov-09 17:36 
GeneralRe: Very Userful Pin
Petr Pechovic23-Nov-09 22:04
memberPetr Pechovic23-Nov-09 22:04 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    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 | Terms of Use | Mobile
Web02 | 2.8.161208.2 | Last Updated 23 Nov 2009
Article Copyright 2009 by Petr Pechovic
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid