데이터 로딩중 표시하기 1 - Ajax 컨트롤 UpdatePanel, UpdateProgress

 

 

화면에서 ASP.Net 컨트롤을 사용하여 특정 작업을 할 때 작업시간이 오래 걸리면 다시 PostBack 이 일어날 때까지 화면이 아무 반응이 없습니다. 이럴 경우 데이터 로딩중... 혹은 잠시만 기다려주세요.. 같은 진행상태를 표시해 주는 예제입니다.

 

이 예제에서는 Ajax 확장 컨트롤인 UpdatePanel 과 UpdateProgress 를 사용합니다.

예제에서 사용된 로딩 중 이미지는 아래 파일을 다운받으시면 됩니다.

 

  loading.zip

(loading.zip 파일을 다운받아 압축을 푸시면 왼쪽 그림과 같은 loading.gif 가 나옵니다)

 

1. WebForm2.aspx 부분

    <asp:ScriptManager id=ScriptManager1 runat="server"></asp:ScriptManager>
    <br />
    
        
            
            
        
    
    <asp:UpdateProgress ID="UpdateProgress1" runat="server" 
AssociatedUpdatePanelID="UpdatePanel1">
        
            

                <IMG style="VERTICAL-ALIGN: middle" alt=로딩중 src="loading.gif">
                로딩중...
            
        
    

 

2. WebForm2.aspx.cs 부분

public partial class WebForm2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(2000);
        this.Label1.Text = DateTime.Now.ToString();
    }
}

 

3. 결과 화면