ASP.NET 页面部分渲染

• 下载示例 - 84.8 KB

引言

以下是当 ASP.Net 页面仍在处理中时，将部分数据渲染到浏览器中的示例代码。是的，您可以使用简单的 Response.Flush() 方法来实现这一点。

代码看起来很简单，但当页面进行多次昂贵的数据库调用或外部 Web 服务调用时，它确实很有帮助。您可以向用户显示可用信息，而不是显示忙碌的鼠标指针或让用户等待整个页面处理完成。

背景

在我的一个项目中，业务逻辑必须进行外部 Web 服务调用，并根据 Web 服务响应，进行一些更昂贵的数据库和 Web 服务调用。这让用户等待超过两分钟。因此，我们决定实现部分渲染，并在浏览器中显示可用信息和处理状态。现在客户很高兴，他们可以看到处理状态。

使用代码

使用以下代码创建一个 PartialRendering 类

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...'";
        }
    }
}

并使用以下代码隐藏代码在 ASP.net 页面仍在处理时进行部分渲染。

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

我还附上了包含完整代码和图像的示例项目。谢谢。