使用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

相关推荐
可涵不会debug4 天前
LangChain 进阶之路:LangGraph 图工作流、有状态智能体完整入门教程
microsoft
元岳数字人小元4 天前
无惧网络受限:数字人私有化部署打造离线全域服务能力
运维·人工智能·开源·人机交互·交互
兰亭妙微UI设计公司5 天前
兰亭妙微UI设计公司分享:EQUA 智能健康生态系统 UI/UX 设计深度解析
ui·交互
Access开发易登软件7 天前
Access 复杂业务计算,SQL 写在 VBA 还是存储过程?
microsoft·vba·access·access开发
宝桥南山9 天前
Microsoft Fabric - 简单尝试一下Microsoft Fabric .NET SDK
microsoft·微软·.net·.netcore·powerbi·fabric
hqyjzsb9 天前
规划工商管理大学成长:搭建四层能力体系,重视高阶的 AI 能力建设
开发语言·人工智能·python·microsoft·职场和发展·数据挖掘·业界资讯
hhzz9 天前
OpenCV 入门到精通 09】特征检测与匹配:从 Harris 到 ORB 图像配准
人工智能·opencv·计算机视觉·开源·交互
兰亭妙微UI设计公司10 天前
兰亭妙微APP界面设计公司分享: iPhone Duo 登场|3 大核心要点,拆解折叠屏 UI 适配设计思路
ui·交互
ai_finder10 天前
买卖点预警系统是怎么工作的?从自然语言到盯盘任务的一次工程拆解
人工智能·科技·microsoft·金融
智购科技自动售货机工厂10 天前
2026自动售货机端侧AI降本逻辑:从云端API到本地推理的成本重构~YH
人工智能·python·ui·面试·交互