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");
            //以下可以写转向成功提示的页面
            
        }

    }




初识ASP.NET---与C/S结构相比B/S结构有哪些优点

了解了相关知识后,那么与C/S结构相比B/S结构有哪些优点呢?我们可以从如下几个方面来看: 一、节约成本 无论我们做什么事首先要考虑的肯定是成本问题,没有资金再好...
  • Senior_lee
  • Senior_lee
  • 2014年07月06日 11:37
  • 2048

.Net平台下的B/S开发框架

L.Qiu 博客园首页博问闪存新随笔联系订阅管理 随笔- 29  文章- 0  评论- 112  .Net平台下的B/S开发框架 一、前言   本文主要是对.Net平台...
  • decajes
  • decajes
  • 2013年09月22日 22:37
  • 11341

ERP之软件体系架构-深入理解B/S结构应用程序

随着学习的深入,和编程经验的丰富,对BS应用程序有一些认识。     在一些讨论软件技术的QQ群里,或一些社区、BBS中,经常会有一些初学者会犯一些认知性的错误。比如经常会有一些朋友提这样...
  • lqhed
  • lqhed
  • 2016年12月19日 17:18
  • 838

C/S和B/S结构概念

C/S和B/S结构概念 1.什么是C/S结构 C/S (Client/Server)结构,即客户机和服务器结构。它是软件系统体系结构,通过它可以充分利用两端硬件环境的优势,将任务合理分配到Cl...
  • sinat_35111396
  • sinat_35111396
  • 2016年05月30日 09:56
  • 8877

B/S 开发和 C/S开发的区别

导读:每天都从应用中心下载很多软件安装尝试,在自己的电脑上也装了很多软件,但是,就出现了一个问题,好比QQ,为什么有了APP,还要有网站应用呢?由此,结合到自己的学习,就衍生出一个问题:C/S 开发就...
  • u013034889
  • u013034889
  • 2015年12月12日 20:30
  • 5255

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

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

C#开发B/S方式ActiveX控件

1. 概念 ActiveX 是一个开放的集成平台,为开发人员、 用户和 Web生产商提供了一个快速而简便的在 Internet 和 Intranet 创建程序集成和内容的方法。使用 ActiveX, ...
  • u010411264
  • u010411264
  • 2016年09月07日 23:36
  • 1279

B/S系统MVC与三层结构详解

我们平时总是将三层架构与MVC混为一谈,殊不知它俩并不是一个概念。 下面我来为大家揭晓我所知道的一些真相。 首先,它俩根本不是一个概念。 三层架构是一个分层式的软件体系架...
  • u011228513
  • u011228513
  • 2014年04月30日 15:15
  • 3462

B/S与C/S结构安全的相对比较

关于网络安全软件B/S、C/S两种结构的优劣,近两年来出现过一些技术性的争论,但目前业内人士已经基本达成共识,B/S结构的优越性得到了普遍的认可,B/S结构是否能成为C/S结构的终结者还有待时间的验证...
  • liaoqianwen123
  • liaoqianwen123
  • 2014年05月05日 00:25
  • 3456

B/S结构模式的发展史(有助了解)

一个成熟的大型网站(如淘宝、京东等)的系统架构并不是开始设计就具备完整的高性能、高可用、安全等特性,它总是随着用户量的增加,业务功能的扩展逐渐演变完善的,在这个过程中,开发模式、技术架构、设计思想也发...
  • AinUser
  • AinUser
  • 2017年04月13日 10:30
  • 205
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:B/S结构程序在提交等待时加上进度条,以asp.net c#为例
举报原因:
原因补充:

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