ASP.NET AJAX를 사용한 부분 페이지 업데이트 이해
아마도 ASP.NET AJAX 확장의 가장 눈에 띄는 기능은 코드 변경 및 최소한의 태그 변경 없이 서버에 대한 전체 포스트백을 수행하지 않고 부분 또는 증분 페이지 업데이트를 수행하는 기능일 수 있습니다. 장점은 광범위합니다. 멀티미디어의 상태(예: Adobe Flash 또는 Windows Media)는 변경되지 않고 대역폭 비용이 절감되며 클라이언트는 일반적으로 포스트백과 연결된 깜박임이 발생하지 않습니다.
소개
Microsoft의 ASP.NET 기술은 개체 지향적이고 이벤트 기반 프로그래밍 모델을 제공하며 컴파일된 코드의 이점과 결합합니다. 그러나 서버 쪽 처리 모델에는 기술에 내재된 몇 가지 단점이 있습니다.
- 페이지 업데이트에는 페이지 새로 고침이 필요한 서버 왕복이 필요합니다.
- 왕복은 Javascript 또는 기타 클라이언트 쪽 기술(예: Adobe Flash)에서 생성된 효과를 유지하지 않습니다.
- 포스트백 중에 Microsoft Internet Explorer 이외의 브라우저는 스크롤 위치 복원을 자동으로 지원하지 않습니다. 인터넷 Explorer 페이지가 새로 고쳐지면서 여전히 깜박임이 있습니다.
- 포스트백은 특히 GridView 컨트롤 또는 반복기와 같은 컨트롤을 처리할 때 __VIEWSTATE 양식 필드가 증가할 수 있으므로 많은 양의 대역폭을 포함할 수 있습니다.
- JavaScript 또는 기타 클라이언트 쪽 기술을 통해 웹 서비스에 액세스하기 위한 통합 모델은 없습니다.
Microsoft의 ASP.NET AJAX 확장을 입력합니다. 동기J avaScript AndX ML을 의미하는 AJAX는 Microsoft AJAX Framework를 구성하는 서버 쪽 코드와 Microsoft AJAX 스크립트 라이브러리라는 스크립트 구성 요소로 구성된 플랫폼 간 JavaScript를 통해 증분 페이지 업데이트를 제공하는 통합 프레임워크입니다. ASP.NET AJAX 확장은 JavaScript를 통해 ASP.NET Web Services에 액세스하기 위한 플랫폼 간 지원도 제공합니다.
이 백서에서는 ScriptManager 구성 요소, UpdatePanel 컨트롤 및 UpdateProgress 컨트롤을 포함하는 ASP.NET AJAX 확장의 부분 페이지 업데이트 기능을 검토하고 활용해야 하거나 사용하지 않아야 하는 시나리오를 고려합니다.
이 백서는 Visual Studio 2008의 베타 2 릴리스와 .NET Framework 3.5를 기반으로 하며, ASP.NET AJAX 확장을 기본 클래스 라이브러리(이전에는 ASP.NET 2.0에 사용할 수 있는 추가 기능 구성 요소였던)에 통합합니다. 또한 이 백서에서는 Visual Web Developer Express Edition이 아닌 Visual Studio 2008을 사용하고 있다고 가정합니다. 참조되는 일부 프로젝트 템플릿은 Visual Web Developer Express 사용자가 사용할 수 없습니다.
부분 페이지 업데이트
아마도 ASP.NET AJAX 확장의 가장 눈에 띄는 기능은 코드 변경 및 최소한의 태그 변경 없이 서버에 대한 전체 포스트백을 수행하지 않고 부분 또는 증분 페이지 업데이트를 수행하는 기능일 수 있습니다. 장점은 광범위합니다. 멀티미디어의 상태(예: Adobe Flash 또는 Windows Media)는 변경되지 않고 대역폭 비용이 절감되며 클라이언트는 일반적으로 포스트백과 연결된 깜박임이 발생하지 않습니다.
부분 페이지 렌더링을 통합하는 기능은 프로젝트에 대한 최소한의 변경으로 ASP.NET 통합됩니다.
연습: 부분 렌더링을 기존 프로젝트에 통합
- Microsoft Visual Studio 2008에서 파일-> 새> 웹 사이트로 이동하고 대화 상자에서 ASP.NET 웹 사이트를 선택하여 새 ASP.NET 웹 사이트 프로젝트를 만듭니다. 원하는 대로 이름을 지정할 수 있으며 파일 시스템 또는 IIS(인터넷 정보 서비스)에 설치할 수 있습니다.
- 기본 ASP.NET 태그(서버 쪽 양식 및 지시문)가 있는 빈 기본 페이지가
@Page표시됩니다. 라는Label1레이블을 삭제하고 Form 요소 내의 페이지에 호출Button1된 Button을 놓습니다. 텍스트 속성을 원하는 대로 설정할 수 있습니다. - 디자인 보기에서 두 번 클릭하여
Button1코드 숨김 이벤트 처리기를 생성합니다. 이 이벤트 처리기 내에서 단추를 클릭했습니다!로 설정합니다Label1.Text. .
목록 1: 부분 렌더링을 사용하도록 설정하기 전에 default.aspx에 대한 태그
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="This is a label!"></asp:Label>
<asp:Button ID="Button1" runat="server" Text="Click Me" OnClick="Button1_Click" />
</div>
</form>
</body>
</html>
목록 2: default.aspx.cs의 Codebehind(트리밍)
public partial class _Default : System.Web.UI.Page
{
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "You clicked the button!";
}
}
- F5 키를 눌러 웹 사이트를 시작합니다. Visual Studio에서 디버깅을 사용하도록 설정하는 web.config 파일을 추가하라는 메시지가 표시됩니다. 이렇게 하세요. 단추를 클릭하면 페이지가 새로 고쳐서 레이블의 텍스트를 변경하고 페이지가 다시 그려지면 약간 깜박입니다.
- 브라우저 창을 닫은 후 Visual Studio 및 태그 페이지로 돌아갑니다. Visual Studio 도구 상자에서 아래로 스크롤하고 AJAX 확장 레이블이 지정된 탭을 찾습니다. 이전 버전의 AJAX 또는 Atlas 확장을 사용 중이므로 이 탭이 없는 경우 이 백서 뒷부분에 있는 AJAX 확장 도구 상자 항목을 등록하기 위한 연습을 참조하거나 웹 사이트에서 다운로드할 수 있는 Windows Installer를 사용하여 현재 버전을 설치합니다.
알려진 문제:visual Studio 2008을 ASP.NET 2.0 AJAX 확장과 함께 이미 설치된 Visual Studio 2005가 있는 컴퓨터에 설치하는 경우 Visual Studio 2008은 AJAX 확장 도구 상자 항목을 가져옵니다. 구성 요소의 도구 설명을 검사하여 이러한 경우인지 여부를 확인할 수 있습니다. 버전 3.5.0.0을 말해야 합니다. 버전 2.0.0.0이면 이전 도구 상자 항목을 가져왔으며 Visual Studio에서 도구 상자 항목 선택 대화 상자를 사용하여 수동으로 가져와야 합니다. 디자이너를 통해 버전 2 컨트롤을 추가할 수 없습니다.
태그가
<asp:Label>시작되기 전에 공백 줄을 만들고 도구 상자에서 UpdatePanel 컨트롤을 두 번 클릭합니다. 페이지 맨 위에 새@Register지시문이 포함되어 System.Web.UI 네임스페이스 내의 컨트롤을 접두사를 사용하여asp:가져와야 함을 나타냅니다.단추 요소의 끝을 지나 닫
</asp:UpdatePanel>는 태그를 끌어서 레이블 및 단추 컨트롤이 래핑된 상태에서 요소가 잘 구성되도록 합니다.여
<asp:UpdatePanel>는 태그 후에 새 태그를 열기 시작합니다. IntelliSense는 두 가지 옵션을 묻는 메시지를 표시합니다. 이 경우 태그를 만듭니다<ContentTemplate>. 태그가 올바른 형식이 되도록 레이블 및 단추 주위에 이 태그를 래핑해야 합니다.
- 요소 내의
<form>아무 곳이나 도구 상자에서 항목을 두 번 클릭하여ScriptManagerScriptManager 컨트롤을 포함합니다. - 특성이
<asp:ScriptManager>포함되도록 태그를 편집합니다EnablePartialRendering= true.
목록 3: 부분 렌더링이 사용하도록 설정된 default.aspx에 대한 태그
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TagPrefix="asp" %>
<!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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager EnablePartialRendering="true"
ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server"
Text="This is a label!"></asp:Label>
<asp:Button ID="Button1" runat="server"
Text="Click Me" OnClick="Button1_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
web.config 파일을 엽니다. Visual Studio에서 System.Web.Extensions.dll 대한 컴파일 참조를 자동으로 추가했습니다.
Visual Studio 2008의 새로운 기능: ASP.NET 웹 사이트 프로젝트 템플릿과 함께 제공되는 web.config ASP.NET AJAX 확장에 필요한 모든 참조를 자동으로 포함하며 추가 기능을 사용하도록 댓글을 달지 않을 수 있는 구성 정보의 주석 처리된 섹션을 포함합니다. Visual Studio 2005에는 ASP.NET 2.0 AJAX 확장이 설치되었을 때 비슷한 템플릿이 있었습니다. 그러나 Visual Studio 2008에서 AJAX 확장은 기본적으로 옵트아웃됩니다(즉, 기본적으로 참조되지만 참조로 제거할 수 있음).
- F5 키를 눌러 웹 사이트를 시작합니다. 부분 렌더링을 지원하기 위해 소스 코드 변경이 필요하지 않은 방법- 태그만 변경되었습니다.
웹 사이트를 시작할 때 단추를 클릭하면 깜박임이 없고 페이지 스크롤 위치가 변경되지 않으므로 부분 렌더링이 활성화된 것을 볼 수 있습니다(이 예제에서는 이를 보여주지 않음). 단추를 클릭한 후 렌더링된 페이지의 원본을 살펴보면 원래 레이블 텍스트가 원본 태그의 일부이며 레이블이 JavaScript를 통해 변경되었음을 확인합니다.
Visual Studio 2008은 ASP.NET AJAX-Enabled 웹 사이트에 대해 미리 정의된 템플릿과 함께 제공되지 않습니다. 그러나 Visual Studio 2005 및 ASP.NET 2.0 AJAX 확장이 설치된 경우 Visual Studio 2005 내에서 이러한 템플릿을 사용할 수 있었습니다. 따라서 웹 사이트를 구성하고 AJAX-Enabled 웹 사이트 템플릿으로 시작하는 것이 더 쉬울 수 있습니다. 템플릿에는 완전히 구성된 web.config 파일(Web Services 액세스 및 JSON serialization - JavaScript 개체 표기법을 포함하여 모든 ASP.NET AJAX 확장 지원)이 포함되어야 하며 기본적으로 기본 Web Forms 페이지 내에 UpdatePanel 및 ContentTemplate이 포함되어야 합니다. 이 기본 페이지에서 부분 렌더링을 사용하도록 설정하는 것은 이 연습의 10단계를 다시 검토하고 컨트롤을 페이지에 삭제하는 것만큼 간단합니다.
ScriptManager 컨트롤
ScriptManager 컨트롤 참조
Markup-Enabled 속성:
| 속성 이름 | Type | 설명 |
|---|---|---|
| AllowCustomErrors-Redirect | Bool | web.config 파일의 사용자 지정 오류 섹션을 사용하여 오류를 처리할지 여부를 지정합니다. |
| AsyncPostBackError-Message | 문자열 | 오류가 발생하는 경우 클라이언트에 전송된 오류 메시지를 가져오거나 설정합니다. |
| AsyncPostBack-Timeout | Int32 | 클라이언트가 비동기 요청이 완료되기를 기다려야 하는 기본 시간을 가져오거나 설정합니다. |
| EnableScript-Globalization | Bool | 스크립트 세계화를 사용할지 여부를 가져오거나 설정합니다. |
| EnableScript-Localization | Bool | 스크립트 지역화를 사용할지 여부를 가져오거나 설정합니다. |
| ScriptLoadTimeout | Int32 | 클라이언트에 스크립트를 로드하는 데 허용되는 시간(초)을 결정합니다. |
| ScriptMode | 열거형(자동, 디버그, 릴리스, 상속) | 스크립트의 릴리스 버전을 렌더링할지 여부를 가져오거나 설정합니다. |
| ScriptPath | 문자열 | 클라이언트로 보낼 스크립트 파일의 위치에 대한 루트 경로를 가져오거나 설정합니다. |
Code-Only 속성:
| 속성 이름 | Type | 설명 |
|---|---|---|
| AuthenticationService | AuthenticationService-Manager | 클라이언트로 전송될 ASP.NET 인증 서비스 프록시에 대한 세부 정보를 가져옵니다. |
| IsDebuggingEnabled | Bool | 스크립트 및 코드 디버깅을 사용할 수 있는지 여부를 가져옵니다. |
| IsInAsyncPostback | Bool | 페이지가 현재 비동기 사후 요청인지 여부를 가져옵니다. |
| ProfileService | ProfileService-Manager | 클라이언트로 전송될 ASP.NET 프로파일링 서비스 프록시에 대한 세부 정보를 가져옵니다. |
| 스크립트 | 컬렉션<스크립트 참조> | 클라이언트로 전송될 스크립트 참조 컬렉션을 가져옵니다. |
| 서비스 | Collection<Service-Reference> | 클라이언트로 전송될 웹 서비스 프록시 참조의 컬렉션을 가져옵니다. |
| SupportsPartialRendering | Bool | 현재 클라이언트가 부분 렌더링을 지원하는지 여부를 가져옵니다. 이 속성이 false를 반환하면 모든 페이지 요청이 표준 포스트백이 됩니다. |
공용 코드 메서드:
| 메서드 이름 | Type | 설명 |
|---|---|---|
| SetFocus(string) | Void | 요청이 완료되면 클라이언트의 포커스를 특정 컨트롤로 설정합니다. |
태그 하위 항목:
| Tag | 설명 |
|---|---|
| <AuthenticationService> | ASP.NET 인증 서비스에 대한 프록시에 대한 세부 정보를 제공합니다. |
| <ProfileService> | ASP.NET 프로파일링 서비스에 대한 프록시에 대한 세부 정보를 제공합니다. |
| <스크립트> | 추가 스크립트 참조를 제공합니다. |
| <asp:ScriptReference> | 특정 스크립트 참조를 표시합니다. |
| <서비스> | 프록시 클래스가 생성되는 추가 웹 서비스 참조를 제공합니다. |
| <asp:ServiceReference> | 특정 웹 서비스 참조를 표시합니다. |
ScriptManager 컨트롤은 ASP.NET AJAX 확장의 핵심입니다. 스크립트 라이브러리(광범위한 클라이언트 쪽 스크립트 유형 시스템 포함)에 대한 액세스를 제공하고, 부분 렌더링을 지원하며, 추가 ASP.NET 서비스(예: 인증 및 프로파일링, 기타 웹 서비스)에 대한 광범위한 지원을 제공합니다. ScriptManager 컨트롤은 클라이언트 스크립트에 대한 세계화 및 지역화 지원도 제공합니다.
대체 및 추가 스크립트 제공
Microsoft ASP.NET 2.0 AJAX 확장에는 참조된 어셈블리에 포함된 리소스로 디버그 및 릴리스 버전 모두에 전체 스크립트 코드가 포함되어 있지만 개발자는 ScriptManager를 사용자 지정된 스크립트 파일로 리디렉션하고 필요한 추가 스크립트를 등록할 수 있습니다.
일반적으로 포함된 스크립트(예: Sys.WebForms 네임스페이스 및 사용자 지정 입력 시스템을 지원하는 스크립트)에 대한 ResolveScriptReference 기본 바인딩을 재정의하려면 ScriptManager 클래스의 이벤트에 등록할 수 있습니다. 이 메서드가 호출되면 이벤트 처리기는 해당 스크립트 파일의 경로를 변경할 수 있습니다. 그러면 스크립트 관리자가 다른 또는 사용자 지정된 스크립트 복사본을 클라이언트에 보냅니다.
또한 스크립트 참조(클래스로 ScriptReference 표시됨)는 프로그래밍 방식으로 또는 태그를 통해 포함할 수 있습니다. 이렇게 하려면 프로그래밍 방식으로 컬렉션을 수정 ScriptManager.Scripts 하거나 ScriptManager 컨트롤의 첫 번째 수준 자식인 태그 아래에 <Scripts> 태그를 포함합니다<asp:ScriptReference>.
UpdatePanels에 대한 사용자 지정 오류 처리
업데이트는 UpdatePanel 컨트롤에서 지정한 트리거에 의해 처리되지만 오류 처리 및 사용자 지정 오류 메시지에 대한 지원은 페이지의 ScriptManager 컨트롤 instance 의해 처리됩니다. 이 작업은 이벤트 를 AsyncPostBackError페이지에 노출하여 사용자 지정 예외 처리 논리를 제공할 수 있습니다.
AsyncPostBackError 이벤트를 사용하여 속성을 지정 AsyncPostBackErrorMessage 하면 콜백이 완료될 때 경고 상자가 발생할 수 있습니다.
기본 경고 상자를 사용하는 대신 클라이언트 쪽 사용자 지정도 가능합니다. instance 기본 브라우저 모달 대화 상자 대신 사용자 지정된 <div> 요소를 표시할 수 있습니다. 이 경우 클라이언트 스크립트에서 오류를 처리할 수 있습니다.
목록 5: 사용자 지정 오류를 표시하는 클라이언트 쪽 스크립트
<script type= text/javascript >
<!--
Sys.WebForms.PageRequestManager.getInstance().add_EndRequest(Request_End);
function Request_End(sender, args)
{
if (args.get_error() != undefined)
{
var errorMessage = ;
if (args.get_response().get_statusCode() == 200 )
{
errorMessage = args.get_error().message;
}
else
{
// the server wasn't the problem...
errorMessage = An unknown error occurred... ;
}
// do something with the errorMessage here.
// now make sure the system knows we handled the error.
args.set_errorHandled(true);
}
}
// -->
</script>
간단히 말해서 위의 스크립트는 비동기 요청이 완료된 경우 클라이언트 쪽 AJAX 런타임에 콜백을 등록합니다. 그런 다음 오류가 보고되었는지 여부를 확인하고, 오류가 보고되면 세부 정보를 처리하고 마지막으로 런타임에 오류가 사용자 지정 스크립트에서 처리되었음을 나타냅니다.
세계화 및 지역화 지원
ScriptManager 컨트롤은 스크립트 문자열 및 사용자 인터페이스 구성 요소의 지역화를 광범위하게 지원합니다. 그러나 해당 항목은 이 백서의 scope 벗어났습니다. 자세한 내용은 백서, ASP.NET AJAX 확장의 세계화 지원을 참조하세요.
UpdatePanel 컨트롤
UpdatePanel 컨트롤 참조
Markup-Enabled 속성:
| 속성 이름 | Type | 설명 |
|---|---|---|
| ChildrenAsTriggers | bool | 자식 컨트롤이 포스트백 시 새로 고침을 자동으로 호출할지 여부를 지정합니다. |
| RenderMode | enum(Block, Inline) | 콘텐츠를 시각적으로 표시하는 방법을 지정합니다. |
| UpdateMode | enum(Always, Conditional) | 부분 렌더링 중에 UpdatePanel이 항상 새로 고쳐지는지 또는 트리거가 적중될 때만 새로 고쳐지는지 여부를 지정합니다. |
Code-Only 속성:
| 속성 이름 | Type | 설명 |
|---|---|---|
| IsInPartialRendering | bool | UpdatePanel이 현재 요청에 대한 부분 렌더링을 지원하는지 여부를 가져옵니다. |
| ContentTemplate | Itemplate | 업데이트 요청에 대한 태그 템플릿을 가져옵니다. |
| ContentTemplateContainer | 제어 | 업데이트 요청에 대한 프로그래밍 방식 템플릿을 가져옵니다. |
| 트리거 | UpdatePanel- TriggerCollection | 현재 UpdatePanel과 연결된 트리거 목록을 가져옵니다. |
공용 코드 메서드:
| 메서드 이름 | Type | 설명 |
|---|---|---|
| Update() | Void | 지정된 UpdatePanel을 프로그래밍 방식으로 업데이트. 서버 요청이 달리 트리거되지 않은 UpdatePanel의 부분 렌더링을 트리거할 수 있도록 허용합니다. |
태그 하위 항목:
| Tag | 설명 |
|---|---|
| <ContentTemplate> | 부분 렌더링 결과를 렌더링하는 데 사용할 태그를 지정합니다. asp:UpdatePanel>의 <자식입니다. |
| <트리거> | 이 UpdatePanel 업데이트와 관련된 n 개의 컨트롤 컬렉션을 지정합니다. asp:UpdatePanel>의 <자식입니다. |
| <asp:AsyncPostBackTrigger> | 지정된 UpdatePanel에 대한 부분 페이지 렌더링을 호출하는 트리거를 지정합니다. 이는 해당 UpdatePanel의 하위 항목으로 컨트롤일 수도 있으며 그렇지 않을 수도 있습니다. 이벤트 이름으로 세분화됩니다. 트리거의 <자식입니다>. |
| <asp:PostBackTrigger> | 전체 페이지를 새로 고치는 컨트롤을 지정합니다. 이는 해당 UpdatePanel의 하위 항목으로 컨트롤일 수도 있으며 그렇지 않을 수도 있습니다. 개체에 세분화됩니다. 트리거의 <자식입니다>. |
컨트롤은 UpdatePanel AJAX 확장의 부분 렌더링 기능에 참여할 서버 쪽 콘텐츠를 구분하는 컨트롤입니다. 페이지에 있을 수 있는 UpdatePanel 컨트롤 수에는 제한이 없으며 중첩될 수 있습니다. 각 UpdatePanel은 격리되어 있으므로 각각 독립적으로 작동할 수 있습니다(두 개의 UpdatePanels를 동시에 실행하여 페이지의 포스트백과 관계없이 페이지의 다른 부분을 렌더링할 수 있습니다).
UpdatePanel 컨트롤은 주로 컨트롤 트리거를 처리합니다. 기본적으로 Postback을 만드는 UpdatePanel 내에 ContentTemplate 포함된 모든 컨트롤은 UpdatePanel에 대한 트리거로 등록됩니다. 즉, UpdatePanel은 사용자 컨트롤을 사용하여 기본 데이터 바인딩된 컨트롤(예: GridView)과 함께 작동할 수 있으며 스크립트로 프로그래밍할 수 있습니다.
기본적으로 부분 페이지 렌더링이 트리거되면 UpdatePanel 컨트롤이 이러한 작업에 대해 트리거를 정의했는지 여부에 관계없이 페이지의 모든 UpdatePanel 컨트롤이 새로 고쳐집니다. 예를 들어 하나의 UpdatePanel이 단추 컨트롤을 정의하고 단추 컨트롤을 클릭하면 해당 페이지의 모든 UpdatePanel 컨트롤이 기본적으로 새로 고쳐집니다. 이는 기본적으로 UpdateMode UpdatePanel의 속성이 로 설정 Always되었기 때문입니다. 또는 UpdateMode 속성을 Conditional로 설정할 수 있습니다. 즉, 특정 트리거가 적중된 경우에만 UpdatePanel이 새로 고쳐집니다.
사용자 지정 컨트롤 노트
UpdatePanel은 모든 사용자 정의 컨트롤 또는 사용자 지정 컨트롤에 추가할 수 있습니다. 그러나 이러한 컨트롤이 포함된 페이지에는 EnablePartialRendering 속성이 true로 설정된 ScriptManager 컨트롤도 포함되어야 합니다.
웹 사용자 지정 컨트롤을 사용할 때 이를 고려할 수 있는 한 가지 방법은 클래스의 보호된 CreateChildControls() 메서드를 재정의하는 것입니다 CompositeControl . 이렇게 하면 페이지가 부분 렌더링을 지원하는 것으로 확인되면 컨트롤의 자식과 외부 세계 사이에 UpdatePanel을 삽입할 수 있습니다. 그렇지 않으면 단순히 자식 컨트롤을 컨테이너 Control instance 계층화할 수 있습니다.
UpdatePanel 고려 사항
UpdatePanel은 JavaScript XMLHttpRequest의 컨텍스트 내에서 ASP.NET 포스트백을 래핑하는 블랙박스의 일부로 작동합니다. 그러나 동작과 속도 측면에서 고려해야 할 중요한 성능 고려 사항이 있습니다. UpdatePanel의 작동 방식을 이해하려면 해당 사용이 적절한 시기를 가장 잘 결정할 수 있도록 AJAX 교환을 검토해야 합니다. 다음 예제에서는 기존 사이트를 사용하고 Firebug 확장과 함께 Mozilla Firefox를 사용합니다(Firebug는 XMLHttpRequest 데이터를 캡처).
무엇보다도 양식 또는 컨트롤에 도시 및 주 필드를 채워야 하는 우편 번호 텍스트 상자가 있는 양식을 고려합니다. 이 양식은 궁극적으로 사용자의 이름, 주소 및 연락처 정보를 포함한 멤버 자격 정보를 수집합니다. 특정 프로젝트의 요구 사항에 따라 고려해야 할 많은 디자인 고려 사항이 있습니다.
이 애플리케이션의 원래 반복에서는 우편 번호, 도시 및 주를 포함한 전체 사용자 등록 데이터를 통합하는 컨트롤이 빌드되었습니다. 전체 컨트롤이 UpdatePanel 내에 래핑되어 웹 양식에 떨어졌습니다. 사용자가 우편 번호를 입력하면 UpdatePanel은 이벤트를 검색합니다(트리거를 지정하거나 ChildrenAsTriggers 속성을 true로 설정하여 백 엔드에서 해당 TextChanged 이벤트). AJAX는 FireBug에서 캡처한 대로 UpdatePanel 내의 모든 필드를 게시합니다(오른쪽 다이어그램 참조).
화면 캡처에서 알 수 있듯이 UpdatePanel 내의 모든 컨트롤의 값은 ViewState 필드뿐만 아니라 모두 비어 있습니다. 실제로 이 특정 요청을 수행하려면 5바이트의 데이터만 필요한 경우 9kb 이상의 데이터가 전송됩니다. 응답은 더욱 비대해집니다. 총 57kb는 텍스트 필드와 드롭다운 필드를 업데이트하기 위해 클라이언트로 전송됩니다.
ASP.NET AJAX가 프레젠테이션을 업데이트하는 방법을 확인하는 것도 흥미로울 수 있습니다. UpdatePanel 업데이트 요청의 응답 부분은 왼쪽의 Firebug 콘솔 디스플레이에 표시됩니다. 클라이언트 스크립트에 의해 분리된 다음 페이지에서 다시 어셈블되는 특수하게 수식화된 파이프로 구분된 문자열입니다. 특히 ASP.NET AJAX는 UpdatePanel을 나타내는 클라이언트에서 HTML 요소의 innerHTML 속성을 설정합니다. 브라우저에서 DOM을 다시 생성할 때 처리해야 하는 정보의 양에 따라 약간의 지연이 발생합니다.
DOM을 다시 생성하면 다음과 같은 여러 가지 추가 문제가 트리거됩니다.
- 포커스가 있는 HTML 요소가 UpdatePanel 내에 있으면 포커스가 손실됩니다. 따라서 Tab 키를 눌러 우편 번호 텍스트 상자를 종료한 사용자의 경우 다음 대상은 도시 텍스트 상자였을 것입니다. 그러나 UpdatePanel이 디스플레이를 새로 고치면 양식에 더 이상 포커스가 없으며 Tab 키를 누르면 포커스 요소(예: 링크)가 강조 표시되기 시작했습니다.
- DOM 요소에 액세스하는 모든 유형의 사용자 지정 클라이언트 쪽 스크립트가 사용 중인 경우 부분 포스트백 후에 함수에서 유지되는 참조가 소멸될 수 있습니다.
UpdatePanels는 catch-all 솔루션이 아닙니다. 대신 프로토타입 작성, 소규모 컨트롤 업데이트를 비롯한 특정 상황에 대한 빠른 솔루션을 제공하고 .NET 개체 모델에 익숙하지만 DOM에 익숙하지 않은 ASP.NET 개발자에게 친숙한 인터페이스를 제공합니다. 애플리케이션 시나리오에 따라 성능이 향상되는 여러 가지 대안이 있습니다.
- 개발자가 웹 서비스 호출이 호출되는 것처럼 페이지에서 정적 메서드를 호출할 수 있도록 PageMethods 및 JSON(JavaScript 개체 표기법)을 사용하는 것이 좋습니다. 메서드는 정적이므로 상태가 필요하지 않습니다. 스크립트 호출자는 매개 변수를 제공하고 결과는 비동기적으로 반환됩니다.
- 애플리케이션의 여러 위치에서 단일 컨트롤을 사용해야 하는 경우 웹 서비스 및 JSON을 사용하는 것이 좋습니다. 이렇게 하면 특별한 작업이 거의 필요하지 않으며 비동기적으로 작동합니다.
웹 서비스 또는 페이지 메서드를 통해 기능을 통합하면 단점도 있습니다. 무엇보다도 ASP.NET 개발자는 일반적으로 기능의 작은 구성 요소를 사용자 컨트롤(.ascx 파일)에 빌드하는 경향이 있습니다. 페이지 메서드는 이러한 파일에서 호스트할 수 없습니다. 실제 .aspx 페이지 클래스 내에서 호스트되어야 합니다. 마찬가지로 웹 서비스는 .asmx 클래스 내에서 호스트되어야 합니다. 애플리케이션에 따라 이 아키텍처는 단일 책임 원칙을 위반할 수 있습니다. 단일 구성 요소에 대한 기능이 이제 결합 관계가 거의 또는 전혀 없을 수 있는 두 개 이상의 물리적 구성 요소에 분산되어 있다는 것입니다.
마지막으로 애플리케이션에서 UpdatePanels를 사용해야 하는 경우 다음 지침은 문제 해결 및 유지 관리를 지원해야 합니다.
- UpdatePanels는 단위 내에서뿐만 아니라 코드 단위 간에 최대한 적게 중첩합니다. 예를 들어 컨트롤을 래핑하는 Page에 UpdatePanel이 있는 반면, 해당 Control에는 UpdatePanel을 포함하는 다른 Control이 포함된 UpdatePanel도 포함되어 있어 단위 간 중첩입니다. 이렇게 하면 새로 고쳐야 하는 요소를 명확히 하고 자식 UpdatePanels에 대한 예기치 않은 새로 고침을 방지할 수 있습니다.
- ChildrenAsTriggers 속성을 false로 설정하고 트리거 이벤트를 명시적으로 설정합니다.
<Triggers>컬렉션을 활용하는 것은 이벤트를 처리하는 훨씬 더 명확한 방법이며 예기치 않은 동작을 방지하여 유지 관리 작업을 지원하고 개발자가 이벤트를 옵트인하도록 강요할 수 있습니다. - 가능한 가장 작은 단위를 사용하여 기능을 구현합니다. 우편 번호 서비스에 대한 설명에서 설명한 대로 최소값만 래핑하면 서버로의 시간, 총 처리 시간 및 클라이언트-서버 교환의 공간이 줄어들어 성능이 향상됩니다.
UpdateProgress 컨트롤
UpdateProgress 컨트롤 참조
Markup-Enabled 속성:
| 속성 이름 | Type | 설명 |
|---|---|---|
| AssociatedUpdate-PanelID | 문자열 | 이 UpdateProgress에서 보고해야 하는 UpdatePanel의 ID를 지정합니다. |
| DisplayAfter | Int | 비동기 요청이 시작된 후 이 컨트롤이 표시되기 전에 시간 제한을 밀리초 단위로 지정합니다. |
| DynamicLayout | bool | 진행률이 동적으로 렌더링되는지 여부를 지정합니다. |
태그 하위 항목:
| Tag | 설명 |
|---|---|
| <ProgressTemplate> | 이 컨트롤과 함께 표시될 콘텐츠에 대한 컨트롤 템플릿 집합을 포함합니다. |
UpdateProgress 컨트롤은 서버로 전송하는 데 필요한 작업을 수행하는 동안 사용자의 관심을 유지하기 위한 피드백 측정값을 제공합니다. 이는 특히 대부분의 사용자가 페이지를 새로 고침하고 상태 표시줄 하이라이트를 보는 데 사용되기 때문에 사용자가 명확하게 표시되지 않더라도 사용자가 무언가를 하고 있다는 것을 알 수 있도록 도와줄 수 있습니다.
참고로 UpdateProgress 컨트롤은 페이지 계층 구조의 아무 곳에나 나타날 수 있습니다. 그러나 하위 UpdatePanel에서 부분 포스트백이 시작되는 경우(UpdatePanel이 다른 UpdatePanel 내에 중첩된 경우) 자식 UpdatePanel을 트리거하는 포스트백으로 인해 자식 UpdatePanel 및 부모 UpdatePanel에 대한 UpdateProgress 템플릿이 표시됩니다. 그러나 트리거가 부모 UpdatePanel의 직접 자식인 경우 부모와 연결된 UpdateProgress 템플릿만 표시됩니다.
요약
Microsoft ASP.NET AJAX 확장은 웹 콘텐츠의 접근성을 향상시키고 웹 애플리케이션에 보다 풍부한 사용자 환경을 제공하도록 설계된 정교한 제품입니다. ASP.NET AJAX 확장의 일부로 ScriptManager, UpdatePanel 및 UpdateProgress 컨트롤을 포함한 부분 페이지 렌더링 컨트롤은 도구 키트에서 가장 눈에 띄는 구성 요소 중 일부입니다.
ScriptManager 구성 요소는 확장에 대한 클라이언트 JavaScript의 프로비저닝을 통합할 뿐만 아니라 다양한 서버 및 클라이언트 쪽 구성 요소가 최소한의 개발 투자로 함께 작동할 수 있도록 합니다.
UpdatePanel 컨트롤은 명백한 매직 박스입니다. UpdatePanel 내의 태그는 페이지 새로 고침을 트리거하지 않고 서버 쪽 Codebehind를 가질 수 있습니다. UpdatePanel 컨트롤은 중첩될 수 있으며 다른 UpdatePanels의 컨트롤에 따라 달라질 수 있습니다. 기본적으로 UpdatePanels는 하위 컨트롤에서 호출하는 모든 포스트백을 처리하지만 이 기능은 선언적으로 또는 프로그래밍 방식으로 미세 조정할 수 있습니다.
UpdatePanel 컨트롤을 사용하는 경우 개발자는 잠재적으로 발생할 수 있는 성능 영향을 알고 있어야 합니다. 잠재적인 대안으로는 웹 서비스 및 페이지 메서드가 있지만 애플리케이션의 디자인을 고려해야 합니다.
UpdateProgress 컨트롤을 사용하면 사용자가 자신이 무시되고 있지 않으며 페이지가 사용자 입력에 응답하기 위해 아무 작업도 수행하지 않는 동안 백그라운드 요청이 진행 중임을 알 수 있습니다. 부분 렌더링 결과를 중단하는 기능도 포함됩니다.
이러한 도구를 함께 사용하면 서버 작업을 사용자에게 덜 명확하게 표시하고 워크플로를 중단하여 풍부하고 원활한 사용자 환경을 만들 수 있습니다.
사용자 정보
Scott Cate은 1997년부터 Microsoft 웹 기술과 함께 일해 왔으며 myKB.com(www.myKB.com)의 사장으로 기술 자료 소프트웨어 솔루션에 중점을 둔 ASP.NET 기반 애플리케이션을 작성하는 일을 전문으로 합니다. Scott은 이메일 scott.cate@myKB.com 또는 ScottCate.com 블로그를 통해 연락할 수 있습니다.
피드백
출시 예정: 2024년 내내 콘텐츠에 대한 피드백 메커니즘으로 GitHub 문제를 단계적으로 폐지하고 이를 새로운 피드백 시스템으로 바꿀 예정입니다. 자세한 내용은 다음을 참조하세요. https://aka.ms/ContentUserFeedback
다음에 대한 사용자 의견 제출 및 보기