태터데스크 관리자

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

태터데스크 메시지

저장하였습니다.
   情  
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이 나타나게 되며, 요청이 끝나면 자연스레 사라집니다. 또한 요청 취소버튼까지 제공되므로 보다 유연한 웹 어플리케이션이 될 것입니다!!

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

Tag : ,

name    password    homepage
 hidden


 Category
분류 전체보기 (95)
Netwrok & Security (6)
Web Development (61)
Database (5)
Framework (6)
Others (17)
About (0)
 TAGS
: ajax Android APM application error #401 ASP ASP.NET asp.net ajax ASP.NET Machine at ATRIX ATX ATX와BTX의차이 Auto-Negotiation back-end bash shell Bit ending Blog API BTX c#.net CentOS class id 차이 CSMACD data tier Database DB DB동작원리 DB처리과정 DTD ebnf ethereal ethernet exception firefox2 설치 font-family Framework과 자동로그인 front-end FTP get post 우선순위 hotmail
 Calendar
«   2018/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 : 264,790
Today : 22
Yesterday : 58
rss
 

티스토리 툴바