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

最新推荐文章于 2018-11-07 18:27:52 发布

yqq6com

最新推荐文章于 2018-11-07 18:27:52 发布

阅读量2.5k

点赞数

文章标签： asp.net c# server object jquery filter

本文链接：https://blog.csdn.net/yqq6com/article/details/7269031

版权

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

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

第一：页面用两个Div

第二：首先制作，进度条样式，

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

第四：客户端调用样式

第五：服务端关闭样式

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

        }

    }

yqq6com

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
B/S结构程序在提交等待时加上进度条，以asp.net c#为例

网上进度条的实现方法实在是令人难以满意。不说别的了，看看我是怎么实现的吧。用兼容性好的JQuery，其中图片waiting.gif 是进度动画图片。第一：页面用两个Div 正在执行，请稍后……第二：首先制作，进度条样式， /*等待状态样式
复制链接

扫一扫