使用Response.Write实现在页面的生命周期中前后台的交互
最近在做一个很大的查询，花时间很多，
用户会以为死掉了，就做了一个前后交互的，用于显示执行进度，在网上找了一下，这个比较合适。
主要是简单，大道至简
改进了一下：效果如下图
代码：
1，****************************************************
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApplication1
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnShowProgress_Click(object sender, EventArgs e)
{
int s_sum = 10; //总记录数,执行总次数
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append("<html><head><script type='text/javascript' src='jscript.js'></script></head><body><form>");
//sb.Append("<table border = '1' width ='10%'><tr><td id ='area'>0</td></tr></table>");
sb.Append("<table border = '0' width ='10%'><tr><td id ='name'>进度：</td><td id ='area' align='right' style='color:red;'>0</td><td id ='area2' style='color:blue;'>" + "/ "+ s_sum.ToString() + "</td></tr></table>");
sb.Append("</body></form></html>");
HttpContext.Current.Response.Write(sb.ToString());
HttpContext.Current.Response.Flush();
for (int i = 1; i <=s_sum; i++)
{
System.Threading.Thread.Sleep(500); //模拟执行的复杂过程
setProcessValue(i.ToString()); //设置进度值
}
}
//执行进度值
private void setProcessValue(string percent) //percent参数类型用string，用int有时会出错
{
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append("<script>setProcessBarValue('" + percent + "')</script>");
HttpContext.Current.Response.Write(sb.ToString());
HttpContext.Current.Response.Flush();
}
}
}
2，*************************
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID ="btnShowProgress" Text ="Invoke" runat ="server" OnClick="btnShowProgress_Click" />
</div>
</form>
</body>
</html>
3，**********下面这个是javascript文件，文件名为：jscript.js，只包含下面这个函数***********
*********************放在根目录下***************************
function setProcessBarValue(per) {
var area = document.getElementById("area");
if (area) {
area.innerHTML = per;
}
}
上面有部分改动，记录下
原参考网址：https://www.cnblogs.com/isun/p/4160713.html