Dev/Ajax

[Ajax] UpdateProgress 컨트롤 맛보기

쇼크리더 2008. 9. 18. 09:31
반응형
실행전

실행후


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

반응형