ASP.NET AJAX---UpdateProgress控件小实例 (实现进度条&设置显示图片时间)

①.aspx文件

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="False" 
            UpdateMode="Conditional">
        <ContentTemplate>
        
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
            <asp:Button ID="Button1" runat="server" Text="按钮1" οnclick="Button1_Click" />
            <asp:Button ID="Button2" runat="server" Text="按钮2" οnclick="Button2_Click" />
           
            <br />
            <asp:UpdateProgress ID="UpdateProgress1" runat="server">
            <ProgressTemplate>
                <asp:Image ID="Image1" runat="server" Height="538px" 
                    ImageUrl="~/images/CF7FDA912DE906E6E3719A15E1D99102.gif" Width="553px" />
            </ProgressTemplate>
            </asp:UpdateProgress>
           
        </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
                <asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>        
    </div>
    </form>
</body>
</html>

②.aspx.cs文件(后台)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            Label1.Text = "页面加载时间：" + DateTime.Now.ToString();
        }
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = "页面加载时间：" + DateTime.Now.ToString();
    }
    protected void Button2_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);//睡眠3秒（显示图片三秒）
    }

}

③效果图如图：
在这里插入图片描述

④说明：
Ⅰ.点击按钮1，只更新时间不刷新页面。
Ⅱ.点击按钮2，图片显示3秒。

ASP.NET AJAX---UpdateProgress控件小实例 (实现进度条&设置显示图片时间)

猜你喜欢