다음을 통해 공유

연습: ASP.NET UpdatePanel 컨트롤 애니메이션

  • 아티클

업데이트: 2007년 11월

이 연습에서는 비동기 포스트백의 결과로 업데이트된 UpdatePanel 컨트롤에 애니메이션 효과를 주는 방법을 설명합니다.

Microsoft AJAX 라이브러리를 사용하면 클라이언트 페이지 수명 주기에서 이벤트를 관리할 수 있습니다. 클라이언트 PageRequestManager 클래스의 이벤트를 처리하여 이를 수행합니다. 이 연습에서는 페이지의 특정 컨트롤로 인해 비동기 포스트백이 발생하는 경우 beginRequest 및 pageLoaded 이벤트를 사용하여 UpdatePanel 컨트롤에 애니메이션 효과를 주는 방법을 보여 줍니다. beginRequest 이벤트는 비동기 포스트백이 시작되고 포스트백이 서버로 전송되기 전에 발생합니다. pageLoaded 이벤트는 포스트백 및 비동기 포스트백 중 발생합니다. 이 이벤트 중 최근 포스트백의 결과로 만들어지고 업데이트될 패널에 대한 정보에 액세스할 수 있습니다. 포스트백의 경우 패널을 만들 수만 있지만 비동기 포스트백의 경우 패널을 만들고 업데이트할 수 있습니다.

사전 요구 사항

고유한 개발 환경에서 절차를 구현하려면 다음이 필요합니다.

  • Visual Studio 2008 또는 Visual Web Developer 2008 Express Edition

  • AJAX 사용 ASP.NET 웹 사이트

UpdatePanel 컨트롤에 애니메이션 효과를 주는 클라이언트 스크립트 만들기

이 절차에서는 애니메이션 클래스를 정의하는 ECMAScript(JavaScript 또는 JScript) 파일을 만듭니다. 이 클래스는 HTML DOM 요소에 애니메이션 효과를 주는 메서드를 포함합니다. 브라우저에서 애니메이션 효과를 주려는 UpdatePanel 컨트롤은 div 요소로 나타납니다.

UpdatePanel 컨트롤에 애니메이션 효과를 주는 클라이언트 스크립트를 만들려면

  1. AJAX 사용 ASP.NET 웹 사이트에서 UpdatePanelAnimation.js라는 Jscript 파일을 추가합니다.

  2. 파일에 다음 JavaScript 코드를 추가합니다.

    Type.registerNamespace("ScriptLibrary");
ScriptLibrary.BorderAnimation = function(startColor, endColor, duration) {
    this._startColor = startColor;
    this._endColor = endColor;
    this._duration = duration;
}
ScriptLibrary.BorderAnimation.prototype = {
    animatePanel: function(panelElement) {
        var s = panelElement.style;
        var startColor = this._startColor;
        var endColor = this._endColor;
        s.borderColor = startColor;
        window.setTimeout(
            function() {{ s.borderColor = endColor; }},
            this._duration
        );
    }
}
ScriptLibrary.BorderAnimation.registerClass('ScriptLibrary.BorderAnimation', null);

var panelUpdatedAnimation = new ScriptLibrary.BorderAnimation('blue', 'gray', 1000);
var postbackElement;

Sys.Application.add_load(ApplicationLoadHandler);
function ApplicationLoadHandler() {
    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);
}

function beginRequest(sender, args) {
    postbackElement = args.get_postBackElement();
}
function pageLoaded(sender, args) {
    var updatedPanels = args.get_panelsUpdated();
    if (typeof(postbackElement) === "undefined") {
        return;
    } 
    else if (postbackElement.id.toLowerCase().indexOf('animate') > -1) {
        for (i=0; i < updatedPanels.length; i++) {            
            panelUpdatedAnimation.animatePanel(updatedPanels[i]);
        }
    }

}
if(typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();

    Type.registerNamespace("ScriptLibrary");
ScriptLibrary.BorderAnimation = function(startColor, endColor, duration) {
    this._startColor = startColor;
    this._endColor = endColor;
    this._duration = duration;
}
ScriptLibrary.BorderAnimation.prototype = {
    animatePanel: function(panelElement) {
        var s = panelElement.style;
        var startColor = this._startColor;
        var endColor = this._endColor;
        s.borderColor = startColor;
        window.setTimeout(
            function() {{ s.borderColor = endColor; }},
            this._duration
        );
    }
}
ScriptLibrary.BorderAnimation.registerClass('ScriptLibrary.BorderAnimation', null);

var panelUpdatedAnimation = new ScriptLibrary.BorderAnimation('blue', 'gray', 1000);
var postbackElement;

Sys.Application.add_load(ApplicationLoadHandler);
function ApplicationLoadHandler() {
    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);
}

function beginRequest(sender, args) {
    postbackElement = args.get_postBackElement();
}
function pageLoaded(sender, args) {
    var updatedPanels = args.get_panelsUpdated();
    if (typeof(postbackElement) === "undefined") {
        return;
    } 
    else if (postbackElement.id.toLowerCase().indexOf('animate') > -1) {
        for (i=0; i < updatedPanels.length; i++) {            
            panelUpdatedAnimation.animatePanel(updatedPanels[i]);
        }
    }

}
if(typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();

    이 코드는 다음 작업을 수행합니다.

    • registerNamespace 메서드를 호출하여 ScriptLibrary 네임스페이스를 등록합니다.

    • 프로토타입 디자인 패턴을 사용하여 ScriptLibrary 네임스페이스에 BorderAnimation 클래스를 정의합니다. BorderAnimation 클래스에서 animatePanel이라는 메서드는 애니메이션 논리를 정의합니다.

    • registerClass 메서드를 호출하여 BorderAnimation 클래스를 등록합니다.

    • BorderAnimation 클래스의 새 인스턴스를 만듭니다. 코드는 애니메이션 색, 기본 색 및 애니메이션 색을 표시할 시간(밀리초)의 세 가지 값을 클래스 생성자로 전달합니다.

    • Sys.Application 클래스의 load 이벤트에 대한 처리기를 정의합니다. 그런 다음 이 클래스는 PageRequestManager 클래스의 beginRequest 및 pageLoaded 이벤트에 대한 처리기를 정의합니다.

    • beginRequest 이벤트 처리기에서 코드는 포스트백을 발생시킨 요소의 이름을 저장합니다.

    • 포스트백 요소의 ID에 "animate"라는 단어가 포함되어 있는 경우 코드는 pageLoaded 이벤트 처리기에서 애니메이션을 수행합니다.

UpdatePanel 컨트롤에서 클라이언트 스크립트 사용

이 절차에서는 UpdatePanel 컨트롤을 포함하는 페이지에서 애니메이션 스크립트를 사용합니다. 이 스크립트는 패널의 콘텐츠가 새로 고쳐질 때 패널에 애니메이션 효과를 줍니다.

UpdatePanel 컨트롤에 애니메이션 효과를 주려면

  1. 새 페이지를 만들고 디자인 뷰로 전환합니다.

  2. 페이지에 아직 ScriptManager 컨트롤이 포함되어 있지 않은 경우 도구 상자의 AJAX 확장 탭에서 컨트롤을 끌어 옵니다.

  3. 도구 상자에서 UpdatePanel 컨트롤을 두 번 클릭하여 페이지에 UpdatePanel 컨트롤을 추가합니다.

  4. UpdatePanel 컨트롤 내부를 클릭한 다음 도구 상자의 표준 탭에서 Button 컨트롤을 두 번 클릭하여 UpdatePanel 컨트롤에 두 단추를 추가합니다.

  5. 첫 번째 단추의 Text 속성을 Refresh with Animation으로 설정하고 해당 ID를 AnimateButton1로 설정합니다.

  6. 두 번째 단추의 Text 속성을 Refresh with no Animation으로 설정합니다. 해당 ID는 기본값인 Button2로 둡니다.

  7. 소스 뷰로 전환하여 페이지의 head 요소에 있는 style 블록에 다음 스타일 규칙을 추가합니다.

    <style type="text/css">
#UpdatePanel1 {
  width: 300px;
  height: 100px;
  border:solid 1px gray;
}    
</style>

    <style type="text/css">
