ASP.NET page partial rendering

• Download sample - 84.8 KB

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.