태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.
   情  
Front Page
Tag | Location | Media | Guestbook | Admin   
 
'UpdateProgress'에 해당하는 글(1)
2008.12.25   ASP.NET Ajax ModalPopup UpdateProgress


ASP.NET Ajax ModalPopup UpdateProgress

ASP.NET Ajax를 사용하다보면 자연스럽게 사용하게 되는 컨트롤이 바로 UpdateProgress입니다. 하지만 이 UpdateProgress를 화면의 가운데 띄운다거나, 처리 중에 다른 버튼을 클릭함으로서 발생하는 다양한 문제들을 피하기 위해 Modal Window를 띄우길 원한다면, UpdateProgress만으로는 처리가 힘듭니다. CSS만으로 분명 화면의 가운데  UpdateProgress를 나타낼 수 있지만, IE6만은 CSS의 갖은 편법을 이용해야하고, 사용한 편법때문에 뒤이어 터지는 문제로 골머리 앓는 경우도 있습니다.

다음은 Ajax Control Toolkit에서 제공하는 Modal Popup Extender를 이용하여 작성한 ModalPopup UpdateProgress입니다.

이 기능을 구현하는데는 UpdateProgress를 이용하지 않습니다. <div runat="server' />엘리먼트가 UpdateProgress를 대신합니다. 먼저 다음과 같이 UpdateProgress로 사용할 메시지를 작성합니다.

<div id="div_updateProgress" class="updateProgress
        style="display:none;" runat="server">
    <p
         작업이 진행 중입니다... 
         <input type="button" value="stop" onclick="AbortPostBack()" />
    </p>
</div>
<cc1:ModalPopupExtender ID="modalPopupUpdateProgress"
        runat="server" TargetControlID="span_fake"
        BackgroundCssClass="modalPopupBack
        PopupControlID="div_updateProgress" />
<span id="span_fake" style="display: none;" />

위의 코드는 취소버튼을 포함하고 있는, Ajax Modal Popup입니다. 다음에는 ASP.NET에서 제공하는 Javascript 객체를 이용하여 이 팝업이 적절한 순간에 나타났다가 사라지게 만듭니다. 다음 자바스클비트 코드를 <body> 하단에 넣어 줍니다.

beginReq라는 함수에 딜레이 시간을 설정할 수 있습니다. 이 시간을 0으로 한다면, 요청이 시작되지마자 ModalPopup UpdateProgress가 나타나게 됩니다. 그 외 다른 설명은 하지 않겠습니다. 별로 어려울것 없고, 제가 주석까지 친절하게 달아두었기 때문에.......

<script type="text/javascript" language="javascript">
    var ModalProgress = '<%= modalPopupUpdateProgress.ClientID %>';
    //AJAX Modal UpdateProgress And Abort Button
    var prm;
    window.onload = function()
    {
        //Abort Button
        prm = Sys.WebForms.PageRequestManager.getInstance();
       prm.add_initializeRequest(InitializeRequest);

       //Modal UpdateProgress Popup
        prm.add_beginRequest(beginReq);
        prm.add_endRequest(endReq);
    }
    //enable abort function
    function InitializeRequest(sender, args)
    {
        if (prm.get_isInAsyncPostBack())
            args.set_cancel(true);
    }
    //Abort asynchronous postback request
    function AbortPostBack()
    {
        if (prm.get_isInAsyncPostBack())
            prm.abortPostBack();
    }
    //set delay time and show the popup after delay
    function beginReq(sender, args)
    {
        setTimeout('showUpdateProgressPopup()', 300);
    }
    //hide the popup when the request is done
    function endReq(sender, args)
    {
        $find(ModalProgress).hide();
    }
    //show the popup if the request is not finished yet
    function showUpdateProgressPopup()
    {
        if(prm.get_isInAsyncPostBack())
            $find(ModalProgress).show();
    }
</script>

다음은  Modal Popup와 팝업이 나타났을 때, 전체페이지에 적용되는 CSS를 작성합니다.

.AjaxModalPopupBackground
{
    background-color:Gray;
    filter:alpha(opacity=70);
    opacity:0.7;
}
.updateProgress 
{
    width: 200px;
    height: 50px
    background-color: White;
    border: 1px black solid;
    text-align: center;  
}
.updateProgress p { margin: 5px;}

위와 같은 코드를 모두 작성하면, Ajax요청이 있을 때마다 작성한 Popup이 나타나게 되며, 요청이 끝나면 자연스레 사라집니다. 또한 요청 취소버튼까지 제공되므로 보다 유연한 웹 어플리케이션이 될 것입니다!!

마지막으로, 대충 소스만 올린점 죄송스럽게 생각하며, 스샷하나도 없다면 머리 아파하실 것 같아 아래와 같은 스샷 첨부합니다.

신고
크리에이티브 커먼즈 라이선스
Creative Commons License
Tag : ,

name    password    homepage
 hidden


 Category
분류 전체보기 (95)
Netwrok & Security (6)
Web Development (61)
Database (5)
Framework (6)
Others (17)
About (0)
 TAGS
web tier class id 차이 ajax ebnf WCF 오라클 PHP 강좌 영국 홈스테이 data tier linux UpdateProgress 특수문자 영국 학원 리눅스 MS SQL Server 영국 인턴쉽 SourceSafe Internet application error #401 XML It's me c#.net RFC 4180 smarty SourceSafe2005 mantis id name 차이 Blog API DTD Silverlight ASP ie6 자바스크립트 버그 php mantis bug tracker 자바스크립트 ASP.NET maxRecievedMessageSize exception LiveMail 오라클 구조 ATRIX
 Calendar
«   2017/08   »
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31    
 Visitor Statistics
Total : 244,497
Today : 27
Yesterday : 100
rss
 

티스토리 툴바