편안하게 설명해준 MSDN 참조 : http://msdn.microsoft.com/ko-kr/library/bb398867.aspx
고유한 개발 환경에서 절차를 구현하려면 다음이 필요합니다.
-
Microsoft Visual Studio 2005 또는 Microsoft Visual Web Developer Express
-
AJAX 사용 ASP.NET 웹 사이트
개별적으로 업데이트되는 두 영역이 포함된 페이지를 만들려면
-
새 페이지를 만들고 디자인 뷰로 전환합니다.
-
도구 상자의 AJAX 확장 탭에서 ScriptManager 컨트롤을 두 번 클릭하여 페이지에 추가합니다.
-
도구 상자에서 UpdatePanel 컨트롤을 두 번 클릭하여 페이지에 두 UpdatePanel 컨트롤을 추가합니다.
-
속성 창에서 두 UpdatePanel 컨트롤의 UpdateMode 속성을 Conditional로 설정합니다.
-
UpdatePanel 컨트롤 중 하나에서 Label 컨트롤을 추가하고 해당 Text 속성을 Panel Created로 설정합니다.
-
동일한 UpdatePanel 컨트롤에서 Button 컨트롤을 추가하고 해당 Text 속성을 Refresh Panel로 설정합니다.
-
다른 UpdatePanel 컨트롤에서 Calendar 컨트롤을 추가합니다.
-
Refresh Panel 단추를 두 번 클릭하여 해당 Click 이벤트에 대한 이벤트 처리기를 추가합니다.
-
Label 컨트롤을 현재 시간으로 설정하는 다음 코드를 처리기에 추가합니다.
-
변경 내용을 저장하고 Ctrl+F5를 눌러 브라우저에서 페이지를 봅니다.
-
단추를 클릭합니다.
패널의 텍스트가 변경되어 패널의 콘텐츠가 마지막으로 새로 고쳐진 시간이 표시됩니다.
-
달력에서 다른 달로 이동합니다.
다른 패널의 시간은 변경되지 않습니다. 두 패널의 콘텐츠는 개별적으로 업데이트됩니다.
이 예제는 UpdatePanel 컨트롤이 나타내는 페이지 영역이 보다 잘 표시되도록 스타일이 지정되었습니다.
C#<%@ Page 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"> protected void Button1_Click(object sender, EventArgs e) { Label1.Text = "Panel refreshed at " + DateTime.Now.ToString(); } </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>UpdatePanel Tutorial</title> <style type="text/css"> #UpdatePanel1, #UpdatePanel2 { width:300px; height:100px; } </style> </head> <body> <form id="form1" runat="server"> <div> <asp:ScriptManager id="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel id="UpdatePanel1" runat="server"> <ContentTemplate> <fieldset> <legend>UpdatePanel1</legend> <asp:Label ID="Label1" runat="server" Text="Panel Created"></asp:Label><br /> <asp:Button ID="Button1" runat="server" Text="Refresh Panel 1" OnClick="Button1_Click" /> </fieldset> </ContentTemplate> </asp:UpdatePanel> <asp:UpdatePanel ID="UpdatePanel2" runat="server"> <ContentTemplate> <fieldset> <legend>UpdatePanel2</legend> <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar> </fieldset> </ContentTemplate> </asp:UpdatePanel> </div> </form> </body> </html>
기본적으로 UpdatePanel 컨트롤의 ChildrenAsTriggers 속성은 true입니다. 이 속성을 true로 설정하면 패널에 포스트백을 발생시키는 컨트롤이 있는 경우 해당 패널 내의 컨트롤이 부분 페이지 업데이트에 참여하게 됩니다.
일부 시나리오에서 UpdatePanel 컨트롤을 중첩시키면 사용자가 다른 방식으로는 제공하기 어려운 UI 기능을 제공할 수 있습니다. 중첩된 패널은 특정 페이지 영역을 별도로 새로 고치고 여러 영역을 동시에 새로 고치려는 경우에 유용합니다. 외부 및 중첩된 컨트롤의 UpdateMode 속성을 모두 Conditional로 설정하여 이를 수행할 수 있습니다. 이렇게 하면 내부 패널만 새로 고쳐지는 경우 외부 패널의 해당 페이지 영역이 새로 고쳐지지 않습니다. 그러나 외부 패널이 새로 고쳐지면 중첩된 패널도 새로 고쳐집니다.
다음 예제에서는 이러한 개념을 간단하게 보여 줍니다.
UpdatePanel 컨트롤을 중첩시키려면
-
새 페이지를 만들고 디자인 뷰로 전환합니다.
-
도구 상자의 AJAX 확장 탭에서 ScriptManager 컨트롤을 두 번 클릭하여 페이지에 추가합니다.
-
도구 상자에서 UpdatePanel 컨트롤을 두 번 클릭하여 페이지에 UpdatePanel 컨트롤을 추가합니다.
-
UpdatePanel 컨트롤 내부를 클릭한 다음 도구 상자의 표준 탭에서 Button 컨트롤을 두 번 클릭하여 UpdatePanel 컨트롤에 추가합니다.
-
단추의 Text 속성을 Refresh Outer Panel로 설정합니다.
-
속성 창에서 UpdatePanel 컨트롤의 UpdateMode 속성을 Conditional로 설정합니다.
-
소스 뷰로 전환하고 다음 코드를 <asp:UpdatePanel> 요소의 <ContentTemplate> 요소 내에 추가합니다.
코드가 시간을 표시하며 태그가 마지막으로 렌더링된 시간을 나타내는 데 사용됩니다.
-
디자인 뷰로 전환하고 UpdatePanel 컨트롤 내부를 클릭한 다음 첫 번째 패널 내에 두 번째 UpdatePanel 컨트롤을 추가합니다.
-
속성 창에서 중첩된 UpdatePanel 컨트롤의 UpdateMode 속성을 Conditional로 설정합니다.
-
중첩된 UpdatePanel 컨트롤 내부에 Calendar 컨트롤을 추가합니다.
-
소스 뷰로 전환하고 다음 코드를 중첩된 <asp:UpdatePanel> 요소의 <ContentTemplate> 요소 내에 추가합니다.
-
변경 내용을 저장한 다음 Ctrl+F5를 눌러 브라우저에서 페이지를 봅니다.
중첩된 UpdatePanel 컨트롤에서 달력의 이전 또는 다음 달로 이동할 경우 콘텐츠가 다시 렌더링되지 않으므로 외부 패널의 시간이 변경되지 않습니다. 반대로 외부 패널의 단추를 클릭하면 내부 패널의 시간이 새로 고쳐집니다. 기본적으로 EnableViewState 속성은 Calendar 컨트롤에 대해 true이므로 달력은 변경되지 않습니다.
이 예제는 UpdatePanel 컨트롤이 나타내는 페이지 영역이 보다 잘 표시되도록 스타일이 지정되었습니다.
C#<%@ 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 runat="server"> <title>UpdatePanel Tutorial</title> <style type="text/css"> #UpdatePanel2 { position: relative; margin: 2% 5% 2% 5%; } </style> </head> <body> <form id="form1" runat="server"> <div> <asp:ScriptManager id="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel id="UpdatePanel1" UpdateMode="Conditional" runat="server"> <ContentTemplate> <fieldset> <legend>Parent UpdatePanel</legend> Last refresh <%=DateTime.Now.ToString() %> <br /> <asp:Button ID="Button1" runat="server" Text="Refresh Outer Panel" /> <asp:UpdatePanel ID="UpdatePanel2" runat="server"> <ContentTemplate> <fieldset> <legend>Nested UpdatePanel</legend> Last refresh <%=DateTime.Now.ToString() %> <br /> <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar> </fieldset> </ContentTemplate> </asp:UpdatePanel> </fieldset> </ContentTemplate> </asp:UpdatePanel> </div> </form> </body> </html>
참고 Calendar 컨트롤은 업데이트되지 않은 것처럼 나타납니다. 기본적으로 달력이 렌더링되면 현재 달 및 날짜로 설정됩니다. 그러나 이 단계에서 단추를 클릭하면 이전에 선택한 달 및 날짜가 달력에 표시됩니다. 암시적으로 페이지는 Calendar 컨트롤의 뷰 상태를 사용하여 달력을 사용자가 선택한 달 및 날짜로 렌더링합니다. 이는 UpdatePanel 컨트롤이 적절한 논리를 수행하여 비동기 포스트백 후 페이지가 예상 상태로 유지되도록 함을 보여 줍니다. Calendar 컨트롤의 EnableViewState 속성을 false로 설정하고 이러한 단계를 다시 실행하여 이를 테스트할 수 있습니다. 이 경우 이동하는 달에 관계없이 단추를 클릭할 때 달력에 다시 현재 달이 표시됩니다.
'프로그래밍' 카테고리의 다른 글
| [Asp.net] Json / JQuery (Ajax)/ Asp.net 3가지를 연동하여 데이터 가져오기 (0) | 2011.10.21 |
|---|---|
| 언어별 JSON 참조 Sample 코드 (0) | 2011.10.21 |
| [Asp.net] Calendar 혹은 달력 컨트롤에서 특정 날짜만 색변경 (0) | 2011.09.27 |
| BackgroundWorker 사용법 (0) | 2011.09.16 |
| Cab 파일 작성법 (ocx파일 배포하기) (1) | 2011.08.03 |
댓글