출처 : http://neostyx.tistory.com/21
글에 대한 내용은 http://www.neostyx.net/GrayRound/NXBlogPostView.aspx?postid=070405080805986&categoryname=ASP.NET+AJAX 를 눌러서 보시기 바랍니다.
포스트를 읽기에 앞서...
- 이 포스트는 영문으로 작성되어 제공되어진 것을 제가 제 나름대로 한글로 번역하였습니다.
- 직역보다는 의역에 충실하도록 노력을 하였으며, 충분하게 잘못된 번역이 있을 수 있습니다. 잘못된 번역 부분에 대해서는 덧글로 달아주시면 수정하도록 하겠습니다.
- 이 포스트에는 깔끔하게 번역되지 않은 부분이 있을 수 있습니다. 크게 양해해주시고, 영문 웹 페이지를 참조하시기 바라며, 영문 웹 페이지의 링크에 대한 경로는 필요하지 않은 이상 링크를 추가하지 않았습니다.
- 이 포스트는 단지 번역을 한 것 뿐이며, 모든 저작권에 대해서는 영문 웹 페이지에 명시된 곳에 있습니다.
UpdatePanel 컨트롤 개요
소개
ASP.NET UpdatePanel 컨트롤은 풍부하고 고객 중심인 웹 응용 프로그램을 만드는 것을 가능하게 합니다. UpdatePanel 컨트롤을 사용함으로 포스트백에 의한 전 페이지를 새로고침하는 것 대신 페이지 중 선택된 일부분만 새로고침을 할 수 있습니다. 이것은 페이지 중 일부분만 업데이트 작업을 수행하는 것을 의미합니다. ScriptManager 컨트롤과 하나 또는 그 이상의 UpdatePanel 컨트롤들이 포함된 웹 페이지는 고객측의 클라이언트 스크립트 없이도, 자동적으로 부분 페이지의 업데이트에 참여하게 됩니다.
이 토픽은 다음과 같은 정보를 포함하고 있습니다.
1. 시나리오
2. 배경
3. 코드 예제
4. 클래스 참조
시나리오
UpdatePanel 컨트롤은 웹 페이지가 최종 사용자에게 더 양방향적으로 보이게 만들어야 하는 복잡한 클라이언트 행위를 가진 웹 페이지를 개발하는 데 도움을 주는 서버 컨트롤입니다. 서버와 클라이언트 사이에서 웹 페이지의 특정 부분을 업데이트하기 위해서 보통 깊은 수준의 ECMAScript(Javascript)를 요구하였습니다. 그러나, UpdatePanel 컨트롤을 사용함으로 어떠한 클라이언트 스크립트를 작성할 필요 없이 웹 페이지에서 부분 페이지만 업데이트하는 것이 가능하게 되었습니다. 원한다면, 클라이언트의 사용자 환경을 향상시키기 위해 일반적인 클라이언트 스크립트를 추가할 수도 있습니다. UpdatePanel 컨트롤을 사용할 때, 페이지의 행동은 브라우저에 독립적이고, 클라이언트와 서버 사이에 전송되는 데이터의 양을 잠재적으로 감소시킬 수 있습니다.
배경
UpdatePanel 컨트롤은 전체 웹 페이지의 새로고침 없이 업데이트될 수 있는 특정 범위에서 작업합니다. 이 프로세스는 ScriptManager 서버 컨트롤과 PageRequestManager 클래스에 의해 공동으로 처리됩니다. 부분 페이지의 업데이트가 가능할 때, 컨트롤들은 비동기적으로 서버로 게시됩니다. 비동기적인 포스트백 행동은 페이지와 컨트롤의 생명 주기가 완료될 때의 통상적인 포스트백과 같습니다. 그러나, 비동기 포스트백에서, 페이지에서 UpdatePanel 컨트롤에 둘러쌓인 페이지의 범위만 업데이트됩니다. 서버는 브라우저로 단지 영향받은 요소들만을 HTML 마크업 형태로 보냅니다. 브라우저에서, PageRequestManager 클래스는 업데이트된 마크업으로 기존의 HTML을 교체하는 작업인 Document Object Model(DOM) 조정을 수행합니다. 아래의 그림은 첫번째에 페이지를 로드할 때와 그 다음 비동기 포스트백이 UpdatePanel 컨트롤의 내용을 새로고침하는 것을 보여줍니다.
그림 1. Partial-page rendering overview
부분 페이지의 업데이트를 가능하게 하기
UpdatePanel 컨트롤은 웹 페이지에서 ScriptManager 컨트롤을 필요로 합니다. 기본적으로, 부분 페이지의 업데이트는 ScriptManager 컨트롤의 EnablePartialRendering 속성이 기본값인 true이기 때문에 가능합니다. 아래의 예제는 페이지에 ScriptManager 컨트롤과 UpdatePanel 컨트롤을 정의하는 것을 보여줍니다. UpdatePanel 컨트롤은 클릭했을 때 패널 안에 있는 내용이 새로고침되는 Button 컨트롤을 포함하고 있습니다. 기본적으로 ChildrenAsTriggers 속성은 true입니다. 그러므로, Button 컨트롤은 비동기 포스트백 컨트롤인 것처럼 행동합니다.
[실행화면] [소스보기]
UpdatePanel 컨트롤의 컨텐츠를 열거하기
UpdatePanel 선언적인 컨트롤 또는 ContentTemplate 속성을 사용한 디자이너에서 컨텐츠를 추가합니다. 이 속성은 <ContentTemplate> 마크업 태그로써 표현됩니다. 프로그래밍적으로 컨텐츠를 추가하기 위해서는 ContentTemplateContainer 속성을 사용해야 합니다.
하나 또는 그 이상의 UpdatePanel 컨트롤들이 포함된 웹 페이지가 첫번째 렌더링될 때, UpdatePanel의 모든 컨텐츠들은 렌더링되고 브라우저로 보내지게 됩니다. 비동기 포스트백에 이어서, 개별적 UpdatePanel 컨트롤들의 컨텐츠가 업데이트될 것입니다. 포스트백을 유발하는 요소들을 가진 패널의 세팅과 각 패널에 명시된 코드에 의존되어 업데이트 됩니다.
UpdatePanel Triggers 열거하기
기본적으로, UpdatePanel 컨트롤 안에 있는 어떠한 포스트백 컨트롤은 비동기 포스트백을 유발하고 패널의 컨텐츠를 새로고침합니다. 그러나, 또한 UpdatePanel 컨트롤을 새로고침하는 페이지상의 다른 컨트롤들을 구성할 수 있습니다. 그것은 UpdatePanel의 트리거를 정의함으로써 사용할 수 있습니다. 트리거는 패널을 업데이트하기 위해 유발시키는 포스트백 컨트롤과 이벤트를 정의합니다. 트리거 컨트롤의 명시된 이벤트가 발생할 때(예를 들어, Button의 Click 이벤트), 업데이트 패널은 새로고침됩니다.
아래의 예제는 UpdatePanel 컨트롤에서 트리거를 어떻게 정의하는지를 보여줍니다.
[실행화면] [소스보기]
트리거는 UpdatePanel 컨트롤의 <Triggers> 요소안에 <asp:AsyncPostBackTrigger>로 정의됩니다. (만약, Visual Studio에서 페이지를 수정한다면, UpdatePanelTrigger Collection Editor 대화 상자를 사용하여 트리거를 만들 수 있습니다.)
트리거의 컨트롤 이벤트는 선택적입니다. 만약, 어떠한 이벤트도 명시되지 않으면, 트리거 이벤트는 컨트롤의 기본 이벤트가 됩니다. 예를 들어 Button 컨트롤의 기본 이벤트는 Click 이벤트입니다.
어떻게 UpdatePanel 컨트롤들이 새로고침되는가?
아래의 리스트는 부분 페이지의 렌더링 동안 패널의 컨텐츠가 업데이트 될 때 결정하는 Updatepanel 컨트롤의 속성 설정을 묘사한 것입니다.
만약 UpdateMode 속성이 Always로 설정이 되어 있다면, 페이지의 어디에서나 매번 포스트백을 시작시켜 UpdatePanel 컨트롤의 컨텐츠가 업데이트됩니다. 이것은 다른 UpdatePanel 컨트롤들 안에 있는 컨트롤들에서의 비동기 포스트백과 UpdatePanel 컨트롤의 안에 없는 컨트롤들에서의 비동기 포스트백을 포함합니다.
만약 UpdateMode 속성이 Conditional로 설정이 되어 있다면, UpdatePanel의 컨트롤의 컨텐츠는 아래의 사항 중 하나가 true일 때 업데이트됩니다.
UpdatePanel 컨트롤의 트리거에 의해 포스트백이 발생될 때
UpdatePanel 컨트롤의 Update() 메소드를 명시적으로 호출할 때
UpdatePanel 컨트롤이 다른 UpdatePanel 컨트롤 안으로 중첩되어 부모의 Panel이 업데이트될 때
ChildrenAsTriggers 속성이 true 이고 UpdatePanel 컨트롤의 어떠한 자식 컨트롤이 포스트백을 유발할 때. 중첩된 UpdatePanel 컨트롤의 자식 컨트롤들은 부모 패널의 트리거에서 명시적으로 정의하지 않는 이상은 UpdatePanel 컨트롤 밖의 업데이트를 유발하지 않습니다.
만약 ChildrenAsTriggers 속성이 false로 설정되고 UpdateMode 속성이 Always로 설정되면, 예외가 던져집니다. ChildrenAsTriggers 속성은 UpdateMode 속성이 Conditional 로 설정되었을 때만 사용할 수 있습니다.
마스터 페이지에서 UpdatePanel 컨트롤들을 사용하기
마스터 페이지에서 UpdatePanel 컨트롤을 사용하기 위해서는 어떻게 ScriptManager 컨트롤을 포함할 것인지를 결정해야 합니다. 만약, 마스터 페이지에 ScriptManager 컨트롤을 포함시킨다면, 모든 컨텐츠 페이지들에 ScriptManager 컨트롤로써 실행될 수 있습니다. (만약 컨텐츠 페이지에서 선언적으로 스크립트들 또는 서비스들을 등록하기를 원한다면, 컨텐츠 페이지에 ScriptManagerProxy 컨트롤을 추가해야 합니다.)
만약, 마스터 페이지가 ScriptManager 컨트롤을 포함하지 않는다면, UpdatePanel 컨트롤을 포함하는 각 컨텐츠 페이지마다 개별적으로 ScriptManager 컨트롤들을 추가해야 합니다. 이 디자인 선택은 어떻게 응용프로그램에서 클라이언트 스크립트를 관리하는가에 의존되어 있습니다. 어떻게 클라이언트 스크립트를 관리하는지에 대한 더 많은 정보는 ScriptManager Control Overview를 보도록 하십시요. 마스터 페이지에 대한 더 많은 정보는 ASP.NET Master Pages Overview를 보도록 하십시요.
만약, 마스터 페이지에 ScriptManager 컨트롤이 있고 컨텐츠 페이지의 부분 페이지을 렌더링하는 기능이 필요하지 않는다면, 컨텐츠 페이지에서 프로그래밍적으로 ScriptManager 컨트롤의 EnablePartialRendering 속성을 false로 설정합니다.
아래의 예제는 마스터 페이지와 컨텐츠 페이지에 있는 ScriptManager 컨트롤의 마크업을 보여줍니다. 이 예제에서, LastUpdate라는 속성은 마스터 페이지에 정의되어 있고, UpdatePanel 컨트롤의 안에서 참조하게 되어 있습니다.
[실행화면] [소스보기]
중첩된 UpdatePanel 컨트롤들을 사용하기
UpdatePanel 컨트롤들은 중첩될 수 있습니다. 만약 부모 패널이 새로고침된다면, 모든 중첩된 패널들 또한 새로고침됩니다.
아래의 예제는 다른 UpdatePanel 컨트롤 안에 있는 UpdatePanel 컨트롤이 정의된 마크업을 보여줍니다. 부모 패널 트리거에 있는 Button은 부모와 자식의 패널의 컨텐츠를 업데이트합니다. 자식 패널 트리거에 있는 Button은 단지 자식 패널의 컨텐츠만을 업데이트 합니다.
[실행화면] [소스보기]
아래의 예제는 GridView 컨트롤에서 중첩된 UpdatePanel 컨트롤을 보여줍니다. GridView 컨트롤은 UpdatePanel 컨트롤 안에 있으며, 각 GridView 행은 다른 UpdatePanel 컨트롤 안에 있는 중첩된 GridView 컨트롤을 포함하고 있습니다.
[실행화면] [소스보기]
안쪽의 GridView 컨트롤이 새로운 페이지로 표시될 때, 바깥쪽의 패널과 바깥쪽의 GridView 컨트롤의 다른 행들은 새로고침되지 않습니다. 바깥쪽의 GridView 컨트롤이 새로운 페이지로 표시될 때 바깥쪽의 패널과 중첩된 패널들은 모두 새로고침됩니다.
프로그래밍적으로 UpdatePanel을 새로고침하기
아래의 예제는 프로그래밍적으로 UpdatePanel 컨트로을 어떻게 새로고침하는 지를 보여줍니다. 이 예제에서, 페이지는 RegisterAsyncPostBackControl(Control)를 호출하는 트리거로 실행됩니다. 프로그래밍적으로 Update() 메소드를 호출하는 UpdatePanel 컨트롤을 사용하는 이 코드로 페이지를 새로고침할 수 있습니다.
[실행화면] [소스보기]
프로그래밍적으로 UpdatePanel을 만들기
페이지에 프로그래밍적으로 UpdatePanel 컨트롤을 추가하기 위해서 UpdatePanel 컨트롤의 새로운 인스턴스를 만듭니다. 그리고, ContentTemplateContainer 속성과 Add(Control) 메소드를 사용하여 컨트롤을 추가합니다. 직접 ContentTemplate 속성으로 컨트롤을 추가할 수는 없습니다.
UpdatePanel 컨트롤이 프로그래밍적으로 추가되었을 때, UpdatePanel 컨트롤이 트리거로써 사용될 수 있는 동일한 이름의 컨테이너에 있는 컨트롤에서만 포스트백됩니다.
아래의 예제는 어떻게 프로그래밍적으로 페이지에 UpdatePanel 컨트롤을 추가하는지를 보여줍니다. 예제는 ContentTemplateContainer 속성을 사용하여 UpdatePanel 컨트롤로 Label 컨트롤과 Button 컨트롤을 추가합니다. 기본적으로 ChildrenAsTriggers 속성이 true이기 때문에, 패널의 트리거로써 Button 컨트롤이 실행됩니다.
[실행화면] [소스보기]
UpdatePanel 컨트롤과 사용하지 못하는 컨트롤들
부분 페이지의 업데이트를 사용하지 못하는 ASP.NET 컨트롤들이 있기에 UpdatePanel 컨트롤 안에 사용할 수 없습니다.
TreeView와 Menu 컨트롤
웹 파트 컨트롤. 더 많은 정보는 ASP.NET Web Parts Controls를 보도록 하십시요.
비동기 포스트백의 일부분으로써 파일 업로드에 사용되는 FileUpload 컨트롤
EnableSortingAndPagingCallbacks 속성이 true로 설정된 GridView와 DetailView 컨트롤. 기본값은 false입니다.
수정할 수 있는 템플릿로 변환할 수 없는 컨텐츠를 가진 Login, PasswordRecovery, ChangePassword, CreateUserWizard 컨트롤들
Subsitution 컨트롤
BaseCompareValidator, BaseValidator, CompareValidator, CustomValidator, RangeValidator, RegularExpressionValidator, RequiredFieldValidator, ValidationSummary와 같은 Validation 컨트롤들
부분 페이지의 렌더링과 사용하지 못하는 컨트롤들은 UpdatePanel 컨트롤의 외부에서 사용될 수는 있습니다. 덧붙여서, 몇 가지 경우 부분 페이지의 업데이트와 사용하지 못하는 컨트롤들을 특정한 방법으로 만들어 사용할 수는 있습니다. 예를 들어, 만약 Login, ChangePassword, PasswordRecovery 컨트롤들의 컨텐츠를 템플릿으로 변환할 수 있다면, UpdatePanel 컨트롤의 안에 Login, ChangePassword, PasswordRecovery 컨트롤들을 사용할 수 있습니다. (만약, Visual Studio를 사용한다면 디자인 뷰에서 스마트 메뉴 명령 예를 들면 템플릿으로 변환 등을 사용하여 컨트롤들을 변환할 수 있습니다.) 이 컨트롤들을 수정 가능한 템플릿으로 변환하면, 유효성 컨트롤들은 페이지에서 명시적으로 마크업으로 정의된 컨트롤에서 사용됩니다. UpdatePanel 컨트롤과 사용할 수 있는 유효성을 만들기 위해서, EnableClientScript 속성을 false로 설정합니다. 이것은 브라우저에서 유효성 검사를 수행할 때 일반적으로 사용되는 클라이언트 스크립트에 접근하지 않게 합니다. 그 결과, 비동기 포스트백이 발생하는 동안 유효성은 서버에서 유효성 검사를 수행합니다. 그러나, UpdatePanel의 컨텐츠만이 새로고침되기 때문에, 유효성은 보통 클라이언트 스크립트에 의해 제공되는 직접적인 피드백의 일부분만을 제공할 수 있습니다.
UpdatePanel 컨트롤 안에서 FileUpload 컨트롤을 사용하기 위해서는, 패널의 PostBackTrigger에 의해 파일을 전송할 수 있도록 포스트백 컨트롤을 설정합니다.
다른 모든 컨트롤들은 UpdatePanel 컨트롤 안에서 동작합니다. 그러나, 어떠한 상황에서는 컨트롤은 UpdatePanel 컨트롤 안에서의 동작을 기대할 수 없습니다. 이 상황은 다음과 같습니다.
ClientScriptManager 컨트롤에 등록된 메소드들을 호출하는 스크립트인 경우
Write(String) 메소드를 호출하는 것과 같은 컨트롤의 렌더링동안 직접적으로 스크립트 또는 마크업을 렌더링하는 경우
만약 컨트롤이 ClientScriptManager 컨트롤에 등록된 메소드의 스크립트를 호출한다면, 대신 ScriptManager 컨트롤에 등록된 메소드의 스크립트에 대한 응답을 사용할 수 있습니다. 이 경우, 컨트롤은 UpdatePanel 컨트롤 안에서 동작할 것입니다.
코드 예제
다음은 어떻게 UpdatePanel 컨트롤을 만들고 사용하는지에 대한 예제가 포함된 섹션의 목록입니다.
클래스 참조
아래의 테이블에는 UpdatePanel 컨트롤의 주요한 서버 클래스들이 보여집니다.
포스팅을 마치며... ----------------------------------------------------------------------------
아, 역시 아무리 생각해도 번역은 OTL
글에 대한 내용은 http://www.neostyx.net/GrayRound/NXBlogPostView.aspx?postid=070405080805986&categoryname=ASP.NET+AJAX 를 눌러서 보시기 바랍니다.
포스트를 읽기에 앞서...
- 이 포스트는 영문으로 작성되어 제공되어진 것을 제가 제 나름대로 한글로 번역하였습니다.
- 직역보다는 의역에 충실하도록 노력을 하였으며, 충분하게 잘못된 번역이 있을 수 있습니다. 잘못된 번역 부분에 대해서는 덧글로 달아주시면 수정하도록 하겠습니다.
- 이 포스트에는 깔끔하게 번역되지 않은 부분이 있을 수 있습니다. 크게 양해해주시고, 영문 웹 페이지를 참조하시기 바라며, 영문 웹 페이지의 링크에 대한 경로는 필요하지 않은 이상 링크를 추가하지 않았습니다.
- 이 포스트는 단지 번역을 한 것 뿐이며, 모든 저작권에 대해서는 영문 웹 페이지에 명시된 곳에 있습니다.
UpdatePanel 컨트롤 개요
소개
ASP.NET UpdatePanel 컨트롤은 풍부하고 고객 중심인 웹 응용 프로그램을 만드는 것을 가능하게 합니다. UpdatePanel 컨트롤을 사용함으로 포스트백에 의한 전 페이지를 새로고침하는 것 대신 페이지 중 선택된 일부분만 새로고침을 할 수 있습니다. 이것은 페이지 중 일부분만 업데이트 작업을 수행하는 것을 의미합니다. ScriptManager 컨트롤과 하나 또는 그 이상의 UpdatePanel 컨트롤들이 포함된 웹 페이지는 고객측의 클라이언트 스크립트 없이도, 자동적으로 부분 페이지의 업데이트에 참여하게 됩니다.
이 토픽은 다음과 같은 정보를 포함하고 있습니다.
1. 시나리오
2. 배경
3. 코드 예제
4. 클래스 참조
시나리오
UpdatePanel 컨트롤은 웹 페이지가 최종 사용자에게 더 양방향적으로 보이게 만들어야 하는 복잡한 클라이언트 행위를 가진 웹 페이지를 개발하는 데 도움을 주는 서버 컨트롤입니다. 서버와 클라이언트 사이에서 웹 페이지의 특정 부분을 업데이트하기 위해서 보통 깊은 수준의 ECMAScript(Javascript)를 요구하였습니다. 그러나, UpdatePanel 컨트롤을 사용함으로 어떠한 클라이언트 스크립트를 작성할 필요 없이 웹 페이지에서 부분 페이지만 업데이트하는 것이 가능하게 되었습니다. 원한다면, 클라이언트의 사용자 환경을 향상시키기 위해 일반적인 클라이언트 스크립트를 추가할 수도 있습니다. UpdatePanel 컨트롤을 사용할 때, 페이지의 행동은 브라우저에 독립적이고, 클라이언트와 서버 사이에 전송되는 데이터의 양을 잠재적으로 감소시킬 수 있습니다.
배경
UpdatePanel 컨트롤은 전체 웹 페이지의 새로고침 없이 업데이트될 수 있는 특정 범위에서 작업합니다. 이 프로세스는 ScriptManager 서버 컨트롤과 PageRequestManager 클래스에 의해 공동으로 처리됩니다. 부분 페이지의 업데이트가 가능할 때, 컨트롤들은 비동기적으로 서버로 게시됩니다. 비동기적인 포스트백 행동은 페이지와 컨트롤의 생명 주기가 완료될 때의 통상적인 포스트백과 같습니다. 그러나, 비동기 포스트백에서, 페이지에서 UpdatePanel 컨트롤에 둘러쌓인 페이지의 범위만 업데이트됩니다. 서버는 브라우저로 단지 영향받은 요소들만을 HTML 마크업 형태로 보냅니다. 브라우저에서, PageRequestManager 클래스는 업데이트된 마크업으로 기존의 HTML을 교체하는 작업인 Document Object Model(DOM) 조정을 수행합니다. 아래의 그림은 첫번째에 페이지를 로드할 때와 그 다음 비동기 포스트백이 UpdatePanel 컨트롤의 내용을 새로고침하는 것을 보여줍니다.
그림 1. Partial-page rendering overview
부분 페이지의 업데이트를 가능하게 하기
UpdatePanel 컨트롤은 웹 페이지에서 ScriptManager 컨트롤을 필요로 합니다. 기본적으로, 부분 페이지의 업데이트는 ScriptManager 컨트롤의 EnablePartialRendering 속성이 기본값인 true이기 때문에 가능합니다. 아래의 예제는 페이지에 ScriptManager 컨트롤과 UpdatePanel 컨트롤을 정의하는 것을 보여줍니다. UpdatePanel 컨트롤은 클릭했을 때 패널 안에 있는 내용이 새로고침되는 Button 컨트롤을 포함하고 있습니다. 기본적으로 ChildrenAsTriggers 속성은 true입니다. 그러므로, Button 컨트롤은 비동기 포스트백 컨트롤인 것처럼 행동합니다.
[실행화면] [소스보기]
UpdatePanel 컨트롤의 컨텐츠를 열거하기
UpdatePanel 선언적인 컨트롤 또는 ContentTemplate 속성을 사용한 디자이너에서 컨텐츠를 추가합니다. 이 속성은 <ContentTemplate> 마크업 태그로써 표현됩니다. 프로그래밍적으로 컨텐츠를 추가하기 위해서는 ContentTemplateContainer 속성을 사용해야 합니다.
하나 또는 그 이상의 UpdatePanel 컨트롤들이 포함된 웹 페이지가 첫번째 렌더링될 때, UpdatePanel의 모든 컨텐츠들은 렌더링되고 브라우저로 보내지게 됩니다. 비동기 포스트백에 이어서, 개별적 UpdatePanel 컨트롤들의 컨텐츠가 업데이트될 것입니다. 포스트백을 유발하는 요소들을 가진 패널의 세팅과 각 패널에 명시된 코드에 의존되어 업데이트 됩니다.
UpdatePanel Triggers 열거하기
기본적으로, UpdatePanel 컨트롤 안에 있는 어떠한 포스트백 컨트롤은 비동기 포스트백을 유발하고 패널의 컨텐츠를 새로고침합니다. 그러나, 또한 UpdatePanel 컨트롤을 새로고침하는 페이지상의 다른 컨트롤들을 구성할 수 있습니다. 그것은 UpdatePanel의 트리거를 정의함으로써 사용할 수 있습니다. 트리거는 패널을 업데이트하기 위해 유발시키는 포스트백 컨트롤과 이벤트를 정의합니다. 트리거 컨트롤의 명시된 이벤트가 발생할 때(예를 들어, Button의 Click 이벤트), 업데이트 패널은 새로고침됩니다.
아래의 예제는 UpdatePanel 컨트롤에서 트리거를 어떻게 정의하는지를 보여줍니다.
[실행화면] [소스보기]
트리거는 UpdatePanel 컨트롤의 <Triggers> 요소안에 <asp:AsyncPostBackTrigger>로 정의됩니다. (만약, Visual Studio에서 페이지를 수정한다면, UpdatePanelTrigger Collection Editor 대화 상자를 사용하여 트리거를 만들 수 있습니다.)
트리거의 컨트롤 이벤트는 선택적입니다. 만약, 어떠한 이벤트도 명시되지 않으면, 트리거 이벤트는 컨트롤의 기본 이벤트가 됩니다. 예를 들어 Button 컨트롤의 기본 이벤트는 Click 이벤트입니다.
어떻게 UpdatePanel 컨트롤들이 새로고침되는가?
아래의 리스트는 부분 페이지의 렌더링 동안 패널의 컨텐츠가 업데이트 될 때 결정하는 Updatepanel 컨트롤의 속성 설정을 묘사한 것입니다.
만약 ChildrenAsTriggers 속성이 false로 설정되고 UpdateMode 속성이 Always로 설정되면, 예외가 던져집니다. ChildrenAsTriggers 속성은 UpdateMode 속성이 Conditional 로 설정되었을 때만 사용할 수 있습니다.
마스터 페이지에서 UpdatePanel 컨트롤들을 사용하기
마스터 페이지에서 UpdatePanel 컨트롤을 사용하기 위해서는 어떻게 ScriptManager 컨트롤을 포함할 것인지를 결정해야 합니다. 만약, 마스터 페이지에 ScriptManager 컨트롤을 포함시킨다면, 모든 컨텐츠 페이지들에 ScriptManager 컨트롤로써 실행될 수 있습니다. (만약 컨텐츠 페이지에서 선언적으로 스크립트들 또는 서비스들을 등록하기를 원한다면, 컨텐츠 페이지에 ScriptManagerProxy 컨트롤을 추가해야 합니다.)
만약, 마스터 페이지가 ScriptManager 컨트롤을 포함하지 않는다면, UpdatePanel 컨트롤을 포함하는 각 컨텐츠 페이지마다 개별적으로 ScriptManager 컨트롤들을 추가해야 합니다. 이 디자인 선택은 어떻게 응용프로그램에서 클라이언트 스크립트를 관리하는가에 의존되어 있습니다. 어떻게 클라이언트 스크립트를 관리하는지에 대한 더 많은 정보는 ScriptManager Control Overview를 보도록 하십시요. 마스터 페이지에 대한 더 많은 정보는 ASP.NET Master Pages Overview를 보도록 하십시요.
만약, 마스터 페이지에 ScriptManager 컨트롤이 있고 컨텐츠 페이지의 부분 페이지을 렌더링하는 기능이 필요하지 않는다면, 컨텐츠 페이지에서 프로그래밍적으로 ScriptManager 컨트롤의 EnablePartialRendering 속성을 false로 설정합니다.
아래의 예제는 마스터 페이지와 컨텐츠 페이지에 있는 ScriptManager 컨트롤의 마크업을 보여줍니다. 이 예제에서, LastUpdate라는 속성은 마스터 페이지에 정의되어 있고, UpdatePanel 컨트롤의 안에서 참조하게 되어 있습니다.
[실행화면] [소스보기]
중첩된 UpdatePanel 컨트롤들을 사용하기
UpdatePanel 컨트롤들은 중첩될 수 있습니다. 만약 부모 패널이 새로고침된다면, 모든 중첩된 패널들 또한 새로고침됩니다.
아래의 예제는 다른 UpdatePanel 컨트롤 안에 있는 UpdatePanel 컨트롤이 정의된 마크업을 보여줍니다. 부모 패널 트리거에 있는 Button은 부모와 자식의 패널의 컨텐츠를 업데이트합니다. 자식 패널 트리거에 있는 Button은 단지 자식 패널의 컨텐츠만을 업데이트 합니다.
[실행화면] [소스보기]
아래의 예제는 GridView 컨트롤에서 중첩된 UpdatePanel 컨트롤을 보여줍니다. GridView 컨트롤은 UpdatePanel 컨트롤 안에 있으며, 각 GridView 행은 다른 UpdatePanel 컨트롤 안에 있는 중첩된 GridView 컨트롤을 포함하고 있습니다.
[실행화면] [소스보기]
안쪽의 GridView 컨트롤이 새로운 페이지로 표시될 때, 바깥쪽의 패널과 바깥쪽의 GridView 컨트롤의 다른 행들은 새로고침되지 않습니다. 바깥쪽의 GridView 컨트롤이 새로운 페이지로 표시될 때 바깥쪽의 패널과 중첩된 패널들은 모두 새로고침됩니다.
프로그래밍적으로 UpdatePanel을 새로고침하기
아래의 예제는 프로그래밍적으로 UpdatePanel 컨트로을 어떻게 새로고침하는 지를 보여줍니다. 이 예제에서, 페이지는 RegisterAsyncPostBackControl(Control)를 호출하는 트리거로 실행됩니다. 프로그래밍적으로 Update() 메소드를 호출하는 UpdatePanel 컨트롤을 사용하는 이 코드로 페이지를 새로고침할 수 있습니다.
[실행화면] [소스보기]
프로그래밍적으로 UpdatePanel을 만들기
페이지에 프로그래밍적으로 UpdatePanel 컨트롤을 추가하기 위해서 UpdatePanel 컨트롤의 새로운 인스턴스를 만듭니다. 그리고, ContentTemplateContainer 속성과 Add(Control) 메소드를 사용하여 컨트롤을 추가합니다. 직접 ContentTemplate 속성으로 컨트롤을 추가할 수는 없습니다.
UpdatePanel 컨트롤이 프로그래밍적으로 추가되었을 때, UpdatePanel 컨트롤이 트리거로써 사용될 수 있는 동일한 이름의 컨테이너에 있는 컨트롤에서만 포스트백됩니다.
아래의 예제는 어떻게 프로그래밍적으로 페이지에 UpdatePanel 컨트롤을 추가하는지를 보여줍니다. 예제는 ContentTemplateContainer 속성을 사용하여 UpdatePanel 컨트롤로 Label 컨트롤과 Button 컨트롤을 추가합니다. 기본적으로 ChildrenAsTriggers 속성이 true이기 때문에, 패널의 트리거로써 Button 컨트롤이 실행됩니다.
[실행화면] [소스보기]
UpdatePanel 컨트롤과 사용하지 못하는 컨트롤들
부분 페이지의 업데이트를 사용하지 못하는 ASP.NET 컨트롤들이 있기에 UpdatePanel 컨트롤 안에 사용할 수 없습니다.
부분 페이지의 렌더링과 사용하지 못하는 컨트롤들은 UpdatePanel 컨트롤의 외부에서 사용될 수는 있습니다. 덧붙여서, 몇 가지 경우 부분 페이지의 업데이트와 사용하지 못하는 컨트롤들을 특정한 방법으로 만들어 사용할 수는 있습니다. 예를 들어, 만약 Login, ChangePassword, PasswordRecovery 컨트롤들의 컨텐츠를 템플릿으로 변환할 수 있다면, UpdatePanel 컨트롤의 안에 Login, ChangePassword, PasswordRecovery 컨트롤들을 사용할 수 있습니다. (만약, Visual Studio를 사용한다면 디자인 뷰에서 스마트 메뉴 명령 예를 들면 템플릿으로 변환 등을 사용하여 컨트롤들을 변환할 수 있습니다.) 이 컨트롤들을 수정 가능한 템플릿으로 변환하면, 유효성 컨트롤들은 페이지에서 명시적으로 마크업으로 정의된 컨트롤에서 사용됩니다. UpdatePanel 컨트롤과 사용할 수 있는 유효성을 만들기 위해서, EnableClientScript 속성을 false로 설정합니다. 이것은 브라우저에서 유효성 검사를 수행할 때 일반적으로 사용되는 클라이언트 스크립트에 접근하지 않게 합니다. 그 결과, 비동기 포스트백이 발생하는 동안 유효성은 서버에서 유효성 검사를 수행합니다. 그러나, UpdatePanel의 컨텐츠만이 새로고침되기 때문에, 유효성은 보통 클라이언트 스크립트에 의해 제공되는 직접적인 피드백의 일부분만을 제공할 수 있습니다.
UpdatePanel 컨트롤 안에서 FileUpload 컨트롤을 사용하기 위해서는, 패널의 PostBackTrigger에 의해 파일을 전송할 수 있도록 포스트백 컨트롤을 설정합니다.
다른 모든 컨트롤들은 UpdatePanel 컨트롤 안에서 동작합니다. 그러나, 어떠한 상황에서는 컨트롤은 UpdatePanel 컨트롤 안에서의 동작을 기대할 수 없습니다. 이 상황은 다음과 같습니다.
만약 컨트롤이 ClientScriptManager 컨트롤에 등록된 메소드의 스크립트를 호출한다면, 대신 ScriptManager 컨트롤에 등록된 메소드의 스크립트에 대한 응답을 사용할 수 있습니다. 이 경우, 컨트롤은 UpdatePanel 컨트롤 안에서 동작할 것입니다.
코드 예제
다음은 어떻게 UpdatePanel 컨트롤을 만들고 사용하는지에 대한 예제가 포함된 섹션의 목록입니다.
- UpdatePanel 컨트롤의 소개
- 다중 UpdatePanel 컨트롤을 가진 단순한 ASP.NET 페이지 만들기
- 데이터바운드 컨트롤을 가진 UpdatePanel 컨트롤 사용하기
- 마스터 페이지에서 UpdatePanel 컨트롤 사용하기
- 사용자 컨트롤에서 UpdatePanel 컨트롤 사용하기
- 웹 서비스에서 UpdatePanel 컨트롤 사용하기
- UpdatePanel 컨트롤의 에러 제어 수정하기
- PageRequestManager 이벤트 작업하기
- 움직이는 UpdatePanel 컨트롤들
- 비동기 포스트백을 취소하기
- 정의된 비동기 포스트백을 우선적으로 처리하기
클래스 참조
아래의 테이블에는 UpdatePanel 컨트롤의 주요한 서버 클래스들이 보여집니다.
|
클래스 |
설명 |
|---|---|
| 부분 페이지 업데이트에 참여할 수 있는 웹 페이지 일부분에 명시된 서버 컨트롤 | |
| 부분 페이지 렌더링을 관리하는 서버 컨트롤입니다. ScriptManager 컨트롤은 브라우저로 보내기 이한 스크립트 컴포넌트들을 처리합니다. 또한, 페이지가 렌더링될 때 명시된 범위내에서 렌더링하기 위해서 페이지를 오버라이드합니다. | |
| 스크립트와 웹 서비스 참조를 추가하기 위한 중첩된 컴포넌트(예를 들어 컨텐츠 페이지 또는 사용자 컨트롤)들을 가능하게 하는 서버 컨트롤입니다. 이 컨트롤은 만약 부모 요소에 이미 ScriptManager 컨트롤이 포함되어 있다면 유용하게 사용할 수 있습니다. | |
| 브라우저에서 부분 페이지 렌더링에 협조하는 Microsoft AJAX 라이브러리에 있는 클래스입니다. PageRequestManager 클래스는 비동기적으로 서버와 정보를 교환하고 일반적 클라이언트 스크립트 개발을 위한 이벤트와 메소드를 드러내게 합니다. |
포스팅을 마치며... ----------------------------------------------------------------------------
아, 역시 아무리 생각해도 번역은 OTL