#UpdatePanel1 {
  width: 300px;
  height: 100px;
  border:solid 1px gray;
}    
</style>

    이러한 스타일 규칙은 UpdatePanel 컨트롤에 대해 렌더링되는 div 요소의 높이, 너비 및 테두리를 정의합니다.

  8. asp:UpdatePanel 요소의 ContentTemplate 요소 내에 다음 코드를 추가합니다.

    <%=DateTime.Now.ToString() %>

    <%=DateTime.Now.ToString() %>

    코드가 최근에 태그가 렌더링된 시간을 표시합니다.

  9. 디자인 뷰로 전환하고 ScriptManager 컨트롤을 선택합니다.

  10. 속성 창에서 스크립트 속성을 선택하고 줄임표(…) 단추를 클릭하여 ScriptReference 컬렉션 편집기 대화 상자를 표시합니다.

  11. 추가를 클릭하여 스크립트 참조를 추가합니다.

  12. 스크립트 참조의 경로 속성을 이전에 만든 JavaScript 파일인 UpdatePanelAnimation.js로 설정합니다.

    ScriptManager의 Scripts 컬렉션을 사용하여 스크립트 참조를 추가하면 Microsoft AJAX 라이브러리에 대한 코드가 로드된 후에 스크립트가 로드됩니다.

  13. 확인을 클릭하여 ScriptReference 컬렉션 편집기 대화 상자를 닫습니다.

  14. 변경 내용을 저장하고 Ctrl+F5를 눌러 브라우저에서 페이지를 봅니다.

  15. 새로 고침 단추를 클릭하여 패널을 새로 고칩니다.

    패널 테두리의 색은 잠시 동안만 변경됩니다.

    <%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>UpdatePanel Animation Example</title>
    <style type="text/css">
    #UpdatePanel1 {
      width: 300px;
      height: 100px;
      border:solid 1px gray;
    }    
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        <Scripts>
        <asp:ScriptReference Path="UpdatePanelAnimation.js" />
        </Scripts>
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <%=DateTime.Now.ToString() %>
                <asp:Button ID="AnimateButton1"  Text="Refresh with Animation" />
                <asp:Button ID="Button2"  Text="Refresh with no Animation" />
            </ContentTemplate>
        </asp:UpdatePanel>

    </div>
    </form>
</body>
</html>

    <%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>UpdatePanel Animation Example</title>
    <style type="text/css">
    #UpdatePanel1 {
      width: 300px;
      height: 100px;
      border:solid 1px gray;
    }    
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        <Scripts>
        <asp:ScriptReference Path="UpdatePanelAnimation.js" />
        </Scripts>
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <%=DateTime.Now.ToString() %>
                <asp:Button ID="AnimateButton1"  Text="Refresh with Animation" />
                <asp:Button ID="Button2"  Text="Refresh with no Animation" />
            </ContentTemplate>
        </asp:UpdatePanel>

    </div>
    </form>
</body>
</html>

검토

이 연습에서는 패널의 콘텐츠가 새로 고쳐질 때 UpdatePanel 컨트롤에 대한 단순한 애니메이션을 제공하는 방법을 보여 주었습니다. JavaScript 파일의 코드는 UpdatePanel 컨트롤에 의해 렌더링되는 HTML div 요소에 애니메이션 효과를 줍니다. JavaScript 파일은 ScriptManager 컨트롤의 Scripts 컬렉션에 추가됩니다. 스크립트 파일의 주요 논리는 PageRequestManager 클래스의 beginRequest 및 pageLoaded 이벤트에 대한 처리기에 정의됩니다.

참고 항목

개념

PageRequestManager 이벤트 작업

참조

Sys.WebForms.PageRequestManager 클래스

Sys.WebForms.PageLoadedEventArgs 클래스