ASP.NET Ajax ModalPopup UpdateProgress

by thankee 2008. 12. 25. 16:42

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;}