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

Visual Studio 2010

업데이트: 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 탭에서 단락 구분선 요소를 텍스트 뒤로 끌어 옵니다.

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

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

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

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

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

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

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

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

    <%@ 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" runat="server">
            <contenttemplate>
            <fieldset>
            <legend>UpdatePanel</legend>
               <asp:Calendar id="Calendar1" runat="server"></asp:Calendar>
            </fieldset>
            </contenttemplate>
        </asp:UpdatePanel>
    </asp:Content>
    
    
    
    <%@ Master Language="C#" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
    
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>UpdatePanel in Master Pages</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            Master Page<br />
            <hr />
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <br />
            <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
            </asp:contentplaceholder>
        </div>
        </form>
    </body>
    </html>
    
    
    

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

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

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

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

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

    UpdatePanel 자습서

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

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

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

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

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

    protected void Page_Load(object sender, EventArgs e)
    {
        ScriptManager1.RegisterAsyncPostBackControl(DecrementButton);
        ScriptManager1.RegisterAsyncPostBackControl(IncrementButton);
    }
    
    
    
  8. 다음 코드를 추가하여 MasterButton_Click이라는 Click 처리기를 만듭니다.

    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 Int32 Offset
    {
        get
        { return (Int32)(ViewState["Offset"] ?? 0);}
        set
        { ViewState["Offset"] = value;}
    }
    
    
    
  10. 콘텐츠 페이지에서 디자인 뷰로 전환한 다음 Calendar 컨트롤을 두 번 클릭하여 SelectionChanged 이벤트에 대한 이벤트 처리기를 만듭니다.

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

    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 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" %>
    
    
    
  14. 콘텐츠 페이지에서 디자인 뷰로 전환하고 UpdatePanel 컨트롤을 선택합니다.

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

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

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

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

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

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

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

    <%@ Page Language="C#" MasterPageFile="MasterPage.master" Title="UpdatePanel in Master Pages" %>
    <%@ MasterType VirtualPath="MasterPage.master" %>
    
    <script runat="server">
        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" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
            <fieldset>
            <legend>UpdatePanel</legend>
               <asp:Calendar id="Calendar1" runat="server" OnSelectionChanged="Calendar1_SelectionChanged"></asp:Calendar> 
            </fieldset>
            </ContentTemplate>
        </asp:UpdatePanel>
    </asp:Content>
    
    
    
    <%@ Master Language="C#" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
        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" runat="server">
        <title>UpdatePanel in Master Pages</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            Master Page<br />
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            Change date &nbsp;
            <asp:Button ID="DecrementButton" runat="server" Text="-" OnClick="MasterButton_Click" />
            <asp:Button ID="IncrementButton" runat="server" Text="+" OnClick="MasterButton_Click" />
            <hr />
            <br />
            <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
            </asp:contentplaceholder>
        </div>
        </form>
    </body>
    </html>
    
    
    

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

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

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

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

표시: