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

ASP.NET page partial rendering

, 19 Jun 2012
Rate this:
Please Sign up or sign in to vote.
ASP.NET page partial rendering using the Response.Flush() method.

Introduction

Here is the sample code for rendering partial data to the browser when the ASP.Net page is still in progress. Yes, you can achive this by using simple Response.Flush() method.

The code looks simple, but it is really helpful when the page is making multiple expensive database call or External web service call. You can show available information to the user, instead of showing the busy cursor or making the user to wait for the entire page progressing to be completed.

Background

In one of my projects the Business Logic has to make an external web service call, and based on the web service response, it has to make few more expensive database and web service calls. It made the users to wait for more than two minuts. So we have decided to implement the partial rendering and show the processing status in the browser with available information. Now the clients are happy and they can see the processing status.

Using the code

Create a PartialRendering class using the below code:

using System;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

namespace PartialRendering
{
    public class TextWriter
    {

        static public string CreateTableHeader(string HeaderData)
        {
            return "<Table style='background-color:#0B5226; border:1px solid #306946;' " + 
              "width = '550px' ><Tr><Td colspan='3' style='font-family:Verdana, Arial, " + 
              "Helvetica, sans-serif; font-weight:bold; color:White; vertical-align:middle; " + 
              "text-align:center; font-size:20px; height:50px;'>" + 
              HeaderData + "</Td></Tr></Table>";
        }

        static public string CreateTableRecord(ProcessingStatus Status, string Data, string TableName)
        {
            return "<Table style='border:1px solid #0B5226;background-color: " + 
                   "white;' id=" + TableName + " runat="'server'" width = '550px'> " + 
                   "<Tr style='font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px; " + 
                   "font-weight:bold; color:#000000; vertical-align:middle; text-align:center;'><Td " + 
                   "width='20%'> <img src=" + getProcessingImage(Status) + 
                   " alt=''/></Td><Td width='30%'>" + Data + 
                   "</Td><Td width='50%' style='text-align: left;'><Div>" + 
                   getProcessingMessage(Status) + "</Div></Td></Table>";
        }

        public enum ProcessingStatus
        {
            Success = 1,
            Fail = 2,
            Approval = 3,
            InProgress = 4,
        }

        public static string getProcessingImage(ProcessingStatus Icon)
        {
            switch (Icon)
            {
                case ProcessingStatus.Success:
                    return "'images/Success.png'";
                case ProcessingStatus.Fail:
                    return "'images/Error.png'";
                case ProcessingStatus.Approval:
                    return "'images/home_star.gif'";
                case ProcessingStatus.InProgress:
                    return "'images/Progress.gif'";
                
            }
            return "'images/Progress.gif'";
        }

        public static string getProcessingMessage(ProcessingStatus Icon)
        {
            switch (Icon)
            {
                case ProcessingStatus.Success:
                    return "Successful";
                case ProcessingStatus.Fail:
                    return "Failed";
                case ProcessingStatus.Approval:
                    return "Sent for approval";
                case ProcessingStatus.InProgress:
                    return "In Progress...";

            }
            return "'In Progress...'";
        }
    }
}

And use below codebehind code for making partial rendering while the ASP.net page still in progress.

protected void Page_Load(object sender, EventArgs e)
{
    Response.Buffer = false;
    Literal CrateTableHeader = new Literal();
    CrateTableHeader.Text = TextWriter.CreateTableHeader("Page Processing status ....");
    Response.Write(CrateTableHeader.Text);

    //Code that renders the partial data to browser while the page is still in progress
    Response.Flush();
    
    int  j = 6;
    Literal[] CreateTableRecord = new Literal[j];
    Literal[] CompleteTableRecord = new Literal[j];

    for (int i = 1; i < j; i++)
    {
        CreateTableRecord[i] = new Literal();
        CreateTableRecord[i].Text = TextWriter.CreateTableRecord(
          TextWriter.ProcessingStatus.InProgress, (i * 20).ToString() + 
          " %", i.ToString());
        Response.Write(CreateTableRecord[i].Text);

        //Code that renders the partial data to browser while the page is still in progress
        Response.Flush();

        //Place for making business call / web service call
        Thread.Sleep(4000);

        Response.Write("<script language="'javascript'">");

        Response.Write("var nr = document.all.length;"); 
        Response.Write("for(i=0;i<nr;i++)");
        Response.Write("{");

        Response.Write("if(document.all(i).tagName == 'IMG')");
        Response.Write("{");
        Response.Write("document.all(i).src = 'images/Success.png';");
        Response.Write("}");
        Response.Write("if(document.all(i).tagName == 'DIV' && document.all(i).innerHTML == 'In Progress...')");
        Response.Write("{");
        Response.Write("document.all(i).innerHTML = 'Processed Successful';");
        Response.Write("}");
        Response.Write("}");
        Response.Write("</script>");

        //Code that renders the partial data to browser while the page is still in progress
        Response.Flush();
    }
}

I have also attached the sample project with complete code and images.. Thank you.

License

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

Share

About the Author

J.Jash
Technical Lead
United States United States
I am having 11+ Years of IT experience in Web based and Client-Server application development using Microsoft technologies.
 
Software Architect, as a field, had always fascinated me right from my college days, and always been fascinated with new technologies and Ideas.
 
I have also received EARLY ACHIVER award from Microsoft in Year 2003 for MCAD certification. And acquired MCDBA certification for SQL Server 2000.

Comments and Discussions

 
QuestionNice and Simple Pinmember$andesh M Patil6-Oct-13 23:56 
QuestionNeed to implement the same approach in different scenario....... PinmemberMember 24526984-Sep-12 14:07 
GeneralMy vote of 5 PinmemberFarhan Ghumra20-Jun-12 2:47 
SuggestionNot clean design Pinmemberandychops19-Jun-12 10:39 

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
Web03 | 2.8.140827.1 | Last Updated 19 Jun 2012
Article Copyright 2012 by J.Jash
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid