다음을 통해 공유


UpdatePanel 컨트롤 개요

업데이트: 2007년 11월

ASP.NET UpdatePanel 컨트롤을 사용하여 클라이언트 중심의 다양한 웹 응용 프로그램을 빌드할 수 있습니다. UpdatePanel 컨트롤을 사용하면 포스트백으로 전체 페이지를 새로 고치는 대신 선택한 페이지 부분만 새로 고칠 수 있습니다. 이를 부분 페이지 업데이트를 수행한다고 합니다. ScriptManager 컨트롤 및 하나 이상의 UpdatePanel 컨트롤이 포함되어 있는 ASP.NET 웹 페이지는 사용자 지정 클라이언트 스크립트 없이 자동으로 부분 페이지 업데이트에 참여할 수 있습니다.

이 항목에서는 다음에 대해 설명합니다.

  • 시나리오

  • 배경

  • 코드 예제

  • 클래스 참조

시나리오

UpdatePanel 컨트롤은 웹 페이지가 최종 사용자에게 더욱 대화식으로 보이도록 만드는 복잡한 클라이언트 동작을 포함하는 웹 페이지를 개발하는 데 도움이 되는 서버 컨트롤입니다. 웹 페이지의 지정한 부분만 업데이트하도록 서버 및 클라이언트 간을 조정하는 코드를 작성하려면 일반적으로 ECMAScript(JavaScript)에 대해 세밀히 알고 있어야 합니다. 그러나 UpdatePanel 컨트롤을 사용하면 클라이언트 스크립트를 작성하지 않고도 웹 페이지에서 부분 페이지 업데이트에 참여하도록 만들 수 있습니다. 원하는 경우 사용자 지정 클라이언트 스크립트를 추가하여 사용자 경험을 개선할 수도 있습니다. UpdatePanel 컨트롤을 사용하는 경우 페이지 동작이 브라우저에 종속되지 않으므로 클라이언트와 서버 간에 전송되는 데이터 양을 줄일 수 있습니다.

배경

UpdatePanel 컨트롤은 전체 페이지를 새로 고치지 않고도 업데이트할 수 있는 페이지 영역을 지정하면 작동합니다. 이 과정은 ScriptManager 서버 컨트롤과 클라이언트 PageRequestManager 클래스로 조정합니다. 부분 페이지 업데이트를 사용하는 경우 컨트롤에서 서버에 비동기적으로 게시할 수 있습니다. 비동기 포스트백은 결과 서버 페이지에서 전체 페이지 및 컨트롤 수명 주기를 실행하는 일반 포스트백처럼 동작합니다. 그러나 비동기 포스트백에서는 페이지 영역을 UpdatePanel 컨트롤에 포함하고 업데이트하도록 표시하여 해당 영역만으로 페이지 업데이트를 제한할 수 있습니다. 서버에서는 영향을 받은 요소의 HTML 태그만 브라우저로 전송합니다. 브라우저에서 클라이언트 PageRequestManager 클래스는 DOM(문서 개체 모델) 조작을 수행하여 기존 HTML을 업데이트된 태그로 바꿉니다.

참고:

비동기 포스트백 또는 XMLHTTPRequest 개체를 사용할 때 URL에 더블바이트 문자가 포함되어 있으면 포스트백 오류가 발생할 수 있습니다. 이 문제를 해결하려면 페이지의 head 요소에 <base href="url"/> 요소를 추가합니다. 여기서 href 특성은 페이지를 참조하는 URL 인코딩된 문자열로 설정됩니다. 서버 코드에 동적으로 추가된 이 요소를 추가할 수 있습니다.

다음 그림에서는 처음으로 로드한 페이지와 이후에 UpdatePanel 컨트롤의 내용을 새로 고치는 비동기 포스트백을 보여 줍니다.

부분 페이지 렌더링 개요

부분 페이지 업데이트 사용

UpdatePanel 컨트롤을 사용하려면 웹 페이지에 ScriptManager 컨트롤이 있어야 합니다. ScriptManager 컨트롤의 EnablePartialRendering 속성에 대한 기본값이 true이므로 부분 페이지 렌더링이 기본적으로 사용됩니다.

다음 예제에서는 페이지에서 ScriptManager 컨트롤 및 UpdatePanel 컨트롤을 정의하는 태그를 보여 줍니다. UpdatePanel 컨트롤에는 Button 컨트롤이 포함됩니다. 이 컨트롤을 클릭하면 패널 내의 내용이 새로 고쳐집니다. 기본적으로 ChildrenAsTriggers 속성은 true입니다. 따라서 Button 컨트롤은 비동기 포스트백 컨트롤로 작동됩니다.

<asp:ScriptManager ID="ScriptManager" 
                    />
<asp:UpdatePanel ID="UpdatePanel1" 
                 UpdateMode="Conditional"
                 >
    <ContentTemplate>
       <fieldset>
       <legend>UpdatePanel content</legend>
        <!-- Other content in the panel. -->
        <%=DateTime.Now.ToString() %>
        <br />
        <asp:Button ID="Button1" 
                    Text="Refresh Panel" 
                     />
        </fieldset>
    </ContentTemplate>
</asp:UpdatePanel>
<asp:ScriptManager ID="ScriptManager" 
                    />
<asp:UpdatePanel ID="UpdatePanel1" 
                 UpdateMode="Conditional"
                 >
    <ContentTemplate>
       <fieldset>
       <legend>UpdatePanel content</legend>
        <!-- Other content in the panel. -->
        <%=DateTime.Now.ToString() %>
        <br />
        <asp:Button ID="Button1" 
                    Text="Refresh Panel" 
                     />
        </fieldset>
    </ContentTemplate>
</asp:UpdatePanel>

UpdatePanel 컨트롤 내용 지정

UpdatePanel 컨트롤에 내용을 선언적으로 추가하거나 디자이너에서 ContentTemplate 속성을 사용하여 추가합니다. 태그에서 이 속성은 ContentTemplate 요소로 노출됩니다. 내용을 프로그래밍 방식으로 추가하려면 ContentTemplateContainer 속성을 사용합니다.

UpdatePanel 컨트롤을 하나 이상 포함하는 페이지를 처음으로 렌더링하면 UpdatePanel 컨트롤의 모든 내용이 렌더링되어 브라우저에 전송됩니다. 이후의 비동기 포스트백에서는 개별 UpdatePanel 컨트롤의 내용이 업데이트될 수 있습니다. 패널 설정, 포스트백을 발생시킨 요소 및 각 패널과 관련된 코드에 따라 업데이트가 다르게 수행될 수 있습니다.

UpdatePanel 트리거 지정

기본적으로 UpdatePanel 컨트롤 내부의 포스트백 컨트롤이 비동기 포스트백을 발생시키고 패널의 내용을 새로 고칩니다. 그러나 페이지의 다른 컨트롤이 UpdatePanel 컨트롤을 새로 고치도록 구성할 수도 있습니다. 이렇게 하려면 UpdatePanel 컨트롤의 트리거를 정의합니다. 트리거는 패널이 업데이트되도록 하는 포스트백 컨트롤 및 이벤트를 지정하는 바인딩입니다. 트리거 컨트롤의 지정한 이벤트가 발생하면(예: 단추의 Click 이벤트) 업데이트 패널이 새로 고쳐집니다.

다음 예제에서는 UpdatePanel 컨트롤에 대한 트리거를 지정하는 방법을 보여 줍니다.

<asp:Button ID="Button1" 
            Text="Refresh Panel"
             />
<asp:ScriptManager ID="ScriptManager1" 
                    />
<asp:UpdatePanel ID="UpdatePanel1" 
                 UpdateMode="Conditional"
                 >
                 <Triggers>
                   <asp:AsyncPostBackTrigger ControlID="Button1" />
                 </Triggers>
                 <ContentTemplate>
                 <fieldset>
                 <legend>UpdatePanel content</legend>
                 <%=DateTime.Now.ToString() %>
                 </fieldset>
                 </ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="Button1" 
            Text="Refresh Panel"
             />
<asp:ScriptManager ID="ScriptManager1" 
                    />
<asp:UpdatePanel ID="UpdatePanel1" 
                 UpdateMode="Conditional"
                 >
                 <Triggers>
                   <asp:AsyncPostBackTrigger ControlID="Button1" />
                 </Triggers>
                 <ContentTemplate>
                 <fieldset>
                 <legend>UpdatePanel content</legend>
                 <%=DateTime.Now.ToString() %>
                 </fieldset>
                 </ContentTemplate>
</asp:UpdatePanel>

트리거는 UpdatePanel 컨트롤의 Triggers 요소 내의 asp:AsyncPostBackTrigger 요소를 사용하여 정의합니다. Visual Studio에서 페이지를 편집하는 경우에는 UpdatePanelTrigger 컬렉션 편집기 대화 상자를 사용하여 트리거를 만들 수 있습니다.

트리거의 컨트롤 이벤트는 선택 사항입니다. 이벤트를 지정하지 않는 경우 트리거 이벤트가 컨트롤의 기본 이벤트가 됩니다. 예를 들어 Button 컨트롤의 기본 이벤트는 Click 이벤트입니다.

UpdatePanel 컨트롤이 새로 고쳐지는 방법

다음 목록에서는 부분 페이지 렌더링 동안 패널의 내용이 업데이트되는 때를 지정하는 UpdatePanel 컨트롤의 속성 설정에 대해 설명합니다.

  • UpdateMode 속성을 Always로 설정하면 페이지의 모든 위치에서 포스트백이 발생할 때마다 UpdatePanel 컨트롤의 내용이 업데이트됩니다. 여기에는 다른 UpdatePanel 컨트롤 안에 있는 컨트롤에서 발생한 비동기 포스트백 및 UpdatePanel 컨트롤 안에 있지 않은 컨트롤에서 발생한 포스트백이 포함됩니다.

  • UpdateMode 속성을 Conditional로 설정하는 경우에는 다음 중 하나에 해당하는 경우에 UpdatePanel 컨트롤의 내용이 업데이트됩니다.

    • 포스트백이 해당 UpdatePanel 컨트롤에 대한 트리거로 발생하는 경우

    • Update 컨트롤의 UpdatePanel 메서드를 명시적으로 호출하는 경우

    • UpdatePanel 컨트롤이 다른 UpdatePanel 컨트롤 안에 중첩되어 있으며 부모 패널이 업데이트된 경우

    • ChildrenAsTriggers 속성이 true로 설정되어 있으며 UpdatePanel 컨트롤의 자식 컨트롤이 포스트백을 발생시킨 경우. 중첩된 UpdatePanel 컨트롤의 자식 컨트롤은 부모 패널의 트리거로 명시적으로 정의되지 않는 한 외부 UpdatePanel 컨트롤에 대한 업데이트를 발생시키지 않습니다.

ChildrenAsTriggers 속성을 false로 설정하고 UpdateMode 속성을 Always로 설정하면 예외가 throw됩니다. ChildrenAsTriggers 속성은 UpdateMode 속성을 Conditional로 설정하는 경우에만 사용할 수 있습니다.

마스터 페이지에서 UpdatePanel 컨트롤 사용

마스터 페이지에서 UpdatePanel 컨트롤을 사용하려면 ScriptManager 컨트롤을 포함하는 방법을 결정해야 합니다. ScriptManager 컨트롤을 마스터 페이지에 포함하면 이 컨트롤은 모든 콘텐츠 페이지에 대한 ScriptManager 컨트롤로 사용될 수 있습니다. 콘텐츠 페이지에서 스크립트나 서비스를 선언적으로 등록하려는 경우에는 ScriptManagerProxy 컨트롤을 해당 콘텐츠 페이지에 추가할 수 있습니다.

마스터 페이지에 ScriptManager 컨트롤이 포함되어 있지 않으면 UpdatePanel 컨트롤이 포함되어 있는 각 콘텐츠 페이지에 ScriptManager 컨트롤을 개별적으로 추가할 수 있습니다. 응용 프로그램에서 클라이언트 스크립트를 관리하려는 방법에 따라 디자인 선택이 달라질 수 있습니다. 클라이언트 스크립트를 관리하는 방법에 대한 자세한 내용은 ScriptManager 컨트롤 개요를 참조하십시오. 마스터 페이지에 대한 자세한 내용은 ASP.NET 마스터 페이지 개요를 참조하십시오.

