조선일보 사절 It's better to burn out than to fade away

출처 : http://mattberseth.com/blog/2007/05/ajaxnet_example_using_an_updat.html
데모보기 : http://mattberseth2.com/progress_indicator/

참고 : ajax.net Animation Reference


검색버튼을 누르면 리스트가 희미해지고 정 중앙에 로딩중을 표시하는 gif 애니메이션 이미지가 올라온다.
검색결과가 리턴되고 업데이트 판넬이 새로 랜더링되면 리스트는 원래의 투명도로 돌아오고 로딩이미지는 사라진다.

이것을 구성하기위해 updatepanel,grid-view,updatepanelAnimationExtender(upax) 를 사용한다.

1. updatepanel 의 트리거 이벤트 발생
2. upax 의 OnUpdating 처리
    - <parallel> 은 각 애니메이션이 각각의 타이머를 갖고 독립적으로 수행된다는 것임(동시실행)
    - duration=0 은 애니메이션 처리가 즉각 발생한다는 것임,시간을 지정하면 그 시간동안 천천히 애미메이션됨.
    - 즉 , onUpdating 이란 스크립트의 호출 , btnSearch 버튼의 비활성화, updatePanel1 의 투명도를 50% 로 하는 애니메이션을 동시에 수행함.
    - onUpdating 스크립트는 중앙에 로딩 이미지를 위치시키는 역할을 함.

3. btnSearch 의 클릭 이벤트 처리로 그리드뷰가 새로 바인딩
4. updatePanel1 의 refresh(update)
5. upax 의 OnUpdated 처리
   - 투명도 Fade-In
   - btnSearch 활성화
   - onUpdated 스크립트 call - 로딩중 이미지 감추기

여기서..

function onUpdating(){
        // get the update progress div
        var updateProgressDiv = $get('updateProgressDiv');
        // make it visible
        updateProgressDiv.style.display = '';

        //  get the gridview element       
        var gridView = $get('<%= this.gvCustomers.ClientID %>');
       
        // get the bounds of both the gridview and the progress div
        var gridViewBounds = Sys.UI.DomElement.getBounds(gridView);
        var updateProgressDivBounds = Sys.UI.DomElement.getBounds(updateProgressDiv);
       
        //    do the math to figure out where to position the element (the center of the gridview)
        var x = gridViewBounds.x + Math.round(gridViewBounds.width / 2) - Math.round(updateProgressDivBounds.width / 2);
        var y = gridViewBounds.y + Math.round(gridViewBounds.height / 2) - Math.round(updateProgressDivBounds.height / 2);
       
        //    set the progress element to this position
        Sys.UI.DomElement.setLocation (updateProgressDiv, x, y);       
    }

AJAX.Net 도 스크립트로 직접 핸들링할 수 있는 방법을 제공하고 있음을 알 수 있다.
하지만 YUI 보다는 왠지 답답함을 느낀다.

출처 : http://mattberseth.com/blog/2007/06/quick_ajax_tip_provide_a_bette.html

데모보기 : http://mattberseth2.com/ajaxified_wizard/

앞에 포스팅한 http://mattberseth.com/blog/2007/05/ajaxnet_example_using_an_updat.html 의 응용되겠다.

출처 :http://www.codeproject.com/KB/ajax/DelayedContentLoading.aspx

updatepanel,timer,multi-view,rss-toolkit 를 사용한 좋은 예제인 것 같다.

멀티뷰와 업데이트 판낼을 사용해 비동기 요청의 상태를 변화시키는 것은 좋은 생각인듯

출처 :http://blog.markerstudio.com/archives/450


updatepanel 의 트리거로 지정된 컨트롤(링크버튼 같은...)의 포스백 스크립트를 호출해서
강제로 업데이트판넬을 refresh 할 수 있다.

보통 트리거인 컨트롤의 이벤트 발생시 __doPostBack('컨트롤아이디') 함수가 호출되는 것을 볼 수 있다.
즉 이 포스트백 스크립트를 호출해서 트리거 컨트롤의 포스백을 유도하고 이에 연결된 업데이트판넬의 업데이트를 유도하는 것이다.

정리하면,

1. 버튼을 하나 둔다.css 로 보이지 않게 숨긴다.
2. 버튼을 업데이트판넬의 트리거로 지정한다.
3. 필요한 스크립트에서 __doPostBack(버튼아이디) 호출한다.

이렇게 한다는 것이다.