Cenni preliminari sulla classe PageRequestManager ASP.NET
Aggiornamento: novembre 2007
La classe PageRequestManager in Microsoft AJAX Library gestisce gli aggiornamenti parziali della pagina nel browser. Quando una pagina contiene un controllo ScriptManager e uno o più controlli UpdatePanel, la pagina supporta automaticamente il rendering a pagina parziale. La classe PageRequestManager espone proprietà, metodi ed eventi che consentono di personalizzare aggiornamenti a pagina parziale con script client ed espone un modello di eventi della pagina client che è possibile utilizzare in una modalità simile a come si utilizza il modello di eventi della pagina server.
Vengono illustrati i seguenti argomenti:
Scenari
Funzionalità
Informazioni di supporto
Esempi di codice
Argomenti relativi alle procedure e alle procedure dettagliate
Riferimento alle classi
Scenari
Per attivare l'aggiornamento a pagina parziale è possibile utilizzare i controlli server Web ScriptManager e UpdatePanel. Gli aggiornamenti a pagina parziale non richiedono lo script client. Tuttavia, è possibile utilizzare la classe PageRequestManager e lo script client per eseguire le operazioni seguenti:
Controllare l'elaborazione di più postback asincroni. In base al comportamento predefinito, l'ultimo postback ha la precedenza. La classe PageRequestManager consente di dare la precedenza a un postback specifico e annullare gli altri in esecuzione.
Fornire segnali visivi o altri tipi di notifiche per marcare le regioni aggiornate o create nella pagina, come risultato dell'ultimo postback asincrono. Può migliorare l'interazione degli utenti, specialmente negli scenari dove sono utilizzati i più controlli UpdatePanel.
Visualizzare messaggi di stato durante i postback asincroni. Se l'elaborazione dei postback impiega molto tempo, può essere utile visualizzare un indicatore di stato, ad esempio un'immagine animata. È anche possibile offrire all'utente l'opzione per annullare il postback.
Fornire la gestione personalizzata dei messaggi di errore per gli aggiornamenti a pagina parziale. Se si verifica un errore imprevisto durante un postback asincrono, è possibile gestire l'errore nello script client.
Accedere agli oggetti sottostanti di risposta e richiesta utilizzati per il postback asincrono.
Funzionalità
Le funzionalità degli aggiornamenti a pagina parziale in Microsoft AJAX Library includono i seguenti elementi:
Gli eventi client del ciclo di vita della pagina generati in momenti precisi durante gli aggiornamenti a pagina parziale.
Le informazioni sui controlli UpdatePanel eliminati, aggiornati o creati durante un postback asincrono.
Le proprietà e i metodi che consentono di determinare nello script client se la pagina elabora un postback asincrono. È anche possibile utilizzare questi metodi per arrestare un postback asincrono in esecuzione o per annullare postback nuovi.
Le informazioni sui dati del server inviati ai controlli che prendono parte agli aggiornamenti a pagina parziale.
Informazioni di supporto
Durante gli aggiornamenti a pagina parziale avviati dai postback asincroni, la classe PageRequestManager coordina l'aggiornamento incrementale del contenuto della pagina nel browser. Il controllo server UpdatePanel e la classe client PageRequestManager astraggono buona parte della complessità degli aggiornamenti a pagina parziale. Quando si utilizzano gli script client e i membri della classe PageRequestManager, è possibile personalizzare il comportamento degli aggiornamenti a pagina parziale nel browser.
Gestione dell'evento aggiornamento a pagina parziale
Durante l'elaborazione dei postback e dei postback asincroni, è possibile gestire gli eventi del modello (DOM, Document Object Model) del browser per eseguire script personalizzato. Ad esempio, è possibile eseguire uno script quando il browser carica o scarica la pagina.
Tuttavia, questi eventi DOM non consentono di accedere a tutte le informazioni pertinenti o controllare il comportamento durante i postback asincroni e durante gli aggiornamenti a pagina parziale. La classe PageRequestManager espone quindi i seguenti eventi che consentono di personalizzare gli aggiornamenti a pagina parziale:
Per ulteriori informazioni su questi eventi, vedere Utilizzo di eventi PageRequestManager.
Esempi di codice
Nell'esempio seguente è illustrato come utilizzare l'evento pageLoaded della classe PageRequestManager per animare un controllo UpdatePanel quando la pagina viene aggiornata dopo un postback asincrono. Gli utenti possono selezionare una data e immettere un indirizzo di posta elettronica in un form per effettuare la richiesta di un ticket. Quando si verifica un postback asincrono, lanciato dai collegamenti esterni al controllo UpdatePanel, il pannello si anima brevemente per notificare all'utente che il valore relativo alla data è stato immesso nella casella di testo. La pagina contiene una finestra popup che visualizza un controllo Calendar. Il calendario viene visualizzato o nascosto utilizzando la proprietà Visible del controllo. Non è necessario aggiornare l'intera pagina quando il calendario viene visualizzato o nascosto oppure quando viene selezionata una data perché il controllo Calendar è all'interno di un controllo 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>
Argomenti relativi alle procedure e alle procedure dettagliate
Procedura dettagliata: animazione dei controlli UpdatePanel ASP.NET
Assegnazione della precedenza a un postback asincrono specifico
Personalizzazione della gestione degli errori per i controlli UpdatePanel ASP.NET
Riferimento alle classi
Nella tabella seguente sono elencate le classi correlate alla classe PageRequestManager.
Classe |
Descrizione |
|---|---|
Gestisce l'aggiornamento a pagina parziale del client ed espone i membri per lo script del client personalizzato. |
|
Fornisce i dati per l'evento initializeRequest che viene generato prima dell'inizio della richiesta asincrona. |
|
Fornisce i dati per l'evento beginRequest che viene generato dopo l'inizio di un postback asincrono e prima dell'invio del postback al server. |
|
Fornisce i dati per l'evento pageLoading che viene generato dopo aver ricevuto la risposta a un postback asincrono, ma prima dell'aggiornamento del contenuto nella pagina. Questo evento non viene generato se il postback viene arrestato o se durante l'elaborazione viene generata un'eccezione non gestita nel server. |
|
Fornisce i dati per l'evento pageLoaded che viene generato dopo l'aggiornamento di tutto il contenuto nella pagina, come risultato di un postback sincrono o asincrono. Questo evento non viene generato se il postback viene arrestato o se durante l'elaborazione viene generata un'eccezione non gestita nel server. |
|
Fornisce i dati per l'evento endRequest che viene generato dopo il completamento del postback asincrono. |