ScriptManager 컨트롤이 마스터 페이지에 있고 콘텐츠 페이지에 대해 부분 페이지 렌더링을 사용할 필요가 없는 경우도 있고, 해당 콘텐츠 페이지에 대해 프로그래밍 방식으로 ScriptManager 컨트롤의 EnablePartialRendering 속성을 false로 설정해야 하는 경우도 있습니다.

다음 예제에서는 마스터 페이지의 ScriptManager 컨트롤 및 콘텐츠 페이지의 UpdatePanel 컨트롤에 대한 태그를 보여 줍니다. 이 예제에서는 LastUpdate라는 속성이 마스터 페이지에 정의되어 있고 UpdatePanel 컨트롤 내부에서 참조됩니다.

<%@ Master Language="VB" %>
<!DOCTYPE html PUBLIC "-'W3C'DTD XHTML 1.0 Transitional'EN"
 "http:'www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script >

    Public Property LastUpdate() As DateTime
        Get
            If ViewState("LastUpdate") Is Nothing Then
                Return DateTime.Now
            Else : Return ViewState("LastUpdate")
            End If
        End Get
        Set(ByVal value As DateTime)
            ViewState("LastUpdate") = value
        End Set
    End Property

    Protected Sub MasterButton2_Click(ByVal Sender As Object, ByVal E As EventArgs)
        LastUpdate = DateTime.Now
        Dim up1 As UpdatePanel
        up1 = ContentPlaceHolder1.FindControl("UpdatePanel1")
        up1.Update()

    End Sub
    
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
        ScriptManager1.RegisterAsyncPostBackControl(Button2)
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
    <title>ScriptManager in Master Page Example</title>
</head>
<body>
    <form id="form1" >
        <div>
            <asp:ScriptManager ID="ScriptManager1"  />
            <asp:Panel ID="MasterPanel1"  GroupingText="Master Page">
               <asp:Button ID="Button1"  Text="Full Page Refresh" />
               <asp:Button ID="Button2"  Text="Refresh Panel" OnClick="MasterButton2_Click" />
            </asp:Panel>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" >
            </asp:ContentPlaceHolder>
        </div>
    </form>
</body>
</html>
<%@ Master Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script >

    public DateTime LastUpdate
    {
        get
        {
            return (DateTime)(ViewState["LastUpdate"] ?? DateTime.Now);
        }
        set
        {
            ViewState["LastUpdate"] = value;
        }
    }


    protected void MasterButton2_Click(object sender, EventArgs e)
    {
        LastUpdate = DateTime.Now;
        ((UpdatePanel)ContentPlaceHolder1.FindControl("UpdatePanel1")).Update();

    }

    protected void Page_Load(object sender, EventArgs e)
    {
        ScriptManager1.RegisterAsyncPostBackControl(Button2);
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
    <title>ScriptManager in Master Page Example</title>
</head>
<body>
    <form id="form1" >
        <div>
            <asp:ScriptManager ID="ScriptManager1"  />
            <asp:Panel ID="MasterPanel1"  GroupingText="Master Page">
               <asp:Button ID="Button1"  Text="Full Page Refresh" />
               <asp:Button ID="Button2"  Text="Refresh Panel" OnClick="MasterButton2_Click" />
            </asp:Panel>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" >
            </asp:ContentPlaceHolder>
        </div>
    </form>
</body>
</html>
<%@ Page Language="VB" MasterPageFile="MasterVB.master"
    Title="ScriptManager in Content Page" %>

<%@ MasterType VirtualPath="MasterVB.master" %>

<script >

    Protected Sub Button3_Click(ByVal Sender As Object, ByVal E As EventArgs)
       Master.LastUpdate = DateTime.Now
    End Sub

</script>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1"
    runat="Server">
    </asp:ScriptManagerProxy>
    <asp:Panel ID="Panel2"
               GroupingText="ContentPage"
                >
        <asp:UpdatePanel ID="UpdatePanel1" 
                         UpdateMode="Conditional" 
                         >
            <ContentTemplate>
                <p>
                    Last updated: <strong>
                        <%= Master.LastUpdate.ToString() %>
                    </strong>
                </p>
                <asp:Button ID="Button3"
                            Text="Refresh Panel"
                            OnClick="Button3_Click"
                              />
            </ContentTemplate>
        </asp:UpdatePanel>
    </asp:Panel>
</asp:Content>
<%@ Page Language="C#" MasterPageFile="MasterCS.master"
    Title="ScriptManager in Content Page" %>

<%@ MasterType VirtualPath="MasterCS.master" %>

<script >

    protected void Button3_Click(object sender, EventArgs e)
    {
        Master.LastUpdate = DateTime.Now;
    }

</script>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1"
    runat="Server">
    <asp:Panel ID="Panel2"
               GroupingText="ContentPage"
                >
        <asp:UpdatePanel ID="UpdatePanel1" 
                         UpdateMode="Conditional" 
                         >
            <ContentTemplate>
                <p>
                    Last updated: <strong>
                        <%= Master.LastUpdate.ToString() %>
                    </strong>
                </p>
                <asp:Button ID="Button3"
                            Text="Refresh Panel"
                            OnClick="Button3_Click"
                              />
            </ContentTemplate>
        </asp:UpdatePanel>
    </asp:Panel>
</asp:Content>

중첩된 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 >
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
    <title>UpdatePanelUpdateMode Example</title>
    <style type="text/css">
    div.NestedPanel
    {
      position: relative;
      margin: 2% 5% 2% 5%;
    }
    </style>
</head>
<body>
    <form id="form1" >
        <div>
            <asp:ScriptManager ID="ScriptManager" 
                                />
            <asp:UpdatePanel ID="OuterPanel" 
                             UpdateMode="Conditional" 
                             >
                <ContentTemplate>
                    <div>
                        <fieldset>
                            <legend>Outer Panel </legend>
                            <br />
                            <asp:Button ID="OPButton1" 
                                        Text="Outer Panel Button" 
                                         />
                            <br />
                            Last updated on
                            <%= DateTime.Now.ToString() %>
                            <br />
                            <br />
                            <asp:UpdatePanel ID="NestedPanel1" 
                                               UpdateMode="Conditional"
                                               >
                                <ContentTemplate>
                                    <div class="NestedPanel">
                                        <fieldset>
                                            <legend>Nested Panel 1</legend>
                                            <br />
                                            Last updated on
                                            <%= DateTime.Now.ToString() %>
                                            <br />
                                            <asp:Button ID="NPButton1"
                                                        Text="Nested Panel 1 Button" 
                                                         />
                                        </fieldset>
                                    </div>
                                </ContentTemplate>
                            </asp:UpdatePanel>
                        </fieldset>
                    </div>
                </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 >
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
    <title>UpdatePanelUpdateMode Example</title>
    <style type="text/css">
    div.NestedPanel
    {
      position: relative;
      margin: 2% 5% 2% 5%;
    }
    </style>
</head>
<body>
    <form id="form1" >
        <div>
            <asp:ScriptManager ID="ScriptManager" 
                                />
            <asp:UpdatePanel ID="OuterPanel" 
                             UpdateMode="Conditional" 
                             >
                <ContentTemplate>
                    <div>
                        <fieldset>
                            <legend>Outer Panel </legend>
                            <br />
                            <asp:Button ID="OPButton1" 
                                        Text="Outer Panel Button" 
                                         />
                            <br />
                            Last updated on
                            <%= DateTime.Now.ToString() %>
                            <br />
                            <br />
                            <asp:UpdatePanel ID="NestedPanel1" 
                                               UpdateMode="Conditional"
                                               >
                                <ContentTemplate>
                                    <div class="NestedPanel">
                                        <fieldset>
                                            <legend>Nested Panel 1</legend>
                                            <br />
                                            Last updated on
                                            <%= DateTime.Now.ToString() %>
                                            <br />
                                            <asp:Button ID="NPButton1"
                                                        Text="Nested Panel 1 Button" 
                                                         />
                                        </fieldset>
                                    </div>
                                </ContentTemplate>
                            </asp:UpdatePanel>
                        </fieldset>
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </form>
</body>
</html>

다음 예제에서는 GridView 컨트롤이 있는 중첩된 UpdatePanel 컨트롤을 보여 줍니다. GridView 컨트롤이 UpdatePanel 컨트롤 내부에 있고 각 GridView 행에 다른 UpdatePanel 컨트롤 내부에 있는 중첩된 GridView 컨트롤이 포함되어 있습니다.

<%@ 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 >
    <title>Browse Departments</title>
    <script >
        Protected Sub DepartmentsGridView_RowDataBound(sender As object, e As GridViewRowEventArgs)
            If e.Row.RowType = DataControlRowType.DataRow Then
                Dim s As SqlDataSource = CType(e.Row.FindControl("EmployeesDataSource"), SqlDataSource)
                Dim r As System.Data.DataRowView = CType(e.Row.DataItem, System.Data.DataRowView)
                s.SelectParameters("DepartmentID").DefaultValue = r("DepartmentID").ToString()
            End If
        End Sub
    </script>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager  ID="ScriptManager1" EnablePartialRendering="true" />
        <asp:UpdatePanel ID="UpdatePanel2"  UpdateMode="Conditional">
            <ContentTemplate>
        <asp:GridView ID="DepartmentsGridView"  AllowPaging="True" AllowSorting="True"
            AutoGenerateColumns="False" CellPadding="4" DataSourceID="DepartmentDataSource"
            ForeColor="#333333" GridLines="None" PageSize="3" OnRowDataBound="DepartmentsGridView_RowDataBound">
            <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <Columns>
                <asp:BoundField DataField="GroupName" HeaderText="Division" SortExpression="GroupName" >
                    <ItemStyle Width="200px" />
                </asp:BoundField>
                <asp:BoundField DataField="Name" HeaderText="Department Name" SortExpression="Name" >
                    <ItemStyle Width="160px" />
                </asp:BoundField>
                <asp:TemplateField HeaderText="Employees">
                    <ItemTemplate>
                        <asp:UpdatePanel ID="UpdatePanel1"  UpdateMode="Conditional">
                            <ContentTemplate>
                                <asp:GridView ID="EmployeesGridView"  AllowPaging="True" AllowSorting="True"
                                    AutoGenerateColumns="False" BackColor="White" BorderColor="#999999" BorderStyle="None"
                                    BorderWidth="1px" CellPadding="3" DataSourceID="EmployeesDataSource" GridLines="Vertical"
                                    PageSize="4">
                                    <FooterStyle BackColor="#CCCCCC" ForeColor="Black" />
                                    <Columns>
                                        <asp:BoundField DataField="FirstName" HeaderText="First Name" SortExpression="FirstName" >
                                            <ItemStyle Width="80px" />
                                        </asp:BoundField>
                                        <asp:BoundField DataField="LastName" HeaderText="Last Name" SortExpression="LastName" >
                                            <ItemStyle Width="160px" />
                                        </asp:BoundField>
                                    </Columns>
                                    <RowStyle BackColor="#EEEEEE" ForeColor="Black" />
                                    <SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" />
                                    <PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
                                    <HeaderStyle BackColor="#000084" Font-Bold="True" ForeColor="White" />
                                    <AlternatingRowStyle BackColor="Gainsboro" />
                                </asp:GridView>
                                <asp:Label  ID="InnerTimeLabel"><%=DateTime.Now %></asp:Label>
                                <asp:SqlDataSource ID="EmployeesDataSource"  ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
                                    SelectCommand="SELECT HumanResources.EmployeeDepartmentHistory.DepartmentID, 
                                                          HumanResources.vEmployee.EmployeeID, 
                                                          HumanResources.vEmployee.FirstName, 
                                                          HumanResources.vEmployee.LastName 
                                                   FROM HumanResources.EmployeeDepartmentHistory
                                                   INNER JOIN HumanResources.vEmployee 
                                                     ON HumanResources.EmployeeDepartmentHistory.EmployeeID = HumanResources.vEmployee.EmployeeID
                                                   WHERE HumanResources.EmployeeDepartmentHistory.DepartmentID = @DepartmentID
                                                   ORDER BY HumanResources.vEmployee.LastName ASC, HumanResources.vEmployee.FirstName ASC">
                                    <SelectParameters>
                                      <asp:Parameter Name="DepartmentID" DefaultValue="0" Type="int32" />
                                    </SelectParameters>
                                </asp:SqlDataSource>
                            </ContentTemplate>
                        </asp:UpdatePanel>
                    </ItemTemplate>
                    <ItemStyle Height="170px" Width="260px" />
                </asp:TemplateField>
            </Columns>
            <RowStyle BackColor="#F7F6F3" ForeColor="#333333" VerticalAlign="Top" />
            <EditRowStyle BackColor="#999999" />
            <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
            <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
            <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" HorizontalAlign="Left" />
            <AlternatingRowStyle BackColor="White" ForeColor="#284775" VerticalAlign="Top" />
        </asp:GridView>
        <asp:Label  ID="OuterTimeLabel"><%=DateTime.Now %></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
        &nbsp;
        <asp:SqlDataSource ID="DepartmentDataSource"  ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
            SelectCommand="SELECT DepartmentID, Name, GroupName FROM HumanResources.Department ORDER BY Name">
        </asp:SqlDataSource>

    </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 >
    <title>Browse Departments</title>
    <script >
        protected void DepartmentsGridView_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                SqlDataSource s = (SqlDataSource)e.Row.FindControl("EmployeesDataSource");
                System.Data.DataRowView r = (System.Data.DataRowView)e.Row.DataItem;
                s.SelectParameters["DepartmentID"].DefaultValue = r["DepartmentID"].ToString();
            }
        }
    </script>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager  ID="ScriptManager1" EnablePartialRendering="true" />
        <asp:UpdatePanel ID="UpdatePanel2"  UpdateMode="Conditional">
            <ContentTemplate>
        <asp:GridView ID="DepartmentsGridView"  AllowPaging="True" AllowSorting="True"
            AutoGenerateColumns="False" CellPadding="4" DataSourceID="DepartmentDataSource"
            ForeColor="#333333" GridLines="None" PageSize="3" OnRowDataBound="DepartmentsGridView_RowDataBound">
            <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <Columns>
                <asp:BoundField DataField="GroupName" HeaderText="Division" SortExpression="GroupName" >
                    <ItemStyle Width="200px" />
                </asp:BoundField>
                <asp:BoundField DataField="Name" HeaderText="Department Name" SortExpression="Name" >
                    <ItemStyle Width="160px" />
                </asp:BoundField>
                <asp:TemplateField HeaderText="Employees">
                    <ItemTemplate>
                        <asp:UpdatePanel ID="UpdatePanel1"  UpdateMode="Conditional">
                            <ContentTemplate>
                                <asp:GridView ID="EmployeesGridView"  AllowPaging="True" AllowSorting="True"
                                    AutoGenerateColumns="False" BackColor="White" BorderColor="#999999" BorderStyle="None"
                                    BorderWidth="1px" CellPadding="3" DataSourceID="EmployeesDataSource" GridLines="Vertical"
                                    PageSize="4">
                                    <FooterStyle BackColor="#CCCCCC" ForeColor="Black" />
                                    <Columns>
                                        <asp:BoundField DataField="FirstName" HeaderText="First Name" SortExpression="FirstName" >
                                            <ItemStyle Width="80px" />
                                        </asp:BoundField>
                                        <asp:BoundField DataField="LastName" HeaderText="Last Name" SortExpression="LastName" >
                                            <ItemStyle Width="160px" />
                                        </asp:BoundField>
                                    </Columns>
                                    <RowStyle BackColor="#EEEEEE" ForeColor="Black" />
                                    <SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" />
                                    <PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
                                    <HeaderStyle BackColor="#000084" Font-Bold="True" ForeColor="White" />
                                    <AlternatingRowStyle BackColor="Gainsboro" />
                                </asp:GridView>
                                <asp:Label  ID="InnerTimeLabel"><%=DateTime.Now %></asp:Label>
                                <asp:SqlDataSource ID="EmployeesDataSource"  ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
                                    SelectCommand="SELECT HumanResources.EmployeeDepartmentHistory.DepartmentID, 
                                                          HumanResources.vEmployee.EmployeeID, 
                                                          HumanResources.vEmployee.FirstName, 
                                                          HumanResources.vEmployee.LastName 
                                                   FROM HumanResources.EmployeeDepartmentHistory
                                                   INNER JOIN HumanResources.vEmployee 
                                                     ON HumanResources.EmployeeDepartmentHistory.EmployeeID = HumanResources.vEmployee.EmployeeID
                                                   WHERE HumanResources.EmployeeDepartmentHistory.DepartmentID = @DepartmentID
                                                   ORDER BY HumanResources.vEmployee.LastName ASC, HumanResources.vEmployee.FirstName ASC">
                                    <SelectParameters>
                                      <asp:Parameter Name="DepartmentID" DefaultValue="0" Type="int32" />
                                    </SelectParameters>
                                </asp:SqlDataSource>
                            </ContentTemplate>
                        </asp:UpdatePanel>
                    </ItemTemplate>
                    <ItemStyle Height="170px" Width="260px" />
                </asp:TemplateField>
            </Columns>
            <RowStyle BackColor="#F7F6F3" ForeColor="#333333" VerticalAlign="Top" />
            <EditRowStyle BackColor="#999999" />
            <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
            <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
            <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" HorizontalAlign="Left" />
            <AlternatingRowStyle BackColor="White" ForeColor="#284775" VerticalAlign="Top" />
        </asp:GridView>
        <asp:Label  ID="OuterTimeLabel"><%=DateTime.Now %></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
        &nbsp;
        <asp:SqlDataSource ID="DepartmentDataSource"  ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
            SelectCommand="SELECT DepartmentID, Name, GroupName FROM HumanResources.Department ORDER BY Name">
        </asp:SqlDataSource>

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

