다음을 통해 공유

UpdatePanel 컨트롤 소개

  • 아티클

업데이트: 2007년 11월

이 자습서에서는 ScriptManager 컨트롤 및 UpdatePanel 컨트롤이라는 두 가지 ASP.NET AJAX 서버 컨트롤을 사용하여 부분 페이지 업데이트 지원을 웹 페이지에 추가합니다. 이러한 컨트롤을 사용하면 각 포스트백마다 전체 페이지를 새로 고칠 필요가 없어지므로 사용자 경험이 더 나아집니다. 부분 페이지 업데이트에 대한 자세한 내용은 부분 페이지 렌더링 개요를 참조하십시오.

사전 요구 사항

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

  • Microsoft Visual Studio 2005 또는 Microsoft Visual Web Developer Express Edition

  • AJAX 사용 ASP.NET 웹 사이트

UpdatePanel 컨트롤을 사용하려면

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

  2. 도구 상자의 AJAX 확장 탭에서 ScriptManager 컨트롤을 두 번 클릭하여 페이지에 추가합니다.

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

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

    참고:

    Label 및 Button 컨트롤이 UpdatePanel 컨트롤 내부에 추가되는지 확인합니다.

  5. Label의 Text 속성을 만든 패널로 설정합니다.

  6. Button 컨트롤을 두 번 클릭하여 단추의 Click 이벤트에 대한 처리기를 추가합니다.

  7. 패널의 레이블 값을 현재 시간으로 설정하는 다음 코드를 Click 처리기에 추가합니다.

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    Label1.Text = "Refreshed at " & _
        DateTime.Now.ToString()
End Sub

    protected void Button1_Click(object sender, EventArgs e)
{
    Label1.Text = "Refreshed at " +
        DateTime.Now.ToString();
}

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

  9. 단추를 클릭합니다.

    패널의 텍스트가 변경되어 패널 내용을 마지막으로 새로 고친 시간을 표시합니다. 이 텍스트는 단추의 Click 이벤트 처리기에서 설정합니다.

    이 예제는 UpdatePanel이 나타내는 페이지 영역을 더 잘 보여 줄 수 있도록 꾸며져 있습니다.

    <%@ Page Language="VB" %>

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

<script >
    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        Label1.Text = "Refreshed at " & _
            DateTime.Now.ToString()
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>Untitled Page</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Label ID="Label1"  Text="Panel created."></asp:Label><br />
                <asp:Button ID="Button1"  OnClick="Button1_Click" Text="Button" />
                </fieldset>
            </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">

<script >

    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = "Refreshed at " +
            DateTime.Now.ToString();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>Untitled Page</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px; height:100px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div style="padding-top: 10px">
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Label ID="Label1"  Text="Panel created."></asp:Label><br />
                <asp:Button ID="Button1"  OnClick="Button1_Click" Text="Button" />
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <br />
        </div>

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

    패널 내용은 단추를 클릭할 때마다 변경되지만 전체 페이지가 새로 고쳐지지는 않습니다. 기본적으로 UpdatePanel 컨트롤의 ChildrenAsTriggers 속성은 true입니다. 이 속성을 true로 설정하면 패널의 컨트롤이 포스트백을 발생시킬 경우 패널 내부의 컨트롤이 부분 페이지 업데이트에 참가합니다.

UpdatePanel 컨트롤의 이점 이해

UpdatePanel 컨트롤의 이점을 가장 잘 이해하는 방법은 업데이트 패널에 포함되어 있지 않은 몇 가지 컨트롤을 페이지에 추가해 보는 것입니다. 그런 다음 이 컨트롤의 동작이 업데이트 패널 내부의 컨트롤과 어떻게 다른지 확인할 수 있습니다.

UpdatePanel 컨트롤 사용의 이점을 보여 주려면

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

  2. 도구 상자의 AJAX 확장 탭에서 ScriptManager 컨트롤을 두 번 클릭하여 페이지에 추가합니다.

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

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

    참고:

    Calendar 컨트롤이 UpdatePanel 컨트롤 내부에 추가되는지 확인합니다.

  5. UpdatePanel 컨트롤의 외부를 클릭한 다음 두 번째 Calendar 컨트롤을 페이지에 추가합니다.

    이 컨트롤은 UpdatePanel 컨트롤의 일부가 아닙니다.

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

  7. UpdatePanel 컨트롤 내부에 있는 달력에서 이전 또는 다음 달로 이동합니다.

    전체 페이지를 새로 고치지 않고 표시된 달이 변경됩니다.

  8. UpdatePanel 컨트롤 외부에 있는 달력에서 이전 또는 다음 달로 이동합니다.

    전체 페이지가 새로 고쳐집니다.

    이 예제는 UpdatePanel이 나타내는 페이지 영역을 더 잘 보여 줄 수 있도록 꾸며져 있습니다.

    <%@ Page Language="VB" %>

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

<script >

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Calendar ID="Calendar1" ></asp:Calendar>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <br />
        <asp:Calendar ID="Calendar2" ></asp:Calendar>    
    </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">

<script >

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Calendar ID="Calendar1" ></asp:Calendar>
                </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
        <br />
        <asp:Calendar ID="Calendar2" ></asp:Calendar>    
    </div>
    </form>
</body>
</html>

