Работа с событиями класса PageRequestManager
Обновлен: Ноябрь 2007
Класс PageRequestManager в Microsoft AJAX (библиотека) отвечает за согласование с серверными элементами управления ScriptManager и UpdatePanel на веб-странице ASP.NET с поддержкой AJAX, обеспечивая таким образом возможность частичного обновления страниц. Класс PageRequestManager предоставляет методы, свойства и события для облегчения программирования клиента при выполнении элементами страницы асинхронной обратной передачи. Например, класс PageRequestManager позволяет обрабатывать события жизненного цикла клиентской страницы и предоставлять настраиваемые обработчики событий, связанные с частичным обновлением страницы.
Чтобы использовать класс PageRequestManager в клиентском сценарии, необходимо поместить на веб-страницу серверный элемент управления ScriptManager. Свойство EnablePartialRendering элемента управления ScriptManager control должно иметь значение 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();
}
}
Если свойство EnablePartialRendering элемента управления ScriptManager имеет значение false, получить доступ к свойству isInAsyncPostBack нельзя, поскольку не существует экземпляра PageRequestManager.
События жизненного цикла клиентской страницы
Во время стандартной обработки страницы в обозревателе при первой загрузке страницы вызывается событие DOM window.onload. Событие DOM window.onunload также вызывается при обновлении страницы, или если пользователь уходит со страницы.
Тем не менее данные события не вызываются во время выполнения асинхронных обратных передач. Для управления данными типами событий при асинхронных обратных передач класс PageRequestManager предоставляет набор событий. Они сходны с событием window.load и другими событиями DOM, однако, они также могут вызываться во время асинхронной обратной передачи. Для каждой асинхронной обратной передачи возникают все события страницы в классе PageRequestManager, и вызываются все присоединенные обработчики событий.
.gif "Примечание") Примечание. |
|---|
Для синхронных обратных передачи возникает только событие pageLoaded. |
Можно написать клиентский сценарий для обработки событий, вызванных классом PageRequestManager. Обработчикам различных событий передаются различные объекты аргумента события. В следующей таблице приведены события класса PageRequestManager и соответствующие классы аргумента события. Порядок событий в таблице представляет порядок события для единичной асинхронной обратной передачи, выполненной без ошибок.
initializeRequest
Событие вызывается перед инициализацией запроса асинхронной обратной передачи. Данные события передаются обработчикам в виде объекта InitializeRequestEventArgs. Этот объект открывает доступ к элементу, вызвавшему обратный запрос и базовый запрос объекта.beginRequest
Событие вызывается непосредственно перед отправкой асинхронной обратной передачи на сервер. Данные события передаются обработчикам в виде объекта BeginRequestEventArgs. Этот объект открывает доступ к элементу, вызвавшему обратный запрос и базовый запрос объекта.pageLoading
Событие возникает после получения ответа от сервера на последнюю асинхронную обратную передачу, но до обновления страницы. Данные события передаются обработчикам как объект PageLoadingEventArgs. Этот объект открывает доступ к сведениям о том, какие панели будут удалены и обновлены в результате выполнения последней асинхронной обратной передачи.pageLoaded
Событие возникает после обновления областей страниц после последней обратной передачи. Данные события передаются обработчикам как объект PageLoadedEventArgs. Этот объект открывает доступ к данным о том, какие панели были обновлены или созданы. В результате синхронных обратных передач панели могут только создаваться, но в результате асинхронных обратных передач панели могут как создаваться, так и обновляться.endRequest
Событие возникает по завершении обработки запроса. Данные события передаются обработчикам как объект EndRequestEventArgs. Этот объект открывает доступ к сведениям о возникших ошибках, а также о том, была ли ошибка обработана. Оно также открывает доступ к объекту Response.
При использовании метода RegisterDataItem элемента управления ScriptManager для отправки дополнительных данных во время асинхронной обратной передачи можно получить доступ к этим данным из объектов PageLoadingEventArgs, PageLoadedEventArgs и EndRequestEventArgs.
Последовательность событий изменяется в зависимости от сценариев. Порядок событий в предыдущей таблице представляет порядок события для единичной асинхронной обратной передачи, завершенной успешно. Ниже перечислены остальные сценарии:
Поведение по умолчанию подразумевает, что из нескольких обратных передач приоритет имеют последние обратные передачи. События возникают только для последних асинхронных обратных передач.
Несколько обратных передач, где одна из обратных передач имеет приоритет, в результате чего отменяются все последующие обратные передачи, вплоть до завершения выполнения приоритетной передачи. Для отмененных обратных передач вызывается только событие initializeRequest.
Асинхронная обратная передача, выполнение которой было остановлено. В зависимости от того, когда остановлена обратная передача, некоторые события могут не вызываться.
Начальный запрос (HTTP GET) страницы или обновление страницы. При первой загрузке страницы или при ее обновлении в обозревателе вызывается только событие pageLoaded.
Остановка или отмена асинхронной обратной передачи
Можно остановить выполнение асинхронной обратной передачи двумя стандартными способами: уничтожение или отмена нового запроса до начала его выполнения. Для выполнения данных задач необходимо выполнить следующие действия:
Чтобы остановить существующую асинхронную обратную передачу, следует вызвать метод abortPostback класса PageRequestManager.
Чтобы отменить новую асинхронную обратную передачу, следует обработать событие initializeRequest класса PageRequestManager и присвоить свойству 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 runat="server">
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" runat="server">
<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" runat="server">
<div >
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="CancelPostback.js" />
</Scripts>
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="Server" >
<ContentTemplate>
<asp:DataList ID="HeadlineList" runat="server">
<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"
runat="server"
OnClick="NewsClick_Handler" />
</p>
<div id="AlertDiv" class="AlertStyle">
<span id="AlertMessage"></span>
<asp:LinkButton ID="CancelRefresh" runat="server">
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 runat="server">
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 runat="server">
<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" runat="server">
<div >
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="CancelPostback.js" />
</Scripts>
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="Server" >
<ContentTemplate>
<asp:DataList ID="HeadlineList" runat="server">
<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"
runat="server"
OnClick="NewsClick_Handler" />
</p>
<div id="AlertDiv" class="AlertStyle">
<span id="AlertMessage"></span>
<asp:LinkButton ID="CancelRefresh" runat="server">
Cancel</asp:LinkButton>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Дополнительные сведения см. в разделе Отмена асинхронной обратной передачи.
Отмена новой асинхронной обратной передачи
В следующем примере показано, как присвоить приоритет указанной асинхронной обратной передаче. Таким образом можно отменить все последующие асинхронные обратные передачи вплоть до завершения текущей обратной передачи. (По умолчанию приоритет имеет последняя асинхронная обратная передача.) Обработчик событий initializeRequest проверяет, была ли асинхронная обратная передача инициализиорвана элементом на странице, имеющим приоритет. Если да, то все последующие обратные передачи отменяются путем соответствующей настройки свойства cancel объекта InitializeRequestEventArgs. Событие InitializeRequestEventArgs наследует от класса CancelEventArgs, где определено свойство cancel.
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
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" runat="server">
<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" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
<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" runat="server">Panel initially rendered.</asp:Label><br />
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
<asp:UpdateProgress ID="UpdateProgress1" runat="server" 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" runat="server">Panel initially rendered.</asp:Label><br />
<asp:Button ID="Button2" runat="server" Text="Button" OnClick="Button2_Click" />
<asp:UpdateProgress ID="UpdateProgress2" runat="server" 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 runat="server">
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" runat="server">
<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" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
<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" runat="server">Panel initially rendered.</asp:Label><br />
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
<asp:UpdateProgress ID="UpdateProgress1" runat="server" 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" runat="server">Panel initially rendered.</asp:Label><br />
<asp:Button ID="Button2" runat="server" Text="Button" OnClick="Button2_Click" />
<asp:UpdateProgress ID="UpdateProgress2" runat="server" 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>
Дополнительные сведения см. в разделе Предоставление приоритета определенным асинхронным обратным запросам.
Отображение настраиваемых сообщений об ошибках
В следующем примере демонстрируются способы отображения настраиваемых сообщений об ошибках при возникновении ошибок во время асинхронной обратной передачи. Событие AsyncPostBackError элемента управления ScriptManager обрабатывается в серверном коде, и сведения об ошибке отправляются обозревателю для отображения.
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
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 runat="server">
<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" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1"
OnAsyncPostBackError="ScriptManager1_AsyncPostBackError"
runat="server" />
<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" runat="server" GroupingText="Update Panel">
<asp:Label ID="UpdatePanelMessage" runat="server" />
<br />
Last update:
<%= DateTime.Now.ToString() %>
.
<br />
<asp:Button runat="server" ID="Button1" Text="Submit Successful Async Postback"
OnClick="SuccessProcessClick_Handler" OnClientClick="ClearErrorState()" />
<asp:Button runat="server" 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"
runat="server" 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 runat="server">
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 runat="server">
<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" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1"
OnAsyncPostBackError="ScriptManager1_AsyncPostBackError"
runat="server" />
<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" runat="server" GroupingText="Update Panel">
<asp:Label ID="UpdatePanelMessage" runat="server" />
<br />
Last update:
<%= DateTime.Now.ToString() %>
.
<br />
<asp:Button runat="server" ID="Button1" Text="Submit Successful Async Postback"
OnClick="SuccessProcessClick_Handler" OnClientClick="ClearErrorState()" />
<asp:Button runat="server" 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"
runat="server" 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 runat="server">
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" runat="server">
<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" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<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" runat="server" OnClick="ExtraShow_Click" />
and
<asp:LinkButton ID="ExtraShow2" runat="server" OnClick="ExtraShow_Click" />.
Don't forget curtain time is at 7:00pm sharp. No late arrivals.
</p>
<hr />
<div class="UpdatePanelContainer">
<asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ExtraShow1" />
<asp:AsyncPostBackTrigger ControlID="ExtraShow2" />
</Triggers>
<ContentTemplate>
<fieldset >
<legend>Check Ticket Availability</legend>Date
<asp:TextBox runat="server" ID="ChosenDate" OnTextChanged="ChosenDate_TextChanged" />
<asp:ImageButton runat="server" 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" runat="server">
<asp:Calendar ID="CalendarPicker" runat="server" OnSelectionChanged="CalendarPicker_SelectionChanged">
</asp:Calendar>
<br />
<asp:LinkButton ID="CloseDatePickerPopOut" runat="server" Font-Size="small"
OnClick="Close_Click" ToolTip="Close Pop out">
Close
</asp:LinkButton>
</asp:Panel>
<br />
Email
<asp:TextBox runat="server" ID="EmailTextBox" />
<br />
<br />
<asp:Button ID="SubmitButton" Text="Check" runat="server" ValidationGroup="RequiredFields"
OnClick="SubmitButton_Click" />
<br />
<asp:CompareValidator ID="CompareValidatorDate" runat="server"
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" runat="server"
ControlToValidate="ChosenDate" Display="None" ErrorMessage="Date is required."
ValidationGroup="RequiredFields" EnableClientScript="False"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidatorEmail"
runat="server" 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"
runat="server" ValidationGroup="RequiredFields" ControlToValidate="EmailTextBox"
Display="None" ErrorMessage="Email is required." EnableClientScript="False"></asp:RequiredFieldValidator><br />
<asp:ValidationSummary ID="ValidationSummary1" runat="server"
ValidationGroup="RequiredFields" EnableClientScript="False" />
<asp:Label ID="MessageLabel" runat="server" />
</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 runat="server">
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" runat="server">
<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" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<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" runat="server" OnClick="ExtraShow_Click" />
and
<asp:LinkButton ID="ExtraShow2" runat="server" OnClick="ExtraShow_Click" />.
Don't forget curtain time is at 7:00pm sharp. No late arrivals.
</p>
<hr />
<div class="UpdatePanelContainer">
<asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ExtraShow1" />
<asp:AsyncPostBackTrigger ControlID="ExtraShow2" />
</Triggers>
<ContentTemplate>
<fieldset>
<legend>Check Ticket Availability</legend>Date
<asp:TextBox runat="server" ID="ChosenDate" OnTextChanged="ChosenDate_TextChanged" />
<asp:ImageButton runat="server" 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" runat="server">
<asp:Calendar ID="CalendarPicker" runat="server" OnSelectionChanged="CalendarPicker_SelectionChanged">
</asp:Calendar>
<br />
<asp:LinkButton ID="CloseDatePickerPopOut" runat="server" Font-Size="small"
OnClick="Close_Click" ToolTip="Close Pop out">
Close
</asp:LinkButton>
</asp:Panel>
<br />
Email
<asp:TextBox runat="server" ID="EmailTextBox" />
<br />
<br />
<asp:Button ID="SubmitButton" Text="Check" runat="server" ValidationGroup="RequiredFields"
OnClick="SubmitButton_Click" />
<br />
<asp:CompareValidator ID="CompareValidatorDate" runat="server"
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" runat="server"
ControlToValidate="ChosenDate" Display="None" ErrorMessage="Date is required."
ValidationGroup="RequiredFields" EnableClientScript="False"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidatorEmail"
runat="server" 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"
runat="server" ValidationGroup="RequiredFields" ControlToValidate="EmailTextBox"
Display="None" ErrorMessage="Email is required." EnableClientScript="False"></asp:RequiredFieldValidator><br />
<asp:ValidationSummary ID="ValidationSummary1" runat="server"
ValidationGroup="RequiredFields" EnableClientScript="False" />
<asp:Label ID="MessageLabel" runat="server" />
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Дополнительные сведения см. в разделе Пошаговое руководство. Анимирование элементов управления ASP.NET UpdatePanel.