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

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

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

    }




阅读更多
想对作者说点什么? 我来说一句

1个简单的三层B/S架构实例

2011年08月06日 197KB 下载

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