PageRequestManager 이벤트 작업
업데이트: 2007년 11월
Microsoft AJAX 라이브러리의 PageRequestManager 클래스는 AJAX 사용 ASP.NET 웹 페이지의 ScriptManager 및 UpdatePanel 서버 컨트롤로 조정하여 부분 페이지 업데이트를 설정합니다. 페이지 요소가 비동기 포스트백을 수행할 때 PageRequestManager 클래스는 메서드, 속성 및 이벤트를 노출하여 클라이언트 프로그래밍을 더 쉽게 만듭니다. 예를 들어 PageRequestManager 클래스를 사용하면 클라이언트 페이지 수명 주기의 이벤트를 처리하며 부분 페이지 업데이트와 관련된 사용자 지정 이벤트 처리기를 제공할 수 있습니다.
클라이언트 스크립트의 PageRequestManager 클래스를 사용하려면 ScriptManager 서버 컨트롤을 웹 페이지에 두어야 합니다. ScriptManager 컨트롤의 EnablePartialRendering 속성이 true(기본값)로 설정되어야 합니다. EnablePartialRendering이 true로 설정되어 있으면 PageRequestManager 클래스가 포함된 클라이언트 스크립트 라이브러리를 페이지에서 사용할 수 있습니다.
PageRequestManager 클래스의 인스턴스 가져오기
페이지마다 하나의 PageRequestManager 인스턴스가 있습니다. 클래스의 인스턴스를 만들지 않습니다. 대신 다음 예제에 표시된 대로 getInstance 메서드를 호출하여 현재 인스턴스에 대한 참조를 가져옵니다.
Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(InitializeRequest);
Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(InitializeRequest);
PageRequestManager 클래스의 현재 인스턴스가 있는 경우 모든 해당 메서드, 속성 및 이벤트에 액세스할 수 있습니다. 예를 들어 다음 예제에 표시된 대로 isInAsyncPostBack 속성을 가져와서 비동기 다음 게시가 진행 중인지 여부를 확인할 수 있습니다.
function InitializeRequest(sender, args)
{
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm.get_isInAsyncPostBack() & args.get_postBackElement().id == 'CancelPostBack') {
prm.abortPostBack();
}
}
function InitializeRequest(sender, args)
{
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm.get_isInAsyncPostBack() & args.get_postBackElement().id == 'CancelPostBack') {
prm.abortPostBack();
}
}
ScriptManager 컨트롤의 EnablePartialRendering 속성이 false인 경우 PageRequestManager 인스턴스가 없기 때문에 isInAsyncPostBack 속성에 액세스할 수 없습니다.
클라이언트 페이지 수명 주기 이벤트
브라우저에서 일반적인 페이지 처리 중에 페이지가 처음 로드되면 window.onload DOM 이벤트가 발생합니다. 마찬가지로 페이지가 새로 고쳐지거나 사용자가 페이지 밖으로 이동하는 경우 window.onunload DOM 이벤트가 발생합니다.
그러나 이러한 이벤트는 비동기 포스트백 동안 발생하지 않습니다. 비동기 포스트백에 대해 이러한 이벤트 유형을 관리하는 데 도움이 되도록 PageRequestManager 클래스는 일련의 이벤트를 노출합니다. 이러한 이벤트는 window.load 및 다른 DOM 이벤트와 비슷하지만 비동기 포스트백 중에도 발생합니다. 각 비동기 포스트백에 대해 PageRequestManager 클래스의 모든 페이지 이벤트가 발생되고 첨부된 이벤트 처리기가 호출됩니다.
.gif "참고") 참고: |
|---|
동기 포스트백의 경우 pageLoaded 이벤트만 발생합니다. |
PageRequestManager 클래스에서 발생한 이벤트를 처리하기 위해 클라이언트 스크립트를 작성할 수 있습니다. 이벤트 처리기에 이벤트마다 서로 다른 이벤트 인수 개체가 전달됩니다. 다음 표에서는 PageRequestManager 클래스 이벤트와 해당 이벤트 인수 클래스를 요약하여 설명합니다. 표의 이벤트 순서는 오류 없는 단일 비동기 포스트백에 대한 이벤트의 순서입니다.
initializeRequest
비동기 포스트백에 대한 요청이 시작되기 전에 발생합니다. 이벤트 데이터가 처리기에 InitializeRequestEventArgs 개체로 전달됩니다. 이 개체는 포스트백 및 기본 요청 개체를 발생시킨 요소를 사용 가능하게 만듭니다.beginRequest
비동기 포스트백을 서버로 보내기 바로 전에 발생합니다. 이벤트 데이터가 처리기에 BeginRequestEventArg 개체로 전달됩니다. 이 개체는 포스트백 및 기본 요청 개체를 발생시킨 요소를 사용 가능하게 만듭니다.pageLoading
최신 비동기 포스트백에 대한 응답을 받았지만 페이지에 대한 업데이트가 수행되기 전에 발생합니다. 이벤트 데이터가 처리기에 PageLoadingEventArgs 개체로 전달됩니다. 이 개체는 최신 비동기 포스트백의 결과로 삭제되고 업데이트될 패널에 대한 정보를 사용 가능하게 만듭니다.pageLoaded
최신 포스트백 후 페이지 영역이 업데이트된 후 발생합니다. 이벤트 데이터가 처리기에 PageLoadedEventArgs 개체로 전달됩니다. 개체는 생성되거나 업데이트된 패널에 대한 정보를 사용 가능하게 만듭니다. 동기 포스트백의 경우 패널을 다시 만들 수만 있지만 비동기 포스트백의 경우 패널을 만들고 업데이트할 수 있습니다.endRequest
요청 처리가 끝나면 발생합니다. 이벤트 데이터가 처리기에 EndRequestEventArgs 개체로 전달됩니다. 개체는 발생한 오류 및 오류가 처리되었는지 여부에 대한 정보를 사용 가능하게 만듭니다. 또한 응답 개체를 사용 가능하게 만듭니다.
ScriptManager 컨트롤의 RegisterDataItem 메서드를 사용하여 비동기 포스트백 동안 추가 데이터를 보내는 경우 PageLoadingEventArgs, PageLoadedEventArgs 및 EndRequestEventArgs 개체에서 해당 데이터에 액세스할 수 있습니다.
이벤트 순서는 시나리오에 따라 달라집니다. 앞 표에서의 순서는 성공한 단일 비동기 포스트백에 대한 것입니다. 다른 시나리오는 다음과 같습니다.
최신 포스트백의 우선 순위가 높은 여러 포스트백. 기본 동작입니다. 최신 비동기 포스트백에 대한 이벤트만 발생합니다.
한 게시의 우선 순위가 높은 여러 포스트백. 해당 게시가 끝날 때까지 모든 후속 포스트백을 취소합니다. 취소된 포스트백에 대해 initializeRequest 이벤트만 발생합니다.
중지된 비동기 포스트백. 포스트백이 중지된 시점에 따라 일부 이벤트는 발생하지 않을 수 있습니다.
페이지의 초기 요청(HTTP GET) 또는 페이지 새로 고침. 페이지가 처음 로드되거나 브라우저에서 새로 고쳐질 때 pageLoaded 이벤트만 발생합니다.
비동기 포스트백 중지 및 취소
두 가지 일반적인 작업은 진행 중인 비동기 포스트백을 중지하는 것과 새 요청이 시작되기 전에 해당 요청을 취소하는 것입니다. 이러한 작업을 수행하려면 다음을 수행합니다.
기존 비동기 포스트백을 중지하려면 PageRequestManager 클래스의 abortPostback 메서드를 호출합니다.
새 비동기 포스트백을 취소하려면 PageRequestManager 클래스의 initializeRequest 이벤트를 처리하고 cancel 속성을 true로 설정합니다.
비동기 포스트백 중지
다음 예제에서는 비동기 포스트백을 중지하는 방법을 보여 줍니다. initializeRequest 이벤트 처리기 스크립트는 사용자가 포스트백 중지를 선택했는지 여부를 확인합니다. 중지를 선택한 경우 코드에서 abortPostback 메서드를 호출합니다.
<%@ Page Language="VB" %>
<%@ Import Namespace="System.Collections.Generic" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script >
Protected Sub NewsClick_Handler(ByVal sender As Object, ByVal e As EventArgs)
System.Threading.Thread.Sleep(2000)
HeadlineList.DataSource = GetHeadlines()
HeadlineList.DataBind()
End Sub
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
If Not (IsPostBack) Then
HeadlineList.DataSource = GetHeadlines()
HeadlineList.DataBind()
End If
End Sub
' Helper method to simulate news headline fetch.
Private Function GetHeadlines() As SortedList
Dim headlines As New SortedList()
headlines.Add(1, "This is headline 1.")
headlines.Add(2, "This is headline 2.")
headlines.Add(3, "This is headline 3.")
headlines.Add(4, "This is headline 4.")
headlines.Add(5, "This is headline 5.")
headlines.Add(6, "(Last updated on " & DateTime.Now.ToString() & ")")
Return headlines
End Function
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>Canceling Postback Example</title>
<style type="text/css">
body {
font-family: Tahoma;
}
#UpdatePanel1{
width: 400px;
height: 200px;
border: solid 1px gray;
}
div.AlertStyle {
font-size: smaller;
background-color: #FFC080;
width: 400px;
height: 20px;
visibility: hidden;
}
</style>
</head>
<body>
<form id="form1" >
<div >
<asp:ScriptManager ID="ScriptManager1" >
<Scripts>
<asp:ScriptReference Path="CancelPostback.js" />
</Scripts>
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="Server" >
<ContentTemplate>
<asp:DataList ID="HeadlineList" >
<HeaderTemplate>
<strong>Headlines</strong>
</HeaderTemplate>
<ItemTemplate>
<%# Eval("Value") %>
</ItemTemplate>
<FooterTemplate>
</FooterTemplate>
<FooterStyle HorizontalAlign="right" />
</asp:DataList>
<p style="text-align:right">
<asp:Button ID="RefreshButton"
Text="Refresh"
OnClick="NewsClick_Handler" />
</p>
<div id="AlertDiv" class="AlertStyle">
<span id="AlertMessage"></span>
<asp:LinkButton ID="CancelRefresh" >
Cancel</asp:LinkButton>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script >
protected void NewsClick_Handler(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(2000);
HeadlineList.DataSource = GetHeadlines();
HeadlineList.DataBind();
}
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
HeadlineList.DataSource = GetHeadlines();
HeadlineList.DataBind();
}
}
// Helper method to simulate news headline fetch.
private SortedList GetHeadlines()
{
SortedList headlines = new SortedList();
headlines.Add(1, "This is headline 1.");
headlines.Add(2, "This is headline 2.");
headlines.Add(3, "This is headline 3.");
headlines.Add(4, "This is headline 4.");
headlines.Add(5, "This is headline 5.");
headlines.Add(6, "(Last updated on " + DateTime.Now.ToString() + ")");
return headlines;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head >
<title>Canceling Postback Example</title>
<style type="text/css">
body {
font-family: Tahoma;
}
#UpdatePanel1{
width: 400px;
height: 200px;
border: solid 1px gray;
}
div.AlertStyle {
font-size: smaller;
background-color: #FFC080;
width: 400px;
height: 20px;
visibility: hidden;
}
</style>
</head>
<body>
<form id="form1" >
<div >
<asp:ScriptManager ID="ScriptManager1" >
<Scripts>
<asp:ScriptReference Path="CancelPostback.js" />
</Scripts>
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="Server" >
<ContentTemplate>
<asp:DataList ID="HeadlineList" >
<HeaderTemplate>
<strong>Headlines</strong>
</HeaderTemplate>
<ItemTemplate>
<%# Eval("Value") %>
</ItemTemplate>
<FooterTemplate>
</FooterTemplate>
<FooterStyle HorizontalAlign="right" />
</asp:DataList>
<p style="text-align:right">
<asp:Button ID="RefreshButton"
Text="Refresh"
OnClick="NewsClick_Handler" />
</p>
<div id="AlertDiv" class="AlertStyle">
<span id="AlertMessage"></span>
<asp:LinkButton ID="CancelRefresh" >
Cancel</asp:LinkButton>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
자세한 내용은 비동기 포스트백 취소를 참조하십시오.
새 비동기 포스트백 취소
다음 예제에서는 특정 비동기 포스트백에 우선 순위를 부여하는 방법을 보여 줍니다. 이렇게 하면 현재 비동기 포스트백이 끝날 때까지 모든 후속 비동기 포스트백이 취소됩니다. 기본적으로 최신 비동기 포스트백의 우선 순위가 높습니다. initializeRequest 이벤트 처리기는 우선 순위가 높은 페이지의 요소가 비동기 포스트백을 시작했는지 여부를 확인합니다. 그런 경우 InitializeRequestEventArgs 개체의 cancel 속성을 설정하여 모든 후속 포스트백을 취소합니다. InitializeRequestEventArgs 이벤트는 cancel 속성이 정의되어 있는 CancelEventArgs 클래스에서 상속됩니다.
<%@ 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 Button1_Click(ByVal sender As Object, ByVal e As EventArgs)
System.Threading.Thread.Sleep(4000)
Label1.Text = "Last update from server " & DateTime.Now.ToString()
End Sub
Protected Sub Button2_Click(ByVal sender As Object, ByVal e As EventArgs)
System.Threading.Thread.Sleep(1000)
Label2.Text = "Last update from server " & DateTime.Now.ToString()
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>Postback Precedence Example</title>
<style type="text/css">
body {
font-family: Tahoma;
}
#UpdatePanel1, #UpdatePanel2 {
width: 400px;
height: 100px;
border: solid 1px gray;
}
div.MessageStyle {
background-color: #FFC080;
top: 95%;
left: 1%;
height: 20px;
width: 600px;
position: absolute;
visibility: hidden;
}
</style>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" >
<Scripts>
<asp:ScriptReference Path="PostBackPrecedence.js" />
</Scripts>
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="Server" >
<ContentTemplate>
<strong>UpdatePanel 1</strong><br />
This postback takes precedence.<br />
<asp:Label ID="Label1" >Panel initially rendered.</asp:Label><br />
<asp:Button ID="Button1" Text="Button" OnClick="Button1_Click" />
<asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
Panel1 updating...
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="Server" >
<ContentTemplate>
<strong>UpdatePanel 2</strong><br />
<asp:Label ID="Label2" >Panel initially rendered.</asp:Label><br />
<asp:Button ID="Button2" Text="Button" OnClick="Button2_Click" />
<asp:UpdateProgress ID="UpdateProgress2" AssociatedUpdatePanelID="UpdatePanel2">
<ProgressTemplate>
Panel2 updating...
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
</asp:UpdatePanel>
<div id="AlertDiv" class="MessageStyle">
<span id="AlertMessage"></span>
</div>
</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 Button1_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(4000);
Label1.Text = "Last update from server " + DateTime.Now.ToString();
}
protected void Button2_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(1000);
Label2.Text = "Last update from server " + DateTime.Now.ToString();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>Postback Precedence Example</title>
<style type="text/css">
body {
font-family: Tahoma;
}
#UpdatePanel1, #UpdatePanel2 {
width: 400px;
height: 100px;
border: solid 1px gray;
}
div.MessageStyle {
background-color: #FFC080;
top: 95%;
left: 1%;
height: 20px;
width: 600px;
position: absolute;
visibility: hidden;
}
</style>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" >
<Scripts>
<asp:ScriptReference Path="PostBackPrecedence.js" />
</Scripts>
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="Server" >
<ContentTemplate>
<strong>UpdatePanel 1</strong><br />
This postback takes precedence.<br />
<asp:Label ID="Label1" >Panel initially rendered.</asp:Label><br />
<asp:Button ID="Button1" Text="Button" OnClick="Button1_Click" />
<asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
Panel1 updating...
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="Server" >
<ContentTemplate>
<strong>UpdatePanel 2</strong><br />
<asp:Label ID="Label2" >Panel initially rendered.</asp:Label><br />
<asp:Button ID="Button2" Text="Button" OnClick="Button2_Click" />
<asp:UpdateProgress ID="UpdateProgress2" AssociatedUpdatePanelID="UpdatePanel2">
<ProgressTemplate>
Panel2 updating...
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
</asp:UpdatePanel>
<div id="AlertDiv" class="MessageStyle">
<span id="AlertMessage"></span>
</div>
</div>
</form>
</body>
</html>
자세한 내용은 특정 비동기 포스트백에 우선 순위 설정을 참조하십시오.
사용자 지정 오류 메시지 표시
다음 예제에서는 비동기 포스트백 동안 오류가 발생하는 경우 사용자 지정 오류 메시지를 표시하는 방법을 보여 줍니다. ScriptManager 컨트롤의 AsyncPostBackError 이벤트는 서버 코드에서 처리되고 오류에 대한 정보는 표시될 브라우저로 전달됩니다.
<%@ 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 ErrorProcessClick_Handler(ByVal sender As Object, ByVal e As EventArgs)
'This handler demonstrates an error condition. In this example
' the server error gets intercepted on the client and an alert is shown.
Dim exc As New ArgumentException()
exc.Data("GUID") = Guid.NewGuid().ToString().Replace("-"," - ")
Throw exc
End Sub
Protected Sub SuccessProcessClick_Handler(ByVal sender As Object, ByVal e As EventArgs)
'This handler demonstrates no server side exception.
UpdatePanelMessage.Text = "The asynchronous postback completed successfully."
End Sub
Protected Sub ScriptManager1_AsyncPostBackError(ByVal sender As Object, ByVal e As System.Web.UI.AsyncPostBackErrorEventArgs)
If Not (e.Exception.Data("GUID") Is Nothing) Then
ScriptManager1.AsyncPostBackErrorMessage = e.Exception.Message & _
" When reporting this error use the following ID: " & _
e.Exception.Data("GUID").ToString()
Else
ScriptManager1.AsyncPostBackErrorMessage = _
"The server could not process the request."
End If
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head >
<title>PageRequestManager endRequestEventArgs Example</title>
<style type="text/css">
body {
font-family: Tahoma;
}
#AlertDiv{
left: 40%; top: 40%;
position: absolute; width: 200px;
padding: 12px;
border: #000000 1px solid;
background-color: white;
text-align: left;
visibility: hidden;
z-index: 99;
}
#AlertButtons{
position: absolute;
right: 5%;
bottom: 5%;
}
</style>
</head>
<body id="bodytag">
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1"
OnAsyncPostBackError="ScriptManager1_AsyncPostBackError"
/>
<script type="text/javascript" language="javascript">
var divElem = 'AlertDiv';
var messageElem = 'AlertMessage';
var bodyTag = 'bodytag';
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function ToggleAlertDiv(visString)
{
if (visString == 'hidden')
{
$get(bodyTag).style.backgroundColor = 'white';
}
else
{
$get(bodyTag).style.backgroundColor = 'gray';
}
var adiv = $get(divElem);
adiv.style.visibility = visString;
}
function ClearErrorState() {
$get(messageElem).innerHTML = '';
ToggleAlertDiv('hidden');
}
function EndRequestHandler(sender, args)
{
if (args.get_error() != undefined)
{
var errorMessage = args.get_error().message;
args.set_errorHandled(true);
ToggleAlertDiv('visible');
$get(messageElem).innerHTML = errorMessage;
}
}
</script>
<asp:UpdatePanel runat="Server" UpdateMode="Conditional" ID="UpdatePanel1">
<ContentTemplate>
<asp:Panel ID="Panel1" GroupingText="Update Panel">
<asp:Label ID="UpdatePanelMessage" />
<br />
Last update:
<%= DateTime.Now.ToString() %>
.
<br />
<asp:Button ID="Button1" Text="Submit Successful Async Postback"
OnClick="SuccessProcessClick_Handler" OnClientClick="ClearErrorState()" />
<asp:Button ID="Button2" Text="Submit Async Postback With Error"
OnClick="ErrorProcessClick_Handler" OnClientClick="ClearErrorState()" />
<br />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<div id="AlertDiv">
<div id="AlertMessage">
</div>
<br />
<div id="AlertButtons" >
<input id="OKButton" type="button" value="OK"
onclick="ClearErrorState()" />
</div>
</div>
</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 ErrorProcessClick_Handler(object sender, EventArgs e)
{
// This handler demonstrates an error condition. In this example
// the server error gets intercepted on the client and an alert is shown.
Exception exc = new ArgumentException();
exc.Data["GUID"] = Guid.NewGuid().ToString().Replace("-"," - ");
throw exc;
}
protected void SuccessProcessClick_Handler(object sender, EventArgs e)
{
// This handler demonstrates no server side exception.
UpdatePanelMessage.Text = "The asynchronous postback completed successfully.";
}
protected void ScriptManager1_AsyncPostBackError(object sender, AsyncPostBackErrorEventArgs e)
{
if (e.Exception.Data["GUID"] != null)
{
ScriptManager1.AsyncPostBackErrorMessage = e.Exception.Message +
" When reporting this error use the following ID: " +
e.Exception.Data["GUID"].ToString();
}
else
{
ScriptManager1.AsyncPostBackErrorMessage =
"The server could not process the request.";
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head >
<title>PageRequestManager endRequestEventArgs Example</title>
<style type="text/css">
body {
font-family: Tahoma;
}
#AlertDiv{
left: 40%; top: 40%;
position: absolute; width: 200px;
padding: 12px;
border: #000000 1px solid;
background-color: white;
text-align: left;
visibility: hidden;
z-index: 99;
}
#AlertButtons{
position: absolute;
right: 5%;
bottom: 5%;
}
</style>
</head>
<body id="bodytag">
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1"
OnAsyncPostBackError="ScriptManager1_AsyncPostBackError"
/>
<script type="text/javascript" language="javascript">
var divElem = 'AlertDiv';
var messageElem = 'AlertMessage';
var bodyTag = 'bodytag';
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function ToggleAlertDiv(visString)
{
if (visString == 'hidden')
{
$get(bodyTag).style.backgroundColor = 'white';
}
else
{
$get(bodyTag).style.backgroundColor = 'gray';
}
var adiv = $get(divElem);
adiv.style.visibility = visString;
}
function ClearErrorState() {
$get(messageElem).innerHTML = '';
ToggleAlertDiv('hidden');
}
function EndRequestHandler(sender, args)
{
if (args.get_error() != undefined)
{
var errorMessage = args.get_error().message;
args.set_errorHandled(true);
ToggleAlertDiv('visible');
$get(messageElem).innerHTML = errorMessage;
}
}
</script>
<asp:UpdatePanel runat="Server" UpdateMode="Conditional" ID="UpdatePanel1">
<ContentTemplate>
<asp:Panel ID="Panel1" GroupingText="Update Panel">
<asp:Label ID="UpdatePanelMessage" />
<br />
Last update:
<%= DateTime.Now.ToString() %>
.
<br />
<asp:Button ID="Button1" Text="Submit Successful Async Postback"
OnClick="SuccessProcessClick_Handler" OnClientClick="ClearErrorState()" />
<asp:Button ID="Button2" Text="Submit Async Postback With Error"
OnClick="ErrorProcessClick_Handler" OnClientClick="ClearErrorState()" />
<br />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<div id="AlertDiv">
<div id="AlertMessage">
</div>
<br />
<div id="AlertButtons" >
<input id="OKButton" type="button" value="OK"
onclick="ClearErrorState()" />
</div>
</div>
</div>
</form>
</body>
</html>
자세한 내용은 ASP.NET UpdatePanel 컨트롤의 오류 처리 사용자 지정을 참조하십시오.
패널 애니메이션
다음 예제에서는 콘텐츠가 변경되었음을 사용자에게 알리기 위해 UpdatePanel 컨트롤에 애니메이션 효과를 주는 방법을 보여 줍니다. LinkButton 컨트롤을 클릭하면 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 Popup 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 Popup 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>
자세한 내용은 연습: ASP.NET UpdatePanel 컨트롤 애니메이션을 참조하십시오.