내부 GridView 컨트롤에서 새 레코드 페이지를 표시하는 경우에는 외부 패널 및 외부 GridView 컨트롤의 다른 행에 있는 패널이 새로 고쳐지지 않습니다. 외부 GridView 컨트롤에서 새 레코드 페이지를 표시하는 경우에는 외부 패널과 중첩된 패널이 모두 새로 고쳐집니다.

프로그래밍 방식으로 UpdatePanel 새로 고침

다음 예제에서는 UpdatePanel 컨트롤을 프로그래밍 방식으로 새로 고치는 방법을 보여 줍니다. 이 예제에서는 RegisterAsyncPostBackControl 메서드를 호출하여 페이지에서 컨트롤을 트리거로 등록합니다. 이 코드에서는 Update 메서드를 호출하여 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 Property AnsweredQuestions As SortedList
        Get
            If ViewState("AnsweredQuestions") IsNot Nothing Then
                Return CType(ViewState("AnsweredQuestions"), SortedList)
            Else 
                Return New SortedList()
            End If
        End Get
        Set
          ViewState("AnsweredQuestions") = value
        End Set
    End Property

    Protected Sub Page_Load()
        ScriptManager1.RegisterAsyncPostBackControl(SurveyDataList)
    End Sub

    Protected Sub ChoicesRadioButtonList_SelectedIndexChanged(sender As Object, e As EventArgs)
        Dim answers As SortedList = Me.AnsweredQuestions
        Dim r As RadioButtonList = CType(sender, RadioButtonList)
        answers(r.ToolTip) = r.SelectedValue
        Me.AnsweredQuestions = answers

        ResultsList.DataSource = Me.AnsweredQuestions
        ResultsList.DataBind()

        If Me.AnsweredQuestions.Count = SurveyDataList.Items.Count Then _
            SubmitButton.Visible = True

        UpdatePanel1.Update()
    End Sub

    Protected Sub SubmitButton_Click(sender As Object, e As EventArgs)
        ' Submit responses.
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
    <title>Registering Controls as Async Postback Controls</title>
    <style type="text/css">
    .AnswerFloatPanelStyle {
    background-color: bisque;
    position: absolute;
    right: 10px;
    height: 130px;
    width: 150px;
    border-right: silver thin solid; border-top: silver thin solid; 
    border-left: silver thin solid; border-bottom: silver thin solid;    
    }
    </style>
