ASP.NET PageRequestManager 클래스 개요
업데이트: 2007년 11월
Microsoft AJAX 라이브러리의 PageRequestManager 클래스는 브라우저에서 부분 페이지 업데이트를 관리합니다. 페이지에 하나의 ScriptManager 컨트롤 및 하나 이상의 UpdatePanel 컨트롤이 포함된 경우 페이지는 부분 페이지 렌더링을 사용하도록 자동으로 설정됩니다. PageRequestManager 클래스는 클라이언트 스크립트를 사용하여 부분 페이지 업데이트를 사용자 지정할 수 있게 하는 속성, 메서드 및 이벤트를 노출합니다. PageRequestManager 클래스는 서버 페이지 이벤트 모델을 사용하는 방법과 비슷하게 사용할 수 있는 클라이언트 페이지 이벤트 모델을 노출합니다.
이 항목의 내용은 다음과 같습니다.
시나리오
기능
배경
코드 예제
방법 및 연습 항목
클래스 참조
시나리오
ScriptManager 및 UpdatePanel 웹 서버 컨트롤을 사용하여 부분 페이지 업데이트를 사용하도록 설정할 수 있습니다. 부분 페이지 업데이트에는 클라이언트 스크립팅이 필요하지 않습니다. 그러나 다음을 수행하려는 경우 PageRequestManager 클래스 및 클라이언트 스크립트를 사용할 수 있습니다.
여러 비동기 포스트백이 처리되는 방법을 제어합니다. 기본 동작은 마지막 포스트백이 우선 순위를 가지는 것입니다. PageRequestManager 클래스를 사용하면 특정 포스트백에 우선 순위를 제공하고 진행 중인 다른 포스트백을 취소할 수 있습니다.
마지막 비동기 포스트백의 결과로 작성 또는 업데이트된 페이지의 영역을 표시하기 위해 시각 신호 또는 기타 알림을 제공합니다. 이렇게 하면 특히 여러 UpdatePanel 컨트롤이 사용되는 시나리오에서 사용자 경험이 향상될 수 있습니다.
비동기 포스트백 중에 상태 메시지를 표시합니다. 포스트백이 처리하는 데 오래 걸리는 경우 애니메이션 이미지와 같은 진행률 표시기를 표시할 수 있습니다. 또한 포스트백을 취소하는 옵션을 사용자에게 제공할 수도 있습니다.
부분 페이지 업데이트를 위한 사용자 지정 오류 메시지 처리를 제공합니다. 비동기 포스트백 중 오류가 발생할 경우 클라이언트 스크립트에서 오류를 처리할 수 있습니다.
비동기 포스트백에 사용되는 기본 요청 및 응답 개체에 액세스합니다.
기능
Microsoft AJAX 라이브러리의 부분 페이지 업데이트 기능에는 다음이 포함됩니다.
부분 페이지 업데이트 중 키 시간에 발생하는 클라이언트 페이지 수명 주기 이벤트
비동기 포스트백 중 삭제, 업데이트 또는 작성된 UpdatePanel 컨트롤에 대한 정보
페이지에서 비동기 포스트백을 처리 중인지 여부를 클라이언트 스크립트에서 확인할 수 있게 하는 속성과 메서드. 이러한 메서드를 사용하여 진행 중인 비동기 포스트백을 중지하거나 새 포스트백을 취소할 수도 있습니다.
부분 페이지 업데이트에 참여하지 않는 컨트롤에 보내지는 서버 데이터에 대한 정보
배경
비동기 포스트백에 의해 시작된 부분 페이지 업데이트 중 PageRequestManager 클래스는 브라우저에서 페이지 내용이 증분 업데이트되는 방법을 조정합니다. UpdatePanel 서버 컨트롤 및 PageRequestManager 클라이언트 클래스는 부분 페이지 업데이트의 복잡함을 대부분 줄여줍니다. PageRequestManager 클래스의 멤버 및 클라이언트 스크립트를 사용할 경우 브라우저에서 부분 페이지 업데이트 동작을 사용자 지정할 수 있습니다.
부분 페이지 업데이트 이벤트 처리
포스트백 및 비동기 포스트백의 페이지 처리 중 사용자 지정 스크립트를 실행하기 위해 브라우저 DOM(문서 개체 모델)을 처리할 수 있습니다. 예를 들어, 브라우저에서 페이지를 로드 또는 언로드할 때 스크립트를 실행할 수 있습니다.
그러나 이러한 DOM 이벤트를 사용하여 비동기 포스트백 및 부분 페이지 업데이트 중에는 모든 관련 정보에 액세스하거나 동작을 제어할 수 없습니다. 따라서 PageRequestManager 클래스는 부분 페이지 업데이트를 사용자 지정할 수 있게 하는 다음 이벤트를 노출합니다.
이러한 이벤트에 대한 자세한 내용은 PageRequestManager 이벤트 작업을 참조하십시오.
코드 예제
다음 예제에서는 PageRequestManager 클래스의 pageLoaded 이벤트를 사용하여 비동기 포스트백 이후 페이지가 업데이트될 때 UpdatePanel 컨트롤에 애니메이션 효과를 주는 방법을 보여 줍니다. 이 예제에서 사용자는 날짜를 선택하고 폼에 전자 메일 주소를 입력하여 티켓 요청을 만들 수 있습니다. 비동기 포스트백이 발생할 경우(UpdatePanel 컨트롤 외부에서 링크에 의해 트리거됨) 날짜 값이 텍스트 상자에 입력되었다는 것을 사용자에게 알리기 위해 패널에 잠시 동안 애니메이션 효과가 나타납니다. 페이지에는 Calendar 컨트롤을 표시하는 팝업 창이 포함되어 있습니다. 컨트롤의 Visible 속성을 사용하여 달력을 표시하거나 숨깁니다. Calendar 컨트롤이 UpdatePanel 컨트롤 내부에 있으므로 달력을 표시하거나 숨길 때 또는 날짜를 선택할 때 전체 페이지를 다시 고칠 필요가 없습니다.
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script >
Protected Sub ChosenDate_TextChanged(ByVal sender As Object, ByVal e As EventArgs)
Dim dt As New DateTime()
DateTime.TryParse(ChosenDate.Text, dt)
CalendarPicker.SelectedDate = dt
CalendarPicker.VisibleDate = dt
End Sub
Protected Sub Close_Click(ByVal sender As Object, ByVal e As EventArgs)
SetDateSelectionAndVisible()
End Sub
Protected Sub ShowDatePickerPopOut_Click(ByVal sender As Object, ByVal e As ImageClickEventArgs)
DatePickerPopOut.Visible = Not (DatePickerPopOut.Visible)
End Sub
Protected Sub CalendarPicker_SelectionChanged(ByVal sender As Object, ByVal e As EventArgs)
SetDateSelectionAndVisible()
End Sub
Private Sub SetDateSelectionAndVisible()
If (CalendarPicker.SelectedDates.Count <> 0) Then
ChosenDate.Text = CalendarPicker.SelectedDate.ToShortDateString()
End If
DatePickerPopOut.Visible = False
End Sub
Protected Sub SubmitButton_Click(ByVal sender As Object, ByVal e As EventArgs)
If (Page.IsValid) Then
MessageLabel.Text = "An email with availability was sent."
Else
MessageLabel.Text = ""
End If
End Sub
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
CompareValidatorDate.ValueToCompare = DateTime.Today.ToShortDateString()
ExtraShow1.Text = DateTime.Today.AddDays(10.0).ToShortDateString()
ExtraShow2.Text = DateTime.Today.AddDays(11.0).ToShortDateString()
End Sub
Protected Sub ExtraShow_Click(ByVal sender As Object, ByVal e As EventArgs)
ChosenDate.Text = CType(sender, LinkButton).Text
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>Calendar Example</title>
<style type="text/css">
body {
font-family: Tahoma;
}
.PopUpCalendarStyle
{
background-color:lightblue;
position:absolute;
visibility:show;
margin: 15px 0px 0px 10px;
z-index:99;
border: solid 2px black;
}
.UpdatePanelContainer
{
width: 260px;
height:110px;
}
</style>
</head>
<body>
<form id="form1" >
<asp:ScriptManager ID="ScriptManager1" />
<script type="text/javascript">
Type.registerNamespace("ScriptLibrary");
ScriptLibrary.BorderAnimation = function(color, duration) {
this._color = color;
this._duration = duration;
}
ScriptLibrary.BorderAnimation.prototype = {
animatePanel: function(panelElement) {
var s = panelElement.style;
s.borderWidth = '1px';
s.borderColor = this._color;
s.borderStyle = 'solid';
window.setTimeout(
function() {{ s.borderWidth = 0; }},
this._duration
);
}
}
ScriptLibrary.BorderAnimation.registerClass('ScriptLibrary.BorderAnimation', null);
var panelUpdatedAnimation = new ScriptLibrary.BorderAnimation('blue', 1000);
var postbackElement;
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);
function beginRequest(sender, args) {
postbackElement = args.get_postBackElement();
}
function pageLoaded(sender, args) {
var updatedPanels = args.get_panelsUpdated();
if (typeof(postbackElement) === "undefined") {
return;
}
else if (postbackElement.id.toLowerCase().indexOf('extrashow') > -1) {
for (i=0; i < updatedPanels.length; i++) {
panelUpdatedAnimation.animatePanel(updatedPanels[i]);
}
}
}
</script>
<h1>Tickets</h1>
<p>
<strong>Latest News</strong> Due to overwhelming response, we
have added two extra shows on:
<asp:LinkButton ID="ExtraShow1" OnClick="ExtraShow_Click" />
and
<asp:LinkButton ID="ExtraShow2" OnClick="ExtraShow_Click" />.
Don't forget curtain time is at 7:00pm sharp. No late arrivals.
</p>
<hr />
<div class="UpdatePanelContainer">
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ExtraShow1" />
<asp:AsyncPostBackTrigger ControlID="ExtraShow2" />
</Triggers>
<ContentTemplate>
<fieldset >
<legend>Check Ticket Availability</legend>Date
<asp:TextBox ID="ChosenDate" OnTextChanged="ChosenDate_TextChanged" />
<asp:ImageButton ID="ShowDatePickerPopOut" OnClick="ShowDatePickerPopOut_Click"
ImageUrl="../images/calendar.gif" AlternateText="Choose a date."
Height="20px" Width="20px" />
<asp:Panel ID="DatePickerPopOut" CssClass="PopUpCalendarStyle"
Visible="false" >
<asp:Calendar ID="CalendarPicker" OnSelectionChanged="CalendarPicker_SelectionChanged">
</asp:Calendar>
<br />
<asp:LinkButton ID="CloseDatePickerPopOut" Font-Size="small"
OnClick="Close_Click" ToolTip="Close Pop out">
Close
</asp:LinkButton>
</asp:Panel>
<br />
Email
<asp:TextBox ID="EmailTextBox" />
<br />
<br />
<asp:Button ID="SubmitButton" Text="Check" ValidationGroup="RequiredFields"
OnClick="SubmitButton_Click" />
<br />
<asp:CompareValidator ID="CompareValidatorDate"
ControlToValidate="ChosenDate" ErrorMessage="Choose a date in the future."
Operator="GreaterThanEqual" Type="Date" Display="None" ValidationGroup="RequiredFields" EnableClientScript="False"></asp:CompareValidator>
<asp:RequiredFieldValidator ID="RequiredFieldValidatorDate"
ControlToValidate="ChosenDate" Display="None" ErrorMessage="Date is required."
ValidationGroup="RequiredFields" EnableClientScript="False"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidatorEmail"
ControlToValidate="EmailTextBox" Display="None"
ValidationGroup="RequiredFields" ErrorMessage="The email was not correctly formatted."
ValidationExpression="^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$" EnableClientScript="False"></asp:RegularExpressionValidator>
<asp:RequiredFieldValidator ID="RequiredFieldValidatorEmail"
ValidationGroup="RequiredFields" ControlToValidate="EmailTextBox"
Display="None" ErrorMessage="Email is required." EnableClientScript="False"></asp:RequiredFieldValidator><br />
<asp:ValidationSummary ID="ValidationSummary1"
ValidationGroup="RequiredFields" EnableClientScript="False" />
<asp:Label ID="MessageLabel" />
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script >
protected void ChosenDate_TextChanged(object sender, EventArgs e)
{
DateTime dt = new DateTime();
DateTime.TryParse(ChosenDate.Text, out dt);
CalendarPicker.SelectedDate = dt;
CalendarPicker.VisibleDate = dt;
}
protected void Close_Click(object sender, EventArgs e)
{
SetDateSelectionAndVisible();
}
protected void ShowDatePickerPopOut_Click(object sender, ImageClickEventArgs e)
{
DatePickerPopOut.Visible = !DatePickerPopOut.Visible;
}
protected void CalendarPicker_SelectionChanged(object sender, EventArgs e)
{
SetDateSelectionAndVisible();
}
private void SetDateSelectionAndVisible()
{
if (CalendarPicker.SelectedDates.Count != 0)
ChosenDate.Text = CalendarPicker.SelectedDate.ToShortDateString();
DatePickerPopOut.Visible = false;
}
protected void SubmitButton_Click(object sender, EventArgs e)
{
if (Page.IsValid)
{
MessageLabel.Text = "An email with availability was sent.";
}
else
{
MessageLabel.Text = "";
}
}
protected void Page_Load(object sender, EventArgs e)
{
CompareValidatorDate.ValueToCompare = DateTime.Today.ToShortDateString();
ExtraShow1.Text = DateTime.Today.AddDays(10.0).ToShortDateString();
ExtraShow2.Text = DateTime.Today.AddDays(11.0).ToShortDateString();
}
protected void ExtraShow_Click(object sender, EventArgs e)
{
ChosenDate.Text = ((LinkButton)sender).Text;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>Calendar Example</title>
<style type="text/css">
body {
font-family: Tahoma;
}
.PopUpCalendarStyle
{
background-color:lightblue;
position:absolute;
visibility:show;
margin: 15px 0px 0px 10px;
z-index:99;
border: solid 2px black;
}
.UpdatePanelContainer
{
width: 260px;
height:110px;
}
</style>
</head>
<body>
<form id="form1" >
<asp:ScriptManager ID="ScriptManager1" />
<script type="text/javascript">
Type.registerNamespace("ScriptLibrary");
ScriptLibrary.BorderAnimation = function(color, duration) {
this._color = color;
this._duration = duration;
}
ScriptLibrary.BorderAnimation.prototype = {
animatePanel: function(panelElement) {
var s = panelElement.style;
s.borderWidth = '1px';
s.borderColor = this._color;
s.borderStyle = 'solid';
window.setTimeout(
function() {{ s.borderWidth = 0; }},
this._duration
);
}
}
ScriptLibrary.BorderAnimation.registerClass('ScriptLibrary.BorderAnimation', null);
var panelUpdatedAnimation = new ScriptLibrary.BorderAnimation('blue', 1000);
var postbackElement;
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);
function beginRequest(sender, args) {
postbackElement = args.get_postBackElement();
}
function pageLoaded(sender, args) {
var updatedPanels = args.get_panelsUpdated();
if (typeof(postbackElement) === "undefined") {
return;
}
else if (postbackElement.id.toLowerCase().indexOf('extrashow') > -1) {
for (i=0; i < updatedPanels.length; i++) {
panelUpdatedAnimation.animatePanel(updatedPanels[i]);
}
}
}
</script>
<h1>Tickets</h1>
<p>
<strong>Latest News</strong> Due to overwhelming response, we
have added two extra shows on:
<asp:LinkButton ID="ExtraShow1" OnClick="ExtraShow_Click" />
and
<asp:LinkButton ID="ExtraShow2" OnClick="ExtraShow_Click" />.
Don't forget curtain time is at 7:00pm sharp. No late arrivals.
</p>
<hr />
<div class="UpdatePanelContainer">
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ExtraShow1" />
<asp:AsyncPostBackTrigger ControlID="ExtraShow2" />
</Triggers>
<ContentTemplate>
<fieldset>
<legend>Check Ticket Availability</legend>Date
<asp:TextBox ID="ChosenDate" OnTextChanged="ChosenDate_TextChanged" />
<asp:ImageButton ID="ShowDatePickerPopOut" OnClick="ShowDatePickerPopOut_Click"
ImageUrl="../images/calendar.gif" AlternateText="Choose a date."
Height="20px" Width="20px" />
<asp:Panel ID="DatePickerPopOut" CssClass="PopUpCalendarStyle"
Visible="false" >
<asp:Calendar ID="CalendarPicker" OnSelectionChanged="CalendarPicker_SelectionChanged">
</asp:Calendar>
<br />
<asp:LinkButton ID="CloseDatePickerPopOut" Font-Size="small"
OnClick="Close_Click" ToolTip="Close Pop out">
Close
</asp:LinkButton>
</asp:Panel>
<br />
Email
<asp:TextBox ID="EmailTextBox" />
<br />
<br />
<asp:Button ID="SubmitButton" Text="Check" ValidationGroup="RequiredFields"
OnClick="SubmitButton_Click" />
<br />
<asp:CompareValidator ID="CompareValidatorDate"
ControlToValidate="ChosenDate" ErrorMessage="Choose a date in the future."
Operator="GreaterThanEqual" Type="Date" Display="None" ValidationGroup="RequiredFields" EnableClientScript="False"></asp:CompareValidator>
<asp:RequiredFieldValidator ID="RequiredFieldValidatorDate"
ControlToValidate="ChosenDate" Display="None" ErrorMessage="Date is required."
ValidationGroup="RequiredFields" EnableClientScript="False"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidatorEmail"
ControlToValidate="EmailTextBox" Display="None"
ValidationGroup="RequiredFields" ErrorMessage="The email was not correctly formatted."
ValidationExpression="^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$" EnableClientScript="False"></asp:RegularExpressionValidator>
<asp:RequiredFieldValidator ID="RequiredFieldValidatorEmail"
ValidationGroup="RequiredFields" ControlToValidate="EmailTextBox"
Display="None" ErrorMessage="Email is required." EnableClientScript="False"></asp:RequiredFieldValidator><br />
<asp:ValidationSummary ID="ValidationSummary1"
ValidationGroup="RequiredFields" EnableClientScript="False" />
<asp:Label ID="MessageLabel" />
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
방법 및 연습 항목
클래스 참조
다음 표에서는 PageRequestManager 클래스와 관련된 클래스를 보여 줍니다.
클래스 |
설명 |
|---|---|
클라이언트 부분 페이지 업데이트를 관리하고 사용자 지정 클라이언트 스크립팅에 대한 멤버를 노출합니다. |
|
비동기 요청이 시작되기 전에 발생하는 initializeRequest 이벤트에 대한 이벤트 데이터를 제공합니다. |
|
비동기 포스트백이 시작된 후, 그리고 포스트백이 서버에 보내지기 전에 발생하는 beginRequest 이벤트에 대한 이벤트 데이터를 제공합니다. |
|
비동기 포스트백에 대한 응답이 수신되었지만 페이지 내용이 업데이트되기 전에 발생하는 pageLoading 이벤트에 대한 이벤트 데이터를 제공합니다. 포스트백이 중지되었거나 처리 중 서버에서 처리되지 않은 예외가 throw될 경우 이 이벤트는 발생하지 않습니다. |
|
동기 포스트백이나 비동기 포스트백의 결과로 페이지의 모든 내용이 새로 고쳐진 후에 발생하는 pageLoaded 이벤트에 대한 이벤트 데이터를 제공합니다. 포스트백이 중지되었거나 처리 중 서버에서 처리되지 않은 예외가 throw될 경우 이 이벤트는 발생하지 않습니다. |
|
비동기 포스트백이 완료된 후 발생하는 endRequest 이벤트에 대한 이벤트 데이터를 제공합니다. |