외부 단추를 사용하여 UpdatePanel 컨트롤 새로 고침

기본적으로 UpdatePanel 컨트롤 내부에 있는 단추와 같은 포스트백 컨트롤은 부분 페이지 업데이트를 일으킵니다. UpdatePanel 컨트롤 외부에 있는 단추나 다른 컨트롤은 앞에서 확인한 것처럼 기본적으로 전체 페이지를 새로 고칩니다.

또한 업데이트 패널 외부의 컨트롤이 업데이트 패널만 새로 고치는 트리거가 되도록 구성할 수도 있습니다.

외부 단추를 사용하여 UpdatePanel 컨트롤을 새로 고치려면

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

  2. 도구 상자의 AJAX 확장 탭에서 ScriptManager 및 UpdatePanel 컨트롤을 두 번 클릭하여 각 컨트롤을 하나씩 페이지에 추가합니다.

  3. UpdatePanel 컨트롤의 내부를 클릭하고 도구 상자의 표준 탭에서 Label 컨트롤을 두 번 클릭하여 UpdatePanel 컨트롤에 추가합니다.

  4. 레이블의 Text 속성을 만든 패널로 설정합니다.

  5. UpdatePanel 컨트롤의 외부를 클릭한 다음 Button 컨트롤을 추가합니다.

  6. Button 컨트롤을 두 번 클릭하여 단추의 Click 이벤트에 대한 처리기를 추가합니다.

  7. 패널의 레이블 값을 현재 시간으로 설정하는 다음 코드를 Click 처리기에 추가합니다.

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    Label1.Text = "Refreshed at " & _
        DateTime.Now.ToString()
End Sub

    protected void Button1_Click(object sender, EventArgs e)
{
    Label1.Text = "Refreshed at " +
        DateTime.Now.ToString();
}

  8. 디자인 뷰로 전환하고 UpdatePanel을 선택한 다음 속성 창을 봅니다.

    참고:

    속성 창이 표시되지 않으면 F4를 누릅니다.

  9. 트리거 필드에서 줄임표(…) 단추를 두 번 클릭합니다.

    UpdatePanelTrigger 컬렉션 편집기 대화 상자가 표시됩니다.

  10. 추가를 클릭하여 새 트리거를 추가합니다.

  11. 트리거 속성의 ControlID 필드에서 드롭다운 목록을 사용하여 Button1을 선택합니다.

    이 예제에서는 트리거의 EventName 속성을 지정하지 않았습니다. 따라서 단추의 기본 이벤트(Click 이벤트)는 UpdatePanel 컨트롤의 새로 고침을 트리거합니다.

  12. 컬렉션 편집기에서 확인을 클릭합니다.

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

  14. 단추를 클릭합니다.

    패널의 텍스트가 변경되어 패널 내용을 새로 고친 시간을 표시합니다.

  15. 단추를 여러 번 클릭합니다.

    시간이 변경되지만 전체 페이지가 새로 고쳐지지는 않습니다.

    UpdatePanel 외부의 단추는 UpdatePanel 컨트롤의 트리거가 되도록 구성했으므로 이 단추를 클릭하면 패널의 내용이 새로 고쳐집니다. 트리거인 단추는 클릭하는 경우 비동기 포스트백을 수행하며 관련 업데이트 패널을 새로 고칩니다. 이 동작은 이 자습서의 첫 번째 예제에서 단추가 UpdatePanel 내부에 있던 경우의 동작과 비슷합니다.

    이 예제는 UpdatePanel이 나타내는 페이지 영역을 더 잘 보여 줄 수 있도록 꾸며져 있습니다.

    <%@ Page Language="VB" %>

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

<script >
    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        Label1.Text = "Refreshed at " & _
            DateTime.Now.ToString()
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Label ID="Label1"  Text="Panel created."></asp:Label><br />
                </fieldset>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button1" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:Button ID="Button1"  OnClick="Button1_Click" Text="Button" /></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">

<script >

    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = "Refreshed at " +
            DateTime.Now.ToString();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdatePanel Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 { 
      width:300px;
     }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <fieldset>
                <legend>UpdatePanel</legend>
                <asp:Label ID="Label1"  Text="Panel created."></asp:Label><br />
                </fieldset>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Button1" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:Button ID="Button1"  OnClick="Button1_Click" Text="Button" /></div>
    </form>
</body>
</html>

검토

이 자습서에서는 UpdatePanel 컨트롤을 사용하여 부분 페이지 업데이트를 사용하도록 설정하는 방법에 대한 기본 개념을 소개했습니다. 항상 ScriptManager 컨트롤을 추가한 다음 UpdatePanel 컨트롤을 추가해야 합니다. 기본적으로 패널 내부의 컨트롤에서 포스트백을 수행하면 패널이 새로 고쳐집니다. 외부 컨트롤은 패널의 트리거로 구성한 경우 UpdatePanel이 새로 고쳐지도록 만듭니다.

다음 단계에서는 페이지에 여러 개의 UpdatePanel 컨트롤을 추가하는 방법에 대해 알아 봅니다. 자세한 내용은 여러 UpdatePanel 컨트롤을 사용하여 단일 ASP.NET 페이지 만들기를 참조하십시오.

참고 항목

개념

부분 페이지 렌더링 개요

참조

UpdatePanel

ScriptManager