[Ajax] UpdateProgress 컨트롤 맛보기

실행전

실행후

UpGex1.aspx

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

<!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>UpdateProgress</title>
<style type="text/css">
div{font-family:vardana; font-size:12px}
input{font-family:Verdana; font-size:12px;
width: 38px;
}
.box{padding:5px; background:orange}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UP1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div class="box" style="background:#dddddd">
<p>
<asp:Label ID="date1" runat="server"></asp:Label></p>
<asp:Button ID="Button1" runat="server" Text="확인" onclick="Button1_Click" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
<br />
<asp:UpdateProgress runat="server" ID="UPG1">
   <ProgressTemplate>
    <div id="Progress" style = "z-index:0;position:absolute; left:15px;top:30px;">
    <p class="box">현재 처리 중입니다...<asp:Image ID="Image1" runat="server"
      ImageUrl="~/Images/4-1.gif" />
    </p>
    </div>
   </ProgressTemplate>
</asp:UpdateProgress>
</div>
</form>
</body>
</html>

4-1.gif 는 움직이는 이미지로 해주는게 보기좋구 이왕이면 처리중이라는 메시지를 업데이트 되는곳이나 특정위치에 지정해주는게 보기 좋다.(style = "z-index:0;position:absolute; left:15px;top:30px;")

그리고 gif 생성해주는 싸이트가 있는데 유용하다. http://www.ajaxload.info/

UpGex1.aspx.cs

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 UpGex1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
date1.Text = DateTime.Now.ToString();
}
protected void Button1_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(2000); //2초간 실행 지연

date1.Text = DateTime.Now.ToString();
}
}

참고 : Taeyo's ASP.NET AJAX v1.0

'Dev > Ajax' 카테고리의 다른 글

[Ajax] JSON 배열 맛보기 (0)	2008.09.11
[Ajax] JSON 이용하여 사원정보 뿌리기 (0)	2008.09.11

'Dev > Ajax' 카테고리의 다른 글

티스토리툴바