B/S结构程序在提交等待时加上进度条,以asp.net c#为例

原创 2012年02月17日 21:24:03

网上进度条的实现方法实在是令人难以满意。不说别的了,看看我是怎么实现的吧。

用兼容性好的JQuery,其中图片waiting.gif 是进度动画图片。

第一:页面用两个Div

<div id="DivCover" runat="server" style="display: none">
                </div>
<div id="Waiting" runat="server" style="display:none">
                    <img src="image/waiting.gif" width="100" height="7" alt="导入或者发送" /><br />
                    正在执行,请稍后……</div>

第二:首先制作,进度条样式,

 <style type="text/css">
    /*等待状态样式开始*/
       
        #DivCover{
            background-color:#cccccc;
            filter: Alpha(Opacity=50, Style=0);
            opacity: 0.50;
            position:absolute;
            left:0px;
            top:0px;
            width:100%;
            height:100%;
            _height:768px;
            z-index:999;
        }
        #Waiting{
            position:absolute;
            text-align:center;
            left:50%;
            top:50%;
            margin-left:-110px;
            margin-top:-50px;
            z-index:1000;
            width:200px;
            background-color:#ffffff;
            padding:15px 10px 10px 10px;
        }
        #Waiting img{
            margin-bottom:10px;
        }
        /*等待状态样式结束*/
    </style>

第三:引用<script src="js/jquery.1.4.2.min.js" type="text/javascript"></script>,jQuery库其他地方下载。


第四:客户端调用样式

<script type="text/javascript">
       
        function AppearProgress() {
            
            $("#DivCover").css("display", "block");
            $("#Waiting").css("display", "block");
        }
    
    </script>

第五:服务端关闭样式

protected void LinkButton1_Click(object sender, EventArgs e)
        {
            System.Threading.Thread.Sleep(5000);
            DivCover.Style.Add("display", "none");
            Waiting.Style.Add("display", "none");
        }


贴出代码来:

(前端代码)

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JsonData.aspx.cs" Inherits="JsonData" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>进度条演示</title>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
       <style type="text/css">
    /*等待状态样式开始*/
       
        #DivCover{
            background-color:#cccccc;
            filter: Alpha(Opacity=50, Style=0);
            opacity: 0.50;
            position:absolute;
            left:0px;
            top:0px;
            width:100%;
            height:100%;
            _height:768px;
            z-index:999;
        }
        #Waiting{
            position:absolute;
            text-align:center;
            left:50%;
            top:50%;
            margin-left:-110px;
            margin-top:-50px;
            z-index:1000;
            width:200px;
            background-color:#ffffff;
            padding:15px 10px 10px 10px;
        }
        #Waiting img{
            margin-bottom:10px;
        }
        /*等待状态样式结束*/
    </style>
    <script src="js/jquery.1.4.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
       
        function AppearProgress() {
            
            $("#DivCover").css("display", "block");
            $("#Waiting").css("display", "block");
        }
    
    </script>
</head>
<body>
    <form id="form1" runat="server">
    
     
    <div >
        <asp:LinkButton ID="LinkButton1" runat="server"
            OnClientClick="AppearProgress()" onclick="LinkButton1_Click">LinkButton</asp:LinkButton>
    </div>
   
    <div id="DivCover" runat="server" style="display: none">
                </div>
        <div id="Waiting" runat="server" style="display:none">
                    <img src="image/waiting.gif" width="100" height="7" alt="导入或者发送" /><br />
                    正在执行,请稍后……</div>
    </form>
</body>
</html>

(后端代码)

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

    public partial class JsonData : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
           
        }


        protected void LinkButton1_Click(object sender, EventArgs e)
        {
        //进度条显示五秒后消失,可以将要执行的程序放在此处,
        //这里用休眠五秒来代替看效果
            System.Threading.Thread.Sleep(5000);
        
            DivCover.Style.Add("display", "none");
            Waiting.Style.Add("display", "none");
            //以下可以写转向成功提示的页面
            
        }

    }




相关文章推荐

C# Asp.Net进度条

  • 2010年10月09日 15:15
  • 444KB
  • 下载

理解B/S结构中服务端同步与异步机制的区别,通过使用ASP.Net异步处理节约队列时间成本,解决大并发量问题

理解B/S结构中服务端同步与异步机制的区别,通过使用ASP.Net异步处理节约队列时间成本,解决大并发量问题     为了方便描述问题,这里我们假设当前的请求队列中存在10个请求,而服务器上总共...
  • kvspas
  • kvspas
  • 2012年12月28日 23:52
  • 917

asp.net带进度条上传程序

  • 2010年09月07日 10:38
  • 72KB
  • 下载

C# ASP.NET B/S模式下,采用lock语法 实现多用户并发产生不重复递增单号的一种解决方法技术参考

转载自:http://www.cnblogs.com/12go/archive/2011/12/24/2300204.html   往往我们在开发程序、调试程序时,无法模拟多用户同时操作的实际环境...

Asp.net 用UpdateProgress加载数据显示进度条

背景:在做asp.net项目时,遇到页面打开加载数据的时候,如果数据加载过慢,就会导致页面出现空白,在网上也查找了一些资料,都是用的js模拟的,查找了一阵子,未果。 所以自己思考了下,自己写了个。 ...

在ASP.NET中将Excel文件中数据导入数据库并显示进度条

在ASP.NET中经常会遇到Excel文件导入数据库的问题,遇到数据量比较大的时候,最好显示进度条。进度条设计是参考网上某牛人提供的代码,利用JS实现的,谢谢这个大牛了(忘记了当时记录下他的大名了,:...

asp.net 实现进度条 用来显示加载进度或程序处理进度

private void Page_Load(object sender, System.EventArgs e) { beginProgress(); for...

基于UML和ASP.NET实现三层B/S结构系统开发

摘要: 进行良好的系统分析和设计是软件项目开发的关键,构架设计的合理与否往往决定了项目的成败。本文结合一个项目的开发,阐述了基于UML的系统建模过程和基于ASP.NET实现面向对象的三层结构应用...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:B/S结构程序在提交等待时加上进度条,以asp.net c#为例
举报原因:
原因补充:

(最多只允许输入30个字)