</head>
<body>
    <form id="form1" >
        <div>
            <asp:ScriptManager ID="ScriptManager1"  />
            <div id="AnswerFloatPanel" class="AnswerFloatPanelStyle" >
                <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
                    <ContentTemplate>
                        Completed Questions:
                        <asp:DataList ID="ResultsList" >
                            <ItemTemplate>
                                <asp:Label ID="ResultQuestion"  Text='<%# Eval("Key") %>' />
                                ::
                                <asp:Label ID="ResultAnswer"  Text='<%# Eval("Value") %>' />
                            </ItemTemplate>
                        </asp:DataList>
                        <p style="text-align: right">
                            <asp:Button ID="SubmitButton" Text="Submit"  Visible="false"
                                OnClick="SubmitButton_Click" />
                        </p>
                        <asp:Label ID="Message" runat="Server" />
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>

            <asp:XmlDataSource ID="SurveyDataSource" 
                                
                               XPath="/Questions/Question"
                               DataFile="~/App_Data/SurveyQuestions.xml"/>
            <asp:DataList
                ID="SurveyDataList"
                DataSourceID="SurveyDataSource"
                >

                <ItemTemplate>
                  <table cellpadding="2" cellspacing="2">
                    <tr>
                      <td valign="top">
                        <asp:Label id="QuestionLabel" Text='<%# XPath("@Title")%>'  />
                      </td>
                    </tr>
                    <tr><td>
                      <asp:RadioButtonList ID="ChoicesRadioButtonList"  
                        DataSource='<%#XPathSelect("Choices/Choice") %>'
                        DataTextField="InnerText" DataValueField="InnerText" 
                        AutoPostBack="True"
                        ToolTip='<%# "Question" + XPath("@ID") %>'
                        OnSelectedIndexChanged="ChoicesRadioButtonList_SelectedIndexChanged"/>
                    </td></tr>
                  </table>
                  <hr />
                </ItemTemplate>
            </asp:DataList>
        </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 SortedList AnsweredQuestions
    {
        get { return (SortedList)(ViewState["AnsweredQuestions"] ?? new SortedList()); }
        set { ViewState["AnsweredQuestions"] = value; }
    }

    protected void Page_Load()
    {
        ScriptManager1.RegisterAsyncPostBackControl(SurveyDataList);
    }

    protected void ChoicesRadioButtonList_SelectedIndexChanged(object sender, EventArgs e)
    {
        SortedList answers = this.AnsweredQuestions;
        RadioButtonList r = (RadioButtonList)sender;
        answers[r.ToolTip] = r.SelectedValue;
        this.AnsweredQuestions = answers;

        ResultsList.DataSource = this.AnsweredQuestions;
        ResultsList.DataBind();

        if (this.AnsweredQuestions.Count == SurveyDataList.Items.Count)
            SubmitButton.Visible = true;

        UpdatePanel1.Update();
    }

    protected void SubmitButton_Click(object sender, EventArgs e)
    {
        // Submit responses.
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
    <title>Registering Controls as Async Postback Controls</title>
    <style type="text/css">
    .AnswerFloatPanelStyle {
    background-color: bisque;
    position: absolute;
    right: 10px;
    height: 130px;
    width: 150px;
    border-right: silver thin solid; border-top: silver thin solid; 
    border-left: silver thin solid; border-bottom: silver thin solid;    
    }
    </style>
</head>
<body>
    <form id="form1" >
        <div>
            <asp:ScriptManager ID="ScriptManager1"  />
            <div id="AnswerFloatPanel" class="AnswerFloatPanelStyle" >
                <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
                    <ContentTemplate>
                        Completed Questions:
                        <asp:DataList ID="ResultsList" >
                            <ItemTemplate>
                                <asp:Label ID="ResultQuestion"  Text='<%# Eval("Key") %>' />
                                ::
                                <asp:Label ID="ResultAnswer"  Text='<%# Eval("Value") %>' />
                            </ItemTemplate>
                        </asp:DataList>
                        <p style="text-align: right">
                            <asp:Button ID="SubmitButton" Text="Submit"  Visible="false"
                                OnClick="SubmitButton_Click" />
                        </p>
                        <asp:Label ID="Message" runat="Server" />
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>

            <asp:XmlDataSource ID="SurveyDataSource" 
                                
                               XPath="/Questions/Question"
                               DataFile="~/App_Data/SurveyQuestions.xml"/>
            <asp:DataList
                ID="SurveyDataList"
                DataSourceID="SurveyDataSource"
                >

                <ItemTemplate>
                  <table cellpadding="2" cellspacing="2">
                    <tr>
                      <td valign="top">
                        <asp:Label id="QuestionLabel" Text='<%# XPath("@Title")%>'  />
                      </td>
                    </tr>
                    <tr><td>
                      <asp:RadioButtonList ID="ChoicesRadioButtonList"  
                        DataSource='<%#XPathSelect("Choices/Choice") %>'
                        DataTextField="InnerText" DataValueField="InnerText" 
                        AutoPostBack="True"
                        ToolTip='<%# "Question" + XPath("@ID") %>'
                        OnSelectedIndexChanged="ChoicesRadioButtonList_SelectedIndexChanged"/>
                    </td></tr>
                  </table>
                  <hr />
                </ItemTemplate>
            </asp:DataList>
        </div>
    </form>
</body>
</html>

프로그래밍 방식으로 UpdatePanel 컨트롤 만들기

페이지에 UpdatePanel 컨트롤에 프로그래밍 방식으로 추가하려면 UpdatePanel 컨트롤의 새 인스턴스를 만듭니다. 그런 다음 ContentTemplateContainer 속성과 ControlCollection.Add 메서드를 사용하여 이 인스턴스에 컨트롤을 추가합니다. 컨트롤을 ContentTemplate 속성에 직접 추가하지 마십시오.

UpdatePanel 컨트롤을 프로그래밍 방식으로 추가하는 경우에는 UpdatePanel 컨트롤과 동일한 명명 컨테이너에 있는 컨트롤에서 발생하는 포스트백만 패널의 트리거로 사용될 수 있습니다.

다음 예제에서는 UpdatePanel 컨트롤을 페이지에 프로그래밍 방식으로 추가하는 방법을 보여 줍니다. 이 예제에서는 ContentTemplateContainer 속성을 사용하여 LabelButton 컨트롤을 패널에 추가합니다. ChildrenAsTriggers 속성이 기본적으로 true이므로 Button 컨트롤은 패널의 트리거로 작동합니다.

<%@ 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 Page_Load(ByVal Sender As Object, ByVal E As EventArgs)
        Dim up1 As UpdatePanel
        up1 = New UpdatePanel()
        up1.ID = "UpdatePanel1"
        up1.UpdateMode = UpdatePanelUpdateMode.Conditional
        Dim button1 As Button
        button1 = New Button()
        button1.ID = "Button1"
        button1.Text = "Submit"
        AddHandler button1.Click, AddressOf Button_Click
        Dim label1 As Label
        label1 = New Label()
        label1.ID = "Label1"
        label1.Text = "A full page postback occurred."
        up1.ContentTemplateContainer.Controls.Add(button1)
        up1.ContentTemplateContainer.Controls.Add(label1)
        Page.Form.Controls.Add(up1)

    End Sub
    Protected Sub Button_Click(ByVal Sender As Object, ByVal E As EventArgs)
        Dim lbl As Label
        lbl = Page.FindControl("Label1")
        lbl.Text = "Panel refreshed at " & _
            DateTime.Now.ToString()
    End Sub

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
    <title>UpdatePanel Added Programmatically Example</title>
</head>
<body>
    <form id="form1" >
        <div>
            <asp:ScriptManager ID="TheScriptManager"
                                />
        </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 Page_Load(object sender, EventArgs e)
    {
        UpdatePanel up1 = new UpdatePanel();
        up1.ID = "UpdatePanel1";
        up1.UpdateMode = UpdatePanelUpdateMode.Conditional;
        Button button1 = new Button();
        button1.ID = "Button1";
        button1.Text = "Submit";
        button1.Click += new EventHandler(Button_Click);
        Label label1 = new Label();
        label1.ID = "Label1";
        label1.Text = "A full page postback occurred.";
        up1.ContentTemplateContainer.Controls.Add(button1);
        up1.ContentTemplateContainer.Controls.Add(label1);
        Page.Form.Controls.Add(up1);

    }
    protected void Button_Click(object sender, EventArgs e)
    {
        ((Label)Page.FindControl("Label1")).Text = "Panel refreshed at " +
            DateTime.Now.ToString();
    }

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
    <title>UpdatePanel Added Programmatically Example</title>
</head>
<body>
    <form id="form1" >
        <div>
            <asp:ScriptManager ID="TheScriptManager"
                                />
        </div>
    </form>
</body>
</html>

UpdatePanel 컨트롤과 호환되지 않는 컨트롤

다음과 같은 ASP.NET 컨트롤은 부분 페이지 업데이트와 호환되지 않으므로 UpdatePanel 컨트롤 내부에서 사용할 수 없습니다.

  • 여러 조건하의 TreeView 컨트롤. 이러한 조건으로는 비동기 포스트백의 일부가 아닌 콜백을 사용하는 경우, 컨트롤의 스타일을 CSS 스타일에 대한 참조를 사용하여 암시적으로 설정하지 않고 직접 컨트롤 속성으로 설정하는 경우, EnableClientScript 속성이 false(기본값은 true)인 경우, 비동기 포스트백 사이에 EnableClientScript 속성을 변경하는 경우 등을 들 수 있습니다. 자세한 내용은 TreeView 웹 서버 컨트롤 개요를 참조하십시오.

  • 컨트롤의 스타일을 CSS 스타일에 대한 참조를 사용하여 암시적으로 설정하지 않고 직접 컨트롤 속성으로 설정하는 경우의 Menu컨트롤. 자세한 내용은 Menu 컨트롤 개요를 참조하십시오.

  • 비동기 포스트백의 일부로 파일을 업로드하는 데 사용할 경우의 FileUploadHtmlInputFile 컨트롤

  • 해당 EnableSortingAndPagingCallbacks 속성이 true로 설정된 GridViewDetailsView 컨트롤. 기본값은 false입니다.

  • 해당 내용이 편집 가능한 템플릿으로 변환된 Login, PasswordRecovery, ChangePasswordCreateUserWizard 컨트롤

  • Substitution 컨트롤

UpdatePanel 컨트롤 내부에서 FileUpload 또는 HtmlInputFile 컨트롤을 사용하려면 패널의 PostBackTrigger 컨트롤이 될 파일을 제출하는 포스트백 컨트롤을 설정합니다. FileUploadHtmlInputFile 컨트롤은 포스트백 시나리오에서만 사용할 수 있습니다.

다른 모든 컨트롤은 UpdatePanel 컨트롤 내부에서 작동합니다. 그러나 경우에 따라 컨트롤이 UpdatePanel 컨트롤 내부에서 제대로 작동하지 않을 수도 있습니다. 이러한 경우는 다음과 같습니다.

  • ClientScriptManager 컨트롤의 등록 메서드를 호출하여 스크립트를 등록하는 경우

  • 컨트롤 렌더링 동안 Write 메서드를 호출하는 등의 방법으로 스크립트 또는 태그를 직접 렌더링하는 경우

컨트롤에서 ClientScriptManager 컨트롤의 스크립트 등록 메서드를 호출하는 경우 ScriptManager 컨트롤의 해당하는 스크립트 등록 메서드를 대신 사용할 수 있습니다. 이 경우 이 컨트롤이 UpdatePanel 컨트롤 내부에서 작동할 수 있습니다.

UpdatePanel 컨트롤 내부에서 웹 파트 컨트롤 사용

ASP.NET 웹 파트는 최종 사용자가 웹 페이지의 내용, 모양 및 동작을 브라우저에서 직접 수정할 수 있는 웹 사이트를 만드는 데 사용할 통합 컨트롤 집합입니다. UpdatePanel 컨트롤 내부에서 웹 파트 컨트롤을 사용할 수 있지만 다음과 같은 제한이 따릅니다.

  • WebPartZone 컨트롤이 동일한 UpdatePanel 컨트롤 내부에 있어야 합니다. 예를 들어 페이지에 고유한 WebPartZone 컨트롤을 포함하는 두 개의 UpdatePanel 컨트롤이 있을 수 없습니다.

  • WebPartManager 컨트롤에서 웹 파트 컨트롤의 모든 클라이언트 상태 정보를 관리합니다. 이 컨트롤은 페이지에서 가장 바깥쪽 UpdatePanel 컨트롤에 있어야 합니다.

  • 비동기 포스트백을 사용하여 웹 파트 컨트롤을 가져오거나 내보낼 수 없습니다. 이 작업을 수행하려면 비동기 포스트백에서 사용할 수 없는 FileUpload 컨트롤이 있어야 합니다. 기본적으로 웹 파트 컨트롤을 가져오면 전체 포스트백이 수행됩니다.

  • 비동기 포스트백 동안에서 웹 파트 컨트롤의 스타일을 추가하거나 수정할 수 없습니다.

웹 파트 컨트롤에 대한 자세한 내용은 ASP.NET 웹 파트 개요를 참조하십시오.

비동기 포스트백 동안 지원되지 않는 속성과 메서드

페이지에 기본 포스트백 단추를 설정하는 다음과 같은 시나리오는 비동기 포스트백 과정에서 지원되지 않습니다.

  • 비동기 포스트백 과정에서 DefaultButton을 프로그래밍 방식으로 변경하는 시나리오

  • Panel 컨트롤이 UpdatePanel 컨트롤 안에 포함되지 않았을 때 비동기 포스트백 과정에서 DefaultButton을 프로그래밍 방식으로 변경하는 시나리오

HttpResponse 클래스의 다음 메서드는 포스트백 시나리오에서만 지원되며 비동기 포스트백 시나리오에서는 지원되지 않습니다.

코드 예제

다음 단원에는 UpdatePanel 컨트롤을 만들고 사용하는 방법을 보여 주는 예제가 포함되어 있습니다.

방법 및 연습 항목

클래스 참조

다음 표에서는 UpdatePanel 컨트롤의 주요 서버 클래스를 보여 줍니다.

클래스

설명

UpdatePanel

부분 페이지 업데이트에 참여할 수 있는 웹 페이지 부분을 지정하는 서버 컨트롤

ScriptManager

부분 페이지 렌더링을 관리하는 서버 컨트롤. ScriptManager 컨트롤은 브라우저로 보낼 스크립트 구성 요소를 등록합니다. 또한 지정한 페이지 영역만 렌더링되도록 페이지 렌더링을 재정의합니다.

ScriptManagerProxy

콘텐츠 페이지나 사용자 컨트롤과 같은 중첩된 구성 요소에서 페이지에 스크립트 및 웹 서비스 참조를 추가할 수 있도록 하는 서버 컨트롤. 이 컨트롤은 부모 요소에 이미 ScriptManager 컨트롤이 포함되어 있는 경우에 유용합니다.

PageRequestManager

브라우저에서 부분 페이지 렌더링을 조정하는 Microsoft AJAX 라이브러리의 클래스. PageRequestManager 클래스는 서버와 정보를 비동기적으로 교환하고 사용자 지정 클라이언트 스크립트 개발에 필요한 이벤트와 메서드를 노출합니다.

추가 항목

ASP.NET 페이지 수명 주기 개요

참고 항목

작업

UpdatePanel 컨트롤 소개

여러 UpdatePanel 컨트롤을 사용하여 단일 ASP.NET 페이지 만들기

개념

UpdateProgress 컨트롤 개요

부분 페이지 렌더링 개요

ASP.NET PageRequestManager 클래스 개요