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

  • 아티클

업데이트: 2007년 11월

UpdatePanel 컨트롤을 포함하는 모든 ASP.NET 페이지에는 ScriptManager 컨트롤도 필요합니다. 마스터 페이지에서 UpdatePanel 컨트롤을 사용하려면 마스터 페이지에 ScriptManager 컨트롤을 배치합니다. 이 시나리오에서 마스터 페이지는 모든 콘텐츠 페이지에 대해 ScriptManager 컨트롤을 제공합니다. 개별 콘텐츠 페이지에 대해 부분 페이지 업데이트를 사용하지 않으려면 해당 페이지에 대해 부분 페이지 업데이트를 사용하지 않도록 설정하면 됩니다.

또는 각 콘텐츠 페이지에 ScriptManager 컨트롤을 배치합니다. 일부 콘텐츠 페이지에만 UpdatePanel 컨트롤을 포함하려는 경우 이렇게 할 수 있습니다.

사전 요구 사항

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

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

  • AJAX 사용 ASP.NET 웹 사이트

콘텐츠 페이지에 UpdatePanel 컨트롤을 추가하려면

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

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

  3. ContentPlaceHolder 컨트롤 외부에 Master Page라는 텍스트를 추가합니다.

  4. 도구 상자의 HTML 탭에서 단락 구분선 요소를 텍스트 뒤로 끌어 옵니다.

  5. 마스터 페이지에 대한 콘텐츠 페이지를 만듭니다.

    솔루션 탐색기에서 프로젝트의 이름을 마우스 오른쪽 단추로 클릭한 다음 새 항목 추가를 클릭합니다. 새 항목 추가 대화 상자에서 마스터 페이지 선택 확인란을 선택한 다음 확인을 클릭합니다.

  6. Content 컨트롤 내부에서 Content Page라는 텍스트를 입력한 다음 도구 상자에서 UpdatePanel 컨트롤을 추가합니다.

  7. UpdatePanel 컨트롤 내부에 Calendar 컨트롤을 추가합니다.

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

  9. 달력에서 다음 달 및 이전 달 컨트롤을 클릭합니다.

    전체 페이지가 새로 고쳐지지 않고 달력이 변경됩니다. 이러한 동작은 달력이 마스터 페이지와 연결되지 않은 페이지에 있는 UpdatePanel 컨트롤 내부에 있을 경우 발생합니다.

    이 예제는 UpdatePanel 컨트롤이 나타내는 페이지 영역이 보다 잘 표시되도록 스타일이 지정되었습니다.

    <%@ Page Language="VB" MasterPageFile="MasterPage.master" Title="UpdatePanel in Master Pages" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    Content Page<br />
    <asp:UpdatePanel id="UpdatePanel1" >
        <contenttemplate>
        <fieldset>
        <legend>UpdatePanel</legend>
           <asp:Calendar id="Calendar1" ></asp:Calendar>
        </fieldset>
        </contenttemplate>
    </asp:UpdatePanel>
</asp:Content>

    <%@ Page Language="C#" MasterPageFile="MasterPage.master" Title="UpdatePanel in Master Pages" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    Content Page<br />
    <asp:UpdatePanel id="UpdatePanel1" >
        <contenttemplate>
        <fieldset>
        <legend>UpdatePanel</legend>
           <asp:Calendar id="Calendar1" ></asp:Calendar>
        </fieldset>
        </contenttemplate>
    </asp:UpdatePanel>
</asp:Content>

    <%@ Master 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 in Master Pages</title>
</head>
<body>
    <form id="form1" >
    <div>
        Master Page<br />
        <hr />
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <br />
        <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 >

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdatePanel in Master Pages</title>
</head>
<body>
    <form id="form1" >
    <div>
        Master Page<br />
        <hr />
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        <br />
        <asp:contentplaceholder id="ContentPlaceHolder1" >
        </asp:contentplaceholder>
    </div>
    </form>
</body>
</html>

마스터 페이지에서 UpdatePanel 새로 고침

이 자습서 부분에서는 비동기 포스트백을 발생시킨 다음 콘텐츠 페이지에서 UpdatePanel 컨트롤을 새로 고치는 컨트롤을 마스터 페이지에 추가합니다.

모든 콘텐츠 페이지에 대해 부분 페이지 업데이트를 사용하려면

  1. 마스터 페이지에서 디자인 뷰로 전환합니다.

  2. 마스터 페이지에서 ScriptManager 컨트롤 뒤에 텍스트 및 두 단추를 추가합니다.

  3. 한 단추의 ID를 DecrementButton으로 설정하고 해당 Text 값을 "-"로 설정합니다. 다른 단추의 ID를 IncrementButton으로 설정하고 해당 Text 값을 "+"로 설정합니다.

    이러한 단추는 콘텐츠 페이지에서 달력의 선택된 날짜를 증감합니다.

  4. +(더하기) 단추를 선택한 다음 속성 창의 도구 모음에서 이벤트 단추를 클릭하고 클릭 상자에 MasterButton_Click을 입력합니다.

  5. -(빼기) 단추에 대해 이전 단계를 반복합니다.

  6. 컨트롤 외부의 페이지를 두 번 클릭하여 Page_Load 이벤트 처리기를 만듭니다.

  7. 처리기에 다음 코드를 추가하여 두 단추를 비동기 포스트백 컨트롤로 등록합니다.

    Protected Sub Page_Load(ByVal Sender As Object, ByVal E As EventArgs)
    ScriptManager1.RegisterAsyncPostBackControl(DecrementButton)
    ScriptManager1.RegisterAsyncPostBackControl(IncrementButton)
End Sub

    protected void Page_Load(object sender, EventArgs e)
{
    ScriptManager1.RegisterAsyncPostBackControl(DecrementButton);
    ScriptManager1.RegisterAsyncPostBackControl(IncrementButton);
}

  8. 다음 코드를 추가하여 MasterButton_Click이라는 Click 처리기를 만듭니다.

    Protected Sub MasterButton_Click(ByVal Sender As Object, ByVal E As EventArgs)

    Select Case Sender.ID

        Case "IncrementButton"
            Me.Offset = Me.Offset + 1
        Case "DecrementButton"
            Me.Offset = Me.Offset - 1
    End Select
    Dim upl As UpdatePanel
    upl = ContentPlaceHolder1.FindControl("UpdatePanel1")
    upl.Update()
    Dim cal As Calendar
    cal = ContentPlaceHolder1.FindControl("Calendar1")
    Dim newDateTime As DateTime
    newDateTime = DateTime.Today.Add(New TimeSpan(Offset, 0, 0, 0))
    cal.SelectedDate = newDateTime
End Sub

    protected void MasterButton_Click(object sender, EventArgs e)
{   
    switch (((Control)sender).ID)
    {
        case "IncrementButton":
            this.Offset = this.Offset + 1;
            break;
        case "DecrementButton":
            this.Offset = this.Offset - 1;
            break;
    }
    ((UpdatePanel)ContentPlaceHolder1.FindControl("UpdatePanel1")).Update();
    Calendar cal = ((Calendar)ContentPlaceHolder1.FindControl("Calendar1"));
    DateTime newDateTime = DateTime.Today.Add(new TimeSpan(Offset, 0, 0, 0));
    cal.SelectedDate = newDateTime;
}

  9. 다음 코드를 추가하여 오늘 날짜와 선택한 날짜 사이의 차이를 추적하는 Offset이라는 public 속성을 마스터 페이지에 만듭니다.

    Public Property Offset() As Integer
    Get
        If ViewState("Offset") Is Nothing Then
            Return 0
        Else : Return ViewState("Offset")
        End If
    End Get
    Set(ByVal value As Integer)
        ViewState("Offset") = value
    End Set
End Property

    public Int32 Offset
{
    get
    { return (Int32)(ViewState["Offset"] ?? 0);}
    set
    { ViewState["Offset"] = value;}
}

  10. 콘텐츠 페이지에서 디자인 뷰로 전환한 다음 Calendar 컨트롤을 두 번 클릭하여 SelectionChanged 이벤트에 대한 이벤트 처리기를 만듭니다.

  11. 다음 코드를 SelectionChanged 이벤트 처리기에 추가하여 사용자가 날짜를 선택하는 Offset 속성을 설정합니다.

    Protected Sub Calendar1_SelectionChanged(ByVal Sender As Object, ByVal E As EventArgs)
    Dim selectedDate As DateTime
    selectedDate = Calendar1.SelectedDate
    Master.Offset = _
       Calendar1.SelectedDate.Subtract(DateTime.Today).Days

End Sub

    protected void Calendar1_SelectionChanged(object sender, 
    EventArgs e)
{
    DateTime selectedDate = Calendar1.SelectedDate;
    Master.Offset =
       ((TimeSpan)Calendar1.SelectedDate.Subtract(
       DateTime.Today)).Days;
}

  12. 콘텐츠 페이지로 전환하고 달력에서 선택한 날짜를 현재 날짜로 설정하는 Page_Load 이벤트 처리기를 추가합니다.

    Protected Sub Page_Load(ByVal Sender As Object, ByVal E As EventArgs)
    Dim newDateTime As DateTime
    newDateTime = DateTime.Today.Add(New TimeSpan(Master.Offset, 0, 0, 0))
    Calendar1.SelectedDate = newDateTime
End Sub

    protected void Page_Load(object sender, EventArgs e)
{
    DateTime newDateTime = 
        DateTime.Today.Add(new 
        TimeSpan(Master.Offset, 0, 0, 0));
    Calendar1.SelectedDate = newDateTime;
}

  13. 마스터 페이지의 Offset 속성을 강력한 형식의 속성으로 참조할 수 있도록 페이지에 @ MasterType 지시문을 추가합니다.

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

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

  14. 콘텐츠 페이지에서 디자인 뷰로 전환하고 UpdatePanel 컨트롤을 선택합니다.

  15. 속성 창에서 UpdatePanelUpdateMode 속성을 Conditional로 설정합니다.

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

  17. 달력에서 다음 달 및 이전 달 컨트롤을 클릭합니다.

    전체 페이지가 새로 고쳐지지 않고 달력이 변경됩니다.

  18. 달력에서 날짜를 선택한 다음 마스터 페이지의 단추를 클릭하여 선택한 날짜를 변경합니다.

    전체 페이지가 새로 고쳐지지 않고 이러한 변경 내용이 적용됩니다.

    이 예제는 UpdatePanel 컨트롤이 나타내는 페이지 영역이 보다 잘 표시되도록 스타일이 지정되었습니다.

    <%@ Page Language="VB" MasterPageFile="MasterPage.master" Title="UpdatePanel in Master Pages" %>
<%@ MasterType VirtualPath="MasterPage.master" %>

<script >
    Protected Sub Page_Load(ByVal Sender As Object, ByVal E As EventArgs)
        Dim newDateTime As DateTime
        newDateTime = DateTime.Today.Add(New TimeSpan(Master.Offset, 0, 0, 0))
        Calendar1.SelectedDate = newDateTime
    End Sub
    Protected Sub Calendar1_SelectionChanged(ByVal Sender As Object, ByVal E As EventArgs)
        Dim selectedDate As DateTime
        selectedDate = Calendar1.SelectedDate
        Master.Offset = _
           Calendar1.SelectedDate.Subtract(DateTime.Today).Days

    End Sub
</script>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    Content Page<br />
    <asp:UpdatePanel id="UpdatePanel1"  UpdateMode="Conditional">
        <ContentTemplate>
        <fieldset>
        <legend>UpdatePanel</legend>
           <asp:Calendar id="Calendar1"  OnSelectionChanged="Calendar1_SelectionChanged"></asp:Calendar> 
        </fieldset>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

    <%@ Page Language="C#" MasterPageFile="MasterPage.master" Title="UpdatePanel in Master Pages" %>
<%@ MasterType VirtualPath="MasterPage.master" %>

<script >
    protected void Page_Load(object sender, EventArgs e)
    {
        DateTime newDateTime = 
            DateTime.Today.Add(new 
            TimeSpan(Master.Offset, 0, 0, 0));
        Calendar1.SelectedDate = newDateTime;
    }
    protected void Calendar1_SelectionChanged(object sender, 
        EventArgs e)
    {
        DateTime selectedDate = Calendar1.SelectedDate;
        Master.Offset =
           ((TimeSpan)Calendar1.SelectedDate.Subtract(
           DateTime.Today)).Days;
    }
</script>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    Content Page<br />
    <asp:UpdatePanel id="UpdatePanel1"  UpdateMode="Conditional">
        <ContentTemplate>
        <fieldset>
        <legend>UpdatePanel</legend>
           <asp:Calendar id="Calendar1"  OnSelectionChanged="Calendar1_SelectionChanged"></asp:Calendar> 
        </fieldset>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>

    <%@ 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 Offset() As Integer
        Get
            If ViewState("Offset") Is Nothing Then
                Return 0
            Else : Return ViewState("Offset")
            End If
        End Get
        Set(ByVal value As Integer)
            ViewState("Offset") = value
        End Set
    End Property
    Protected Sub MasterButton_Click(ByVal Sender As Object, ByVal E As EventArgs)

        Select Case Sender.ID

            Case "IncrementButton"
                Me.Offset = Me.Offset + 1
            Case "DecrementButton"
                Me.Offset = Me.Offset - 1
        End Select
        Dim upl As UpdatePanel
        upl = ContentPlaceHolder1.FindControl("UpdatePanel1")
        upl.Update()
        Dim cal As Calendar
        cal = ContentPlaceHolder1.FindControl("Calendar1")
        Dim newDateTime As DateTime
        newDateTime = DateTime.Today.Add(New TimeSpan(Offset, 0, 0, 0))
        cal.SelectedDate = newDateTime
    End Sub
    Protected Sub Page_Load(ByVal Sender As Object, ByVal E As EventArgs)
        ScriptManager1.RegisterAsyncPostBackControl(DecrementButton)
        ScriptManager1.RegisterAsyncPostBackControl(IncrementButton)
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>UpdatePanel in Master Pages</title>
</head>
<body>
    <form id="form1" >
    <div>
        Master Page<br />
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        Change date &nbsp;
        <asp:Button ID="DecrementButton"  Text="-" OnClick="MasterButton_Click" />
        <asp:Button ID="IncrementButton"  Text="+" OnClick="MasterButton_Click" />
        <hr />
        <br />
        <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 Int32 Offset
    {
        get
        { return (Int32)(ViewState["Offset"] ?? 0);}
        set
        { ViewState["Offset"] = value;}
    }
    protected void MasterButton_Click(object sender, EventArgs e)
    {   
        switch (((Control)sender).ID)
        {
            case "IncrementButton":
                this.Offset = this.Offset + 1;
                break;
            case "DecrementButton":
                this.Offset = this.Offset - 1;
                break;
        }
        ((UpdatePanel)ContentPlaceHolder1.FindControl("UpdatePanel1")).Update();
        Calendar cal = ((Calendar)ContentPlaceHolder1.FindControl("Calendar1"));
        DateTime newDateTime = DateTime.Today.Add(new TimeSpan(Offset, 0, 0, 0));
        cal.SelectedDate = newDateTime;
    }
    protected void Page_Load(object sender, EventArgs e)
    {
        ScriptManager1.RegisterAsyncPostBackControl(DecrementButton);
        ScriptManager1.RegisterAsyncPostBackControl(IncrementButton);
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>UpdatePanel in Master Pages</title>
</head>
<body>
    <form id="form1" >
    <div>
        Master Page<br />
        <asp:ScriptManager ID="ScriptManager1" >
        </asp:ScriptManager>
        Change date &nbsp;
        <asp:Button ID="DecrementButton"  Text="-" OnClick="MasterButton_Click" />
        <asp:Button ID="IncrementButton"  Text="+" OnClick="MasterButton_Click" />
        <hr />
        <br />
        <asp:contentplaceholder id="ContentPlaceHolder1" >
        </asp:contentplaceholder>
    </div>
    </form>
</body>
</html>

콘텐츠 페이지에 대해 부분 페이지 업데이트 사용 안 함

마스터 페이지에 ScriptManager 컨트롤을 추가하면 기본적으로 모든 콘텐츠 페이지에 대해 부분 페이지 업데이트가 사용됩니다. 개별 콘텐츠 페이지에 대해 부분 업데이트를 사용하지 않으려면 해당 기능을 사용하지 않도록 설정하면 됩니다. 콘텐츠 페이지에 부분 페이지 업데이트와 호환되지 않는 사용자 지정 컨트롤이 포함되어 있는 경우 이렇게 할 수 있습니다.

콘텐츠 페이지에 대해 부분 페이지 업데이트를 사용하지 않으려면

검토

이 자습서에서는 마스터 페이지에서 UpdatePanel 컨트롤을 사용하는 방법을 보여 줍니다. 마스터 페이지에 ScriptManager 컨트롤이 있는 경우 콘텐츠 페이지에 ScriptManager 컨트롤을 선언하지 않아도 콘텐츠 페이지에서 UpdatePanel 컨트롤을 사용할 수 있습니다.

마스터 페이지에 부분 페이지 렌더링이 사용되는 개별 콘텐츠 페이지에 대해 부분 페이지 렌더링을 사용하지 않으려면 해당 콘텐츠 페이지에 대해 프로그래밍 방식으로 부분 페이지 렌더링을 사용하지 않도록 설정합니다.

참고 항목

작업

UpdatePanel 컨트롤 소개

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

개념

ASP.NET 마스터 페이지 개요

데이터 바인딩된 컨트롤에서 ASP.NET UpdatePanel 컨트롤 사용

참조

UpdatePanel

ScriptManager