데이터 로딩중 표시하기 2 - Ajax 컨트롤들을 사용하여 모달 팝업으로 표시하기

 

 

ASP.Net 컨트롤을 사용하여 특정 작업을 할 때 모달 팝업으로 데이터 로딩중...과 같은 진행상태를 표시하여 진행 중에 화면에서 다른 작업을 할 수 없도록 하는 예제입니다.

 

이 예제에서는 Ajax 확장 컨트롤인 UpdatePanel, UpdateProgress 와 별도 컨트롤인 AjaxControlToolkit 을 사용하였고, 네이버까페 닷넷 프로그래머 모임에 심재운님이 올리신 글을 참고하였습니다.

 

AjaxControlToolkit 은 아래 URL 이나 아래 첨부파일에서 해당 .Net 버전에 맞는 걸로 다운받으시면 됩니다.

URL: http://ajaxcontroltoolkit.codeplex.com/releases/view/109918

 

AjaxControlToolkit.Binary.NET35.zip

AjaxControlToolkit.Binary.NET40.zip 

AjaxControlToolkit.Binary.NET45.zip

 

 

로딩 중 이미지는 데이터 로딩중 표시하기 1 글에서 다운받으실 수 있습니다.

 

1. WebForm1.aspx.cs 부분

namespace ajaxToolkit4Test
{
    public partial class WebForm1 : 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();
        }
    }
}

 

2. WebForm1.aspx 헤더 부분

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" 
Inherits="ajaxToolkit4Test.WebForm1" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

 

3. WebForm1.aspx - HTML 부분

    <cc1:ToolkitScriptManager id=ToolkitScriptManager1 runat="server">
    </cc1:ToolkitScriptManager>
    <asp:UpdatePanel id=UpdatePanel1 runat="server">
        
            <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="refresh" />
            
        
    </asp:UpdatePanel>

    
        
            
                

                    <img src="loading.gif" style="vertical-align: middle;" 
alt="데이터 로딩중..." />
                    데이터 로딩중...
                
            
        
        
    <cc1:ModalPopupExtender ID="ModalProgress" runat="server" 
        BackgroundCssClass="modalBackground" PopupControlID="panelUpdateProgress" 
        TargetControlID="panelUpdateProgress">
    </cc1:ModalPopupExtender>

 

4. WebForm1.aspx - CSS 부분

 

5. WebForm1.aspx - Javascript 부분

 

6. 결과 화면