Cenni preliminari sul rendering a pagina parziale
Aggiornamento: novembre 2007
Il rendering a pagina parziale elimina la necessità di aggiornare la pagina intera in seguito a un postback. Vengono invece aggiornate soltanto le singole aree della pagina che sono state modificate. Di conseguenza, gli utenti non vedono la pagina intera ricaricata a ogni postback, il che semplifica l'interazione dell'utente con la pagina Web. ASP.NET consente di aggiungere il rendering a pagina parziale a pagine Web ASP.NET nuove o esistenti senza scrivere script client.
Di seguito sono elencate le diverse sezioni di questo argomento:
Scenari
Funzionalità
Background
Esempi di codice
Riferimento alle classi
Scenari
È possibile estendere applicazioni ASP.NET esistenti e svilupparne di nuove che incorporano la funzionalità AJAX (Asynchronous JavaScript and XML). Utilizzare le funzionalità AJAX quando si desidera effettuare le operazioni seguenti:
Migliorare l'esperienza utente con pagine Web che sono più dettagliate, che rispondono di più alle azioni dell'utente e che si comportano come applicazioni client tradizionali.
Ridurre gli aggiornamenti a pagina intera ed evitare lo sfarfallio della pagina.
Attivare la compatibilità tra browser senza scrivere script client.
Eseguire comunicazioni client/server di tipo AJAX senza scrivere script client.
Utilizzare controlli e componenti dell'ASP.NET AJAX Control Toolkit.
Sviluppare controlli ASP.NET AJAX personalizzati.
Funzionalità del rendering a pagina parziale
Il rendering a pagina parziale si basa sui controlli server in ASP.NET e sulle funzioni client in Microsoft AJAX Library. Non è necessario utilizzare Microsoft AJAX Library per attivare il rendering a pagina parziale, perché questa funzionalità viene fornita automaticamente quando si utilizzano i controlli server ASP.NET AJAX. Tuttavia, è possibile utilizzare le API esposte nella libreria client per la funzionalità AJAX aggiuntiva.
Le funzionalità primarie di ASP.NET che supportano il rendering a pagina parziale sono le seguenti:
Un modello dichiarativo che funziona come i controlli server ASP.NET. In molti scenari, è possibile specificare il rendering a pagina parziale utilizzando solo il markup dichiarativo.
I controlli server che eseguono le attività sottostanti richieste per gli aggiornamenti a pagina parziale. Questi comprendono i controlli ScriptManager e UpdatePanel.
Integrazione tra controlli server ASP.NET AJAX e Microsoft AJAX Library per le attività comuni. Queste attività includono la possibilità per gli utenti di annullare un postback, la visualizzazione di messaggi di stato personalizzati durante un postback asincrono e la determinazione della modalità di elaborazione dei postback asincroni simultanei.
Opzioni della gestione degli errori per il rendering a pagina parziale che consentono di personalizzare la visualizzazione degli errori nel browser.
Compatibilità tra browser incorporata nella funzionalità AJAX di ASP.NET. Il semplice utilizzo dei controlli server richiama automaticamente la funzionalità del browser corretta.
Background
Le tipiche pagine Web compilate con i controlli server Web ASP.NET eseguono postback iniziati da un'azione dell'utente nella pagina, ad esempio il clic su un pulsante. Nella risposta, il server esegue il rendering di una nuova pagina. Spesso questa operazione include il rendering dei controlli e del testo che non sono stati modificati tra i postback.
Con il rendering a pagina parziale, è possibile aggiornare in modo asincrono aree singole della pagina e rendere la pagina più reattiva alle azioni dell'utente. È possibile implementare il rendering a pagina parziale utilizzando i controlli server Web ASP.NET AJAX e facoltativamente scrivere script client che utilizzano le API in Microsoft AJAX Library.
Controlli server per gli aggiornamenti a pagina parziale
Per aggiungere la funzionalità AJAX alle pagine Web ASP.NET, identificare sezioni singole della pagina che si desidera aggiornare. Inserire quindi il contenuto di queste sezioni nei controlli UpdatePanel. Il contenuto di un controllo UpdatePanel può essere HTML o altri controlli ASP.NET. È possibile aggiungere un controllo UpdatePanel alla pagina come un qualsiasi altro controllo. Ad esempio, in Visual Studio è possibile trascinarlo dalla casella degli strumenti alla pagina Web oppure è possibile aggiungerlo utilizzando il markup dichiarativo nella pagina. Nell'esempio riportato di seguito viene illustrato il markup di un controllo UpdatePanel:
<asp:UpdatePanel ID="UpdatePanel1" >
<ContentTemplate>
<!-- Place updatable markup and controls here. -->
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel1" >
<ContentTemplate>
<!-- Place updatable markup and controls here. -->
</ContentTemplate>
</asp:UpdatePanel>
Per impostazione predefinita, i postback che hanno origine dai controlli nel pannello di aggiornamento (controlli figlio) avviano automaticamente postback asincroni e determinano un aggiornamento a pagina parziale. È anche possibile specificare che i controlli fuori del pannello di aggiornamento determinino un postback asincrono e che aggiornino il contenuto del controllo UpdatePanel. Viene fatto riferimento a un controllo che determina un postback asincrono come a un trigger. Per ulteriori informazioni sui trigger, vedere Creazione di una pagina ASP.NET semplice con più controlli UpdatePanel.
Un postback asincrono si comporta in modo molto simile a un postback sincrono. Si verificano tutti gli eventi del ciclo di vita della pagina server e lo stato di visualizzazione e i dati del modulo vengono mantenuti. Tuttavia nella fase di rendering, solo il contenuto del controllo UpdatePanel viene inviato al browser. Il resto della pagina rimane invariato.
Per supportare il rendering a pagina parziale è necessario inserire un controllo ScriptManager nella pagina. Il controllo ScriptManager tiene traccia di tutti i pannelli di aggiornamento nella pagina e dei trigger. Coordina il comportamento di rendering a pagina parziale sul server e determina per quali sezioni della pagina eseguire il rendering in seguito a un postback asincrono.
Nell'esempio seguente viene mostrato un controllo UpdatePanel il cui contenuto viene aggiornato ogni volta che un postback ha origine dal pannello.
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script >
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
<title>Partial-Page Rendering Server-Side Syntax</title>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" />
<asp:UpdatePanel ID="UpdatePanel1" >
<ContentTemplate>
<fieldset>
<legend>UpdatePanel</legend>
Content to update incrementally without a full
page refresh.
<br />
Last update: <%=DateTime.Now.ToString() %>
<br />
<asp:Calendar ID="Calendar" />
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript" language="javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(PageLoadedEventHandler);
function PageLoadedEventHandler() {
// custom script
}
</script>
</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 >
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
<title>Partial-Page Rendering Server-Side Syntax</title>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" />
<asp:UpdatePanel ID="UpdatePanel1" >
<ContentTemplate>
<fieldset>
<legend>UpdatePanel</legend>
Content to update incrementally without a full
page refresh.
<br />
Last update: <%=DateTime.Now.ToString() %>
<br />
<asp:Calendar ID="Calendar" />
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript" language="javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(PageLoadedEventHandler);
function PageLoadedEventHandler() {
// custom script
}
</script>
</div>
</form>
</body>
</html>
Per ulteriori esempi su come utilizzare i controlli UpdatePanel per attivare il rendering a pagina parziale, vedere gli argomenti elencati nella sezione Esempi di codice.
Utilizzo di script client per gli aggiornamenti a pagina parziale
La classe PageRequestManager in ECMAScript (JavaScript) in Microsoft AJAX Library supporta aggiornamenti a pagina parziale. Viene eseguita nel browser per gestire la risposta ai postback asincroni e aggiornare il contenuto nelle singole aree. Non è necessario eseguire alcuna operazione per attivare questa funzionalità. Si verifica automaticamente quando si aggiungono uno o più controlli UpdatePanel e un controllo ScriptManager alla pagina.
È anche possibile utilizzare JavaScript e la classe PageRequestManager per personalizzare gli aggiornamenti a pagina parziale in una pagina. Ad esempio, è possibile scrivere script per dare precedenza a un postback asincrono specifico se più postback sono in esecuzione. È anche possibile consentire agli utenti di annullare postback in corso.
Nell'esempio seguente viene mostrato uno script client che fornisce un gestore eventi chiamato quando la pagina termina il caricamento.
<script type="text/javascript" language="javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(PageLoadedEventHandler);
function PageLoadedEventHandler() {
// custom script
}
</script>
<script type="text/javascript" language="javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(PageLoadedEventHandler);
function PageLoadedEventHandler() {
// custom script
}
</script>
Per ulteriori informazioni sull'utilizzo di Microsoft AJAX Library per il rendering a pagina parziale, vedere Utilizzo di eventi PageRequestManager e Cenni preliminari sulla classe PageRequestManager ASP.NET.
Attivazione del supporto del rendering a pagina parziale
Per attivare o disattivare il rendering a pagina parziale per una pagina, impostare la proprietà EnablePartialRendering del controllo ScriptManager. È anche possibile specificare se il rendering a pagina parziale è supportato per una pagina impostando la proprietà SupportsPartialRendering del controllo ScriptManager. Se non viene impostata la proprietà SupportsPartialRendering e se la proprietà EnablePartialRendering è true (che è l'impostazione predefinita), le funzionalità del browser vengono utilizzate per determinare se è supportato il rendering a pagina parziale.
Se il rendering a pagina parziale non è attivato per una pagina, se è stato disattivato o se non è supportato in un browser, la pagina utilizza il comportamento di fallback. Azioni che di norma eseguirebbero un postback asincrono eseguono invece un postback sincrono e aggiornano la pagina intera. Eventuali controlli UpdatePanel nella pagina vengono ignorati e sul relativo contenuto viene eseguito il rendering come se non fossero all'interno di un controllo UpdatePanel.
.gif "Nota") Nota: |
|---|
Le pagine Web ASP.NET configurate per il rendering preesistente non supportano la funzionalità AJAX. Per ulteriori informazioni, vedere ASP.NET e XHTML. |
Esempi di codice
Nell'esempio seguente viene mostrato il funzionamento del rendering a pagina parziale. Ci sono due controlli UpdatePanel. Un controllo riceve l'input dell'utente e un altro visualizza un riepilogo dell'input.
<%@ 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">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
<title>Enter New Employees</title>
<script >
Private EmployeeList As List(Of Employee)
Protected Sub Page_Load()
If Not IsPostBack Then
EmployeeList = New List(Of Employee)
EmployeeList.Add(New Employee(1, "Jump", "Dan"))
EmployeeList.Add(New Employee(2, "Kirwan", "Yvette"))
ViewState("EmployeeList") = EmployeeList
Else
EmployeeList = CType(ViewState("EmployeeList"), List(Of Employee))
End If
EmployeesGridView.DataSource = EmployeeList
EmployeesGridView.DataBind()
End Sub
Protected Sub InsertButton_Click(ByVal sender As Object, ByVal e As EventArgs)
If String.IsNullOrEmpty(FirstNameTextBox.Text) Or _
String.IsNullOrEmpty(LastNameTextBox.Text) Then Return
Dim employeeID As Integer = EmployeeList(EmployeeList.Count - 1).EmployeeID + 1
Dim lastName As String = Server.HtmlEncode(FirstNameTextBox.Text)
Dim firstName As String = Server.HtmlEncode(LastNameTextBox.Text)
FirstNameTextBox.Text = String.Empty
LastNameTextBox.Text = String.Empty
EmployeeList.Add(New Employee(employeeID, lastName, firstName))
ViewState("EmployeeList") = EmployeeList
EmployeesGridView.DataBind()
EmployeesGridView.PageIndex = EmployeesGridView.PageCount
End Sub
Protected Sub CancelButton_Click(ByVal sender As Object, ByVal e As EventArgs)
FirstNameTextBox.Text = String.Empty
LastNameTextBox.Text = String.Empty
End Sub
<Serializable()> _
Public Class Employee
Private _employeeID As Integer
Private _lastName As String
Private _firstName As String
Public ReadOnly Property EmployeeID() As Integer
Get
Return _employeeID
End Get
End Property
Public ReadOnly Property LastName() As String
Get
Return _lastName
End Get
End Property
Public ReadOnly Property FirstName() As String
Get
Return _firstName
End Get
End Property
Public Sub New(ByVal employeeID As Integer, ByVal lastName As String, ByVal firstName As String)
_employeeID = employeeID
_lastName = lastName
_firstName = firstName
End Sub
End Class
</script>
</head>
<body>
<form id="form1" >
<div>
</div>
<asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" />
<table>
<tr>
<td style="height: 206px" valign="top">
<asp:UpdatePanel ID="InsertEmployeeUpdatePanel" UpdateMode="Conditional">
<ContentTemplate>
<table cellpadding="2" border="0" style="background-color:#7C6F57">
<tr>
<td><asp:Label ID="FirstNameLabel" AssociatedControlID="FirstNameTextBox"
Text="First Name" ForeColor="White" /></td>
<td><asp:TextBox ID="FirstNameTextBox" /></td>
</tr>
<tr>
<td><asp:Label ID="LastNameLabel" AssociatedControlID="LastNameTextBox"
Text="Last Name" ForeColor="White" /></td>
<td><asp:TextBox ID="LastNameTextBox" /></td>
</tr>
<tr>
<td></td>
<td>
<asp:LinkButton ID="InsertButton" Text="Insert" OnClick="InsertButton_Click" ForeColor="White" />
<asp:LinkButton ID="Cancelbutton" Text="Cancel" OnClick="CancelButton_Click" ForeColor="White" />
</td>
</tr>
</table>
<asp:Label ID="InputTimeLabel"><%=DateTime.Now %></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</td>
<td style="height: 206px" valign="top">
<asp:UpdatePanel ID="EmployeesUpdatePanel" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="EmployeesGridView" BackColor="LightGoldenrodYellow" BorderColor="Tan"
BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None" AutoGenerateColumns="False">
<FooterStyle BackColor="Tan" />
<SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
<PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
<HeaderStyle BackColor="Tan" Font-Bold="True" />
<AlternatingRowStyle BackColor="PaleGoldenrod" />
<Columns>
<asp:BoundField DataField="EmployeeID" HeaderText="Employee ID" />
<asp:BoundField DataField="LastName" HeaderText="Last Name" />
<asp:BoundField DataField="FirstName" HeaderText="First Name" />
</Columns>
<PagerSettings PageButtonCount="5" />
</asp:GridView>
<asp:Label ID="ListTimeLabel"><%=DateTime.Now %></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="InsertButton" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
</table>
</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">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
<title>Enter New Employees</title>
<script >
private List<Employee> EmployeeList;
protected void Page_Load()
{
if (!IsPostBack)
{
EmployeeList = new List<Employee>();
EmployeeList.Add(new Employee(1, "Jump", "Dan"));
EmployeeList.Add(new Employee(2, "Kirwan", "Yvette"));
ViewState["EmployeeList"] = EmployeeList;
}
else
EmployeeList = (List<Employee>)ViewState["EmployeeList"];
EmployeesGridView.DataSource = EmployeeList;
EmployeesGridView.DataBind();
}
protected void InsertButton_Click(object sender, EventArgs e)
{
if (String.IsNullOrEmpty(FirstNameTextBox.Text) ||
String.IsNullOrEmpty(LastNameTextBox.Text)) { return; }
int employeeID = EmployeeList[EmployeeList.Count-1].EmployeeID + 1;
string lastName = Server.HtmlEncode(FirstNameTextBox.Text);
string firstName = Server.HtmlEncode(LastNameTextBox.Text);
FirstNameTextBox.Text = String.Empty;
LastNameTextBox.Text = String.Empty;
EmployeeList.Add(new Employee(employeeID, lastName, firstName));
ViewState["EmployeeList"] = EmployeeList;
EmployeesGridView.DataBind();
EmployeesGridView.PageIndex = EmployeesGridView.PageCount;
}
protected void CancelButton_Click(object sender, EventArgs e)
{
FirstNameTextBox.Text = String.Empty;
LastNameTextBox.Text = String.Empty;
}
[Serializable]
public class Employee
{
private int _employeeID;
private string _lastName;
private string _firstName;
public int EmployeeID
{
get { return _employeeID; }
}
public string LastName
{
get { return _lastName; }
}
public string FirstName
{
get { return _firstName; }
}
public Employee(int employeeID, string lastName, string firstName)
{
_employeeID = employeeID;
_lastName = lastName;
_firstName = firstName;
}
}
</script>
</head>
<body>
<form id="form1" >
<div>
</div>
<asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" />
<table>
<tr>
<td style="height: 206px" valign="top">
<asp:UpdatePanel ID="InsertEmployeeUpdatePanel" UpdateMode="Conditional">
<ContentTemplate>
<table cellpadding="2" border="0" style="background-color:#7C6F57">
<tr>
<td><asp:Label ID="FirstNameLabel" AssociatedControlID="FirstNameTextBox"
Text="First Name" ForeColor="White" /></td>
<td><asp:TextBox ID="FirstNameTextBox" /></td>
</tr>
<tr>
<td><asp:Label ID="LastNameLabel" AssociatedControlID="LastNameTextBox"
Text="Last Name" ForeColor="White" /></td>
<td><asp:TextBox ID="LastNameTextBox" /></td>
</tr>
<tr>
<td></td>
<td>
<asp:LinkButton ID="InsertButton" Text="Insert" OnClick="InsertButton_Click" ForeColor="White" />
<asp:LinkButton ID="Cancelbutton" Text="Cancel" OnClick="CancelButton_Click" ForeColor="White" />
</td>
</tr>
</table>
<asp:Label ID="InputTimeLabel"><%=DateTime.Now %></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</td>
<td style="height: 206px" valign="top">
<asp:UpdatePanel ID="EmployeesUpdatePanel" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="EmployeesGridView" BackColor="LightGoldenrodYellow" BorderColor="Tan"
BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None" AutoGenerateColumns="False">
<FooterStyle BackColor="Tan" />
<SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
<PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
<HeaderStyle BackColor="Tan" Font-Bold="True" />
<AlternatingRowStyle BackColor="PaleGoldenrod" />
<Columns>
<asp:BoundField DataField="EmployeeID" HeaderText="Employee ID" />
<asp:BoundField DataField="LastName" HeaderText="Last Name" />
<asp:BoundField DataField="FirstName" HeaderText="First Name" />
</Columns>
<PagerSettings PageButtonCount="5" />
</asp:GridView>
<asp:Label ID="ListTimeLabel"><%=DateTime.Now %></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="InsertButton" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</td>
</tr>
</table>
</form>
</body>
</html>
Argomenti relativi alle procedure e alle procedure dettagliate
Creazione di una pagina ASP.NET semplice con più controlli UpdatePanel
Utilizzo del controllo UpdatePanel ASP.NET con più controlli con associazione a dati
Utilizzo del controllo UpdatePanel ASP.NET con pagine master
Personalizzazione della gestione degli errori per i controlli UpdatePanel ASP.NET
Procedura dettagliata: animazione dei controlli UpdatePanel ASP.NET
Assegnazione della precedenza a un postback asincrono specifico
Riferimento alle classi
Nella tabella seguente sono elencate le classi server principali per il rendering a pagina parziale.
Classe |
Descrizione |
|---|---|
Specifica le aree della pagina da aggiornare durante il rendering a pagina parziale. |
|
Gestisce componenti AJAX in ASP.NET, il rendering a pagina parziale, richieste dei client e risposte del server nelle pagine Web ASP.NET. |
|
Consente ai componenti nidificati di aggiungere script e i riferimenti ai servizi a pagine che già contengono un controllo ScriptManager in un elemento padre. |
Nella tabella seguente viene elencata la classe client principale per il rendering a pagina parziale.
Classe |
Descrizione |
|---|---|
Gestisce il rendering a pagina parziale del client ed espone i membri per gli script client personalizzati. |