상세 컨텐츠

본문 제목

ASP.NET Ajax Extensions

Web Development/ASP.NET

by thankee 2008. 12. 7. 22:45

본문

ASP.NET Ajax는 Ajax 프로그램의 구현을 쉽고 간단하게 해줍니다. .NET3.5에 포함된 기본 Ajax Extensions는 ScriptManger, UpdatePanel, UpdateProgress, Timer, ScriptMangerProxy를 제공하고 있습니다.

한가지 참고할 점은 Ajax의 큰 장점 중 하나가 네트워크 트래픽을 크게 감소시킬 수 있다는 점인데, ASP.NET Ajax에서는 그 효과를 크게 볼 수 없다는 것입니다.(이 부분을 고려하여 체계적으로 개발한다면 통신 트래픽을 감소시킬 수는 있습니다만) 다만 ASP.NET Ajax를 사용하여 사용자에게 보다 편리하고 흐름이 끊기지 않는 User Interface를 적은 개발 비용으로 제공할 수 있다는 점은 큰 강점입니다.

ScriptManager

ASP.NET 페이지에서 ASP.NET Ajax기능을 사용하기 위해서는 반드시 ScriptManger을 추가하여야 합니다. 통상적으로 Form 태그 바로 아래 위치하며, 반드시 From태그 안에, 다른 Ajax 컨트롤 위에 있어야 합니다.(아시겠지만, ASP.NET페이지의 컨트롤은 순차적으로 해석되기 때문에 컨트롤들의 순서에 따라 결과가 달라지곤 합니다.)

ScriptManager의 기본적인 역할은 ASP.NET Ajax컨트롤들이 작동하는데 필수적인 스크립트 라이브러리를 페이지에 포함시키는 것입니다.

  • EnablePartialRendering : 기본 값은 True로서, Ajax컨트롤들이 비동기 통신으로 업데이트 될지 여부를 결정합니다. False로 설정하면, 동기방식을 사용하여 업데이트합니다.
  • Script : Script Collection은 지정한 Client Scripts를 페이지에 포함시킵니다.
  • Services : ASMX나 WCF 웹 서비스를 Client Script에서 호출하기 위해서는, 이 곳에 해당 Service가 등록되어야합니다.

UpdatePanel

UpdatePanel은 Panel컨트롤과 같이 다른 컨트롤들을 그룹화 해주는 컨트롤입니다. 하지만 Panel Control과의 차이점이라면 Ajax를 이용하여 비동기적으로 패널 내부를 업데이트 시켜준다는 점입니다. 이 UpdatePanel의 주요 속성은 다음과 같습니다.

  • UpdateMode
    • Always : 모든 PostBack요청에 대해서 UpdatePanel이 Update됨을 보장한다는 의미입니다. 심지어 다른 UpdatePanel에 포함된 컨트롤의 PostBack요청에 대해서도, 전체 Full PostBack에 대해서도 해당 UpdatePanel은 Update됩니다.
    • Conditional : 항상 UpdatePanel을 업데이트 시키는 것이 아니라, 특정 조건에서만 업데이트 시킵니다. 해당 UpdatePanel에서 허용한 컨트롤에 의해서만 업데이트가 일어나게 되는 것입니다. Conditional일 때, UpdatePanel이 Update되는 경우는 다음 세가지 경우입니다.
      1. ChildrenAsTriggers이 True로 되어 있고, 자신에 포함된 컨트롤이 PostBack를 요청한 경우.
      2. 해당 UpdatePanel의 Triggers Collection에 등록된 컨트롤이 PostBack요청을 발생시킨 경우.
      3. 아래와 같이 코드 비하인드(*.cs)에서 명시적으로 Update() 메서드를 호출한 경우.
        UpdatePanel1.Update();
  • ChildrenAsTriggers : True로 할경우 UpdatePanel에 포함된 모든 컨트롤의 PostBack요청을 비동기적으로 처리합니다. False로 할 경우, Triggers Collection에 등록된 컨트롤만 PostBack 요청을 처리하게 됩니다. 이 모드가 True가 되기위해서는 UpdateMode가 Always이여야 합니다.
  • Triggers : UpdatePanel을 업데이트 시키는 Trigger(방아쇠)를 등록합니다. Trigger의 종류는 두가지가 있는데 AsyncPostBack과 PostBack입니다.
    • AsyncPostBack : 비동기적인 PostBack시킬 컨트롤을 등록합니다. 여기서 등록된 컨트롤들은(심지어 UpdatePanel 외부에 위치하더라도) UpdatePanel 을 비동기적으로 Update시킵니다.
    • PostBack : 동기적인 Update를 발생시킵니다. 여기에 등록된 컨트롤은(심지어 UpdatePanel 내부에 위치하더라도) 동기적인 PostBack를 일으킵니다. 이 PostBack Trigger가 대표적으로 사용되는 경우는 파일 Upload입니다. 파일은 비동기 방식으로 Upload될 수 없습니다.
  • RenderMode : Panel을 Client로 Rendering할 때, 어떤 태그로 렌더링 할지 결정합니다.
    • Block : Panel은 Block요소인 Div태그로 표현됩니다.
    • Inline : Panel은 Inline요소인 Span태그로 표현됩니다.
  • EnableViewState : Ajax의 중요 장점 중 하나는 HTTP 전송 데이터가 적어 네트워크 부하가 적게 걸린다는 것입니다. 하지만 .NET의 Ajax는 ViewState는 물론이고 일반 PostBack과 맞먹는 많은 데이터를 비동기적으로 전송합니다. 이 중에 ViewState가 차지하는 데이터는 실제로 어마한데, 이 ViewState를 사용하지 않는다면 False로 하여 데이터 전송량을 줄 일 수 있습니다. ViewState는 사용자가 사용할 수 있지만 각 컨트롤들도 컨트롤의 상태정보를 저장하기 위해서 사용합니다. 예를들어 CommandArgument나 CommandName 등이 ViewState를 이용하는 대표적인 데이터입니다. ViewState가 false가 되더라도 크게 문제될 것은 없으므로 특별한 문제를 일으키지 않는한 False로 하는 것이 성능 향상에 도움이 됩니다.

UpdateProgress

UpdateProgress는 UpdatePanel이 비동기 요청을 처리할 때, 나타날 Panel입니다. 특정 UpdatePanel을 지정하는 것만으로도 해당 UpdatePanel이 요청을 처리 할때, 이 UpdateProgress가 화면에 나타나게 됩니다.

  • DisplayAfter : 1/1000초의 값이 지정됩니다. UpdatePanel이 비동기 요청을 전송한 후 몇 초 뒤에 UpdateProgress가 나타날지 결정합니다. 500을 지정하면 UpdatePanel이 요청을 처리한지 0.5초 뒤에 UpdateProgress가 나타나게됩니다.
  • AssociatedUpdatePanelID : 대상 UpdatePanel을 지정합니다. 지정된 UpdatePanel이 처리 중일 때, 이 UpdateProgress가 화면에 출력되게 됩니다.
  • DynamicLayout : False로 한 경우, UpdatePanel은 보이던 보이지 않던, 그 공간을 차지하게 됩니다. True로 할 경우, UpdateProgress가 출력될 때에만 공간을 차지하게 됩니다.

다음은 UpdateProgress에서 비동기 요청 취소 버튼을 사용하는 예입니다.

<script type="text/javascript">
//Ajax .NET 취소 버튼 함수
window.onload = function()
{
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_initializeRequest(InitializeRequest);
    function InitializeRequest(sender, args)
    {
      if (prm.get_isInAsyncPostBack())
          args.set_cancel(true);
    }
    function AbortPostBack()
    {
      if (prm.get_isInAsyncPostBack())
           prm.abortPostBack();
    }
}
</script>

<asp:UpdatePanel ID="up1" runat="server">
    <ContentTemplate>
        <asp:Button ID="bt1" runat="server" Text="OK" onclick="bt1_Click" />
        <asp:TextBox ID="TextBox1" runat="server" />
    </ContentTemplate>
</asp:UpdatePanel>

<asp:UpdateProgress ID="progress1" runat="server" DisplayAfter="150">
    <ProgressTemplate>
        <div ID="div_updateProgress">
            작업이 진행 중입니다...
            <input type="button" value="stop" onclick="AbortPostBack()" />
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>

Timer

일정 간격으로 PostBack을 발생시킵니다. 자체 이벤트 메서드를 가질 수 있으며, UpdatePanel에 포함되어있든 그렇지 않든 상관없이 페이지를 지정된 시간간격으로 PostBack시킵니다.

ScriptMangerProxy

ScriptManager은 하나의 페이지당 하나만 존재할 수 밖에 없습니다. 하지만 Master Page에서 ScriptManger를 사용하고, 하위 자식 MasterPage나 Page들에서 ScriptManager가 사용될 필요가 있을 경우에 이 ScriptManagerProxy가 사용될 수 있습니다. 보통 ScriptManager은 최상위 MasterPaer의 것이 자식까지 모두까지 적용되기 때문에, 보통의 경우에는 자식 Page에 따로 ScriptManagerProxy가 등록 될 필요는 없습니다.

관련글 더보기