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);
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);
Response.Flush();
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>");
Response.Flush();
}
}
I have also attached the sample project with complete code and images.. Thank you.