Cenni preliminari sui controlli UpdatePanel
Aggiornamento: novembre 2007
Grazie ai controlli ASP.NET UpdatePanel è possibile compilare applicazioni Web avanzate basate su client. I controlli UpdatePanel consentono di aggiornare parti specifiche di una pagina anziché aggiornare l'intera pagina quando si verifica un postback. Questa operazione è nota come aggiornamento a pagina parziale. Una pagina Web ASP.NET contenente un controllo ScriptManager e uno o più controlli UpdatePanel è in grado di partecipare automaticamente agli aggiornamenti a pagina parziale, senza dover implementare script client personalizzati.
In questo argomento sono presenti informazioni su:
Scenari
Informazioni di supporto
Esempi di codice
Riferimento alle classi
Scenari
Il controllo UpdatePanel è un controllo server che consente di sviluppare pagine Web aventi un comportamento client complesso in grado di rendere più interattiva l'esperienza dell'utente. In genere la scrittura di codice coordinato fra server e client finalizzato all'aggiornamento di aree specifiche di una pagina Web richiede una conoscenza approfondita di ECMAScript (JavaScript). Tuttavia, l'utilizzo di un controllo UpdatePanel consente di includere una pagina Web in un aggiornamento a pagina parziale senza dover ricorrere a script client. Se lo si desidera, è possibile aggiungere script client personalizzati per migliorare l'esperienza client dell'utente. L'utilizzo di un controllo UpdatePanel consente inoltre di rendere il comportamento della pagina indipendente dal browser utilizzato e, in alcuni casi, di ridurre la quantità di dati scambiata tra client e server.
Informazioni di supporto
Il funzionamento di un controllo UpdatePanel consiste nella definizione di aree di una pagina che è possibile aggiornare senza dover aggiornare l'intera pagina. Questo processo viene coordinato dal controllo server ScriptManager e dalla classe client PageRequestManager. L'attivazione degli aggiornamenti a pagina parziale consente ai controlli di eseguire postback asincroni al server. Analogamente a un postback normale, un postback asincrono comporta la creazione di una pagina server che esegue il ciclo di vita completo della pagina e dei controlli. Tuttavia, quando si verifica un postback asincrono, gli aggiornamenti della pagina riguardano esclusivamente le aree della pagina incluse nei controlli UpdatePanel e contrassegnate per l'aggiornamento. Il server invia al browser soltanto il markup HTML degli elementi interessati. Nel browser, la classe client PageRequestManager esegue un'elaborazione DOM (Document Object Model, modello di oggetti documento) per aggiornare il markup HTML.
.gif "Nota") Nota: |
|---|
Quando si utilizzano i postback asincroni o l'oggetto XMLHTTPRequest, può verificarsi un errore di postback se l'URL contiene un carattere a byte doppio. È possibile risolvere questo problema includendo un elemento <base href="url"/> nell'elemento head della pagina, in cui l'attributo href è impostato sulla stringa con codifica URL che fa riferimento alla pagina. È possibile aggiungere questo elemento incluso dinamicamente nel codice server. |
L'illustrazione seguente mostra una pagina caricata per la prima volta e un postback asincrono successivo che aggiorna il contenuto di un controllo UpdatePanel.
Cenni preliminari sul rendering a pagina parziale
.png)
Attivazione degli aggiornamenti a pagina parziale
Per poter utilizzare un controllo UpdatePanel è necessario che all'interno della pagina Web sia presente un controllo ScriptManager. Per impostazione predefinita, gli aggiornamenti a pagina parziale sono attivi. Infatti, il valore predefinito della proprietà EnablePartialRendering del controllo ScriptManager è true.
L'esempio seguente illustra un markup che definisce all'interno di una pagina un controllo ScriptManager e un controllo UpdatePanel. Il controllo UpdatePanel contiene un controllo Button che consente di aggiornare il contenuto del pannello quando si fa clic su di esso. Per impostazione predefinita, la proprietà ChildrenAsTriggers è impostata su true. Pertanto, il controllo Button funziona come un controllo di postback asincrono.
<asp:ScriptManager ID="ScriptManager"
/>
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
>
<ContentTemplate>
<fieldset>
<legend>UpdatePanel content</legend>
<!-- Other content in the panel. -->
<%=DateTime.Now.ToString() %>
<br />
<asp:Button ID="Button1"
Text="Refresh Panel"
/>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
<asp:ScriptManager ID="ScriptManager"
/>
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
>
<ContentTemplate>
<fieldset>
<legend>UpdatePanel content</legend>
<!-- Other content in the panel. -->
<%=DateTime.Now.ToString() %>
<br />
<asp:Button ID="Button1"
Text="Refresh Panel"
/>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
Definizione del contenuto dei controlli UpdatePanel
La definizione del contenuto di un controllo UpdatePanel può essere eseguita in modo dichiarativo oppure tramite la finestra di progettazione utilizzando la proprietà ContentTemplate. Nel markup, questa proprietà viene esposta come elemento ContentTemplate. La definizione di contenuto a livello di codice viene invece eseguita tramite la proprietà ContentTemplateContainer.
Il primo rendering di una pagina contenente uno o più controlli UpdatePanel riguarda l'intero contenuto dei controlli UpdatePanel. Dopo aver eseguito questo primo rendering, il sistema invia i dati risultanti al browser. Quando in seguito si eseguono postback asincroni, è possibile che il contenuto di determinati controlli UpdatePanel venga aggiornato. Ciò dipende dalle impostazioni del pannello, dall'elemento che ha generato il postback e dal codice specifico di ogni pannello.
Definizione dei trigger dei controlli UpdatePanel
Per impostazione predefinita, la presenza di un controllo di postback in un controllo UpdatePanel comporta un postback asincrono e l'aggiornamento del contenuto del pannello. Tuttavia, l'aggiornamento di un controllo UpdatePanel può anche essere ottenuto mediante la configurazione di altri controlli contenuti nella pagina. A tale scopo è possibile definire un trigger per il controllo UpdatePanel. Un trigger è un'associazione che specifica quale controllo di postback e quale evento comportano l'aggiornamento di un pannello. Quando si verifica l'evento specificato nel trigger del controllo (ad esempio, l'evento Click di un pulsante), il pannello viene aggiornato.
L'esempio seguente illustra come definire un trigger per un controllo UpdatePanel.
<asp:Button ID="Button1"
Text="Refresh Panel"
/>
<asp:ScriptManager ID="ScriptManager1"
/>
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
<ContentTemplate>
<fieldset>
<legend>UpdatePanel content</legend>
<%=DateTime.Now.ToString() %>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="Button1"
Text="Refresh Panel"
/>
<asp:ScriptManager ID="ScriptManager1"
/>
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
<ContentTemplate>
<fieldset>
<legend>UpdatePanel content</legend>
<%=DateTime.Now.ToString() %>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
Il trigger viene specificato tramite l'elemento asp:AsyncPostBackTrigger appartenente all'elemento Triggers del controllo UpdatePanel. Se si modifica la pagina in Visual Studio, la creazione di trigger può essere eseguita tramite la finestra di dialogo Editor dell'insieme UpdatePanelTrigger.
L'evento di controllo di un trigger è facoltativo. Se non si specifica alcun evento, l'evento del trigger corrisponde all'evento predefinito del controllo. Ad esempio, per il controllo Button, l'evento predefinito è Click.
Modalità di aggiornamento dei controlli UpdatePanel
Nell'elenco seguente sono descritte le impostazioni delle proprietà del controllo UpdatePanel che determinano quando il contenuto di un pannello viene aggiornato durante il rendering a pagina parziale.
Se la proprietà UpdateMode è impostata su Always, il contenuto del controllo UpdatePanel viene aggiornato a ogni postback che ha origine in qualsiasi elemento della pagina. Sono inclusi i postback asincroni provenienti da controlli situati all'interno di altri controlli UpdatePanel e i postback provenienti da controlli non situati all'interno di controlli UpdatePanel.
Se la proprietà UpdateMode è impostata su Conditional, il contenuto del controllo UpdatePanel viene aggiornato quando sussiste una delle condizioni seguenti:
Quando il postback è generato da un trigger appartenente a tale controllo UpdatePanel.
Quando si chiama in modo esplicito il metodo Update del controllo UpdatePanel.
Quando il controllo UpdatePanel è nidificato all'interno di un altro controllo UpdatePanel e viene aggiornato il pannello padre.
Quando la proprietà ChildrenAsTriggers è impostata su true e un qualsiasi controllo figlio del controllo UpdatePanel genera un postback. I controlli figlio di controlli UpdatePanel nidificati non comportano l'aggiornamento del controllo UpdatePanel esterno, a meno che non vengano definiti in modo esplicito come trigger del pannello padre.
Se si imposta la proprietà ChildrenAsTriggers su false e la proprietà UpdateMode su Always, viene generata un'eccezione. La proprietà ChildrenAsTriggers deve essere utilizzata solo quando la proprietà UpdateMode è impostata su Conditional.
Utilizzo di controlli UpdatePanel nelle pagine master
Per utilizzare un controllo UpdatePanel in una pagina master è necessario decidere la modalità di inclusione del controllo ScriptManager. Se nella pagina master si include il controllo ScriptManager, quest'ultimo può svolgere la funzione di controllo ScriptManager per tutte le pagine di contenuto. Se si desidera registrare script o servizi in modo dichiarativo in una pagina di contenuto, è possibile aggiungere a quest'ultima un controllo ScriptManagerProxy.
Se la pagina master non contiene il controllo ScriptManager, il controllo ScriptManager può essere aggiunto individualmente in ogni pagina di contenuto in cui è presente un controllo UpdatePanel. La scelta di progettazione dipende da come si intende gestire lo script client nell'applicazione. Per ulteriori informazioni sulla gestione dello script client, vedere Cenni preliminari sul controllo ScriptManager. Per ulteriori informazioni sulle pagine master, vedere Informazioni generali sulle pagine master ASP.NET.
In alcuni casi è necessario che una determinata pagina di contenuto non presenti alcuna funzionalità di rendering a pagina parziale, anche se nella pagina master è presente il controllo ScriptManager. In questi casi occorre impostare su false a livello di codice la proprietà EnablePartialRendering del controllo ScriptManager presente in tale pagina di contenuto.
L'esempio seguente illustra il markup di un controllo ScriptManager contenuto nella pagina master e di un controllo UpdatePanel appartenente a una pagina di contenuto. In questo esempio, nella pagina master viene definita una proprietà LastUpdate a cui si fa riferimento nel controllo UpdatePanel.
<%@ Master Language="VB" %>
<!DOCTYPE html PUBLIC "-'W3C'DTD XHTML 1.0 Transitional'EN"
"http:'www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script >
Public Property LastUpdate() As DateTime
Get
If ViewState("LastUpdate") Is Nothing Then
Return DateTime.Now
Else : Return ViewState("LastUpdate")
End If
End Get
Set(ByVal value As DateTime)
ViewState("LastUpdate") = value
End Set
End Property
Protected Sub MasterButton2_Click(ByVal Sender As Object, ByVal E As EventArgs)
LastUpdate = DateTime.Now
Dim up1 As UpdatePanel
up1 = ContentPlaceHolder1.FindControl("UpdatePanel1")
up1.Update()
End Sub
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
ScriptManager1.RegisterAsyncPostBackControl(Button2)
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>ScriptManager in Master Page Example</title>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" />
<asp:Panel ID="MasterPanel1" GroupingText="Master Page">
<asp:Button ID="Button1" Text="Full Page Refresh" />
<asp:Button ID="Button2" Text="Refresh Panel" OnClick="MasterButton2_Click" />
</asp:Panel>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" >
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
<%@ Master Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script >
public DateTime LastUpdate
{
get
{
return (DateTime)(ViewState["LastUpdate"] ?? DateTime.Now);
}
set
{
ViewState["LastUpdate"] = value;
}
}
protected void MasterButton2_Click(object sender, EventArgs e)
{
LastUpdate = DateTime.Now;
((UpdatePanel)ContentPlaceHolder1.FindControl("UpdatePanel1")).Update();
}
protected void Page_Load(object sender, EventArgs e)
{
ScriptManager1.RegisterAsyncPostBackControl(Button2);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>ScriptManager in Master Page Example</title>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" />
<asp:Panel ID="MasterPanel1" GroupingText="Master Page">
<asp:Button ID="Button1" Text="Full Page Refresh" />
<asp:Button ID="Button2" Text="Refresh Panel" OnClick="MasterButton2_Click" />
</asp:Panel>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" >
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
<%@ Page Language="VB" MasterPageFile="MasterVB.master"
Title="ScriptManager in Content Page" %>
<%@ MasterType VirtualPath="MasterVB.master" %>
<script >
Protected Sub Button3_Click(ByVal Sender As Object, ByVal E As EventArgs)
Master.LastUpdate = DateTime.Now
End Sub
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1"
runat="Server">
</asp:ScriptManagerProxy>
<asp:Panel ID="Panel2"
GroupingText="ContentPage"
>
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
>
<ContentTemplate>
<p>
Last updated: <strong>
<%= Master.LastUpdate.ToString() %>
</strong>
</p>
<asp:Button ID="Button3"
Text="Refresh Panel"
OnClick="Button3_Click"
/>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
</asp:Content>
<%@ Page Language="C#" MasterPageFile="MasterCS.master"
Title="ScriptManager in Content Page" %>
<%@ MasterType VirtualPath="MasterCS.master" %>
<script >
protected void Button3_Click(object sender, EventArgs e)
{
Master.LastUpdate = DateTime.Now;
}
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1"
runat="Server">
<asp:Panel ID="Panel2"
GroupingText="ContentPage"
>
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
>
<ContentTemplate>
<p>
Last updated: <strong>
<%= Master.LastUpdate.ToString() %>
</strong>
</p>
<asp:Button ID="Button3"
Text="Refresh Panel"
OnClick="Button3_Click"
/>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
</asp:Content>
Utilizzo di controlli UpdatePanel nidificati
I controlli UpdatePanel possono essere nidificati. Se si aggiorna il pannello padre, vengono aggiornati anche tutti i pannelli nidificati.
L'esempio seguente illustra un markup che definisce un controllo UpdatePanel all'interno di un altro controllo UpdatePanel. L'utilizzo di un pulsante contenuto nel pannello padre comporta l'aggiornamento sia del pannello padre sia del pannello figlio. L'utilizzo di un pulsante contenuto nel pannello figlio comporta invece l'aggiornamento solo del pannello figlio.
<%@ 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 id="Head1" >
<title>UpdatePanelUpdateMode Example</title>
<style type="text/css">
div.NestedPanel
{
position: relative;
margin: 2% 5% 2% 5%;
}
</style>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager"
/>
<asp:UpdatePanel ID="OuterPanel"
UpdateMode="Conditional"
>
<ContentTemplate>
<div>
<fieldset>
<legend>Outer Panel </legend>
<br />
<asp:Button ID="OPButton1"
Text="Outer Panel Button"
/>
<br />
Last updated on
<%= DateTime.Now.ToString() %>
<br />
<br />
<asp:UpdatePanel ID="NestedPanel1"
UpdateMode="Conditional"
>
<ContentTemplate>
<div class="NestedPanel">
<fieldset>
<legend>Nested Panel 1</legend>
<br />
Last updated on
<%= DateTime.Now.ToString() %>
<br />
<asp:Button ID="NPButton1"
Text="Nested Panel 1 Button"
/>
</fieldset>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</fieldset>
</div>
</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 >
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>UpdatePanelUpdateMode Example</title>
<style type="text/css">
div.NestedPanel
{
position: relative;
margin: 2% 5% 2% 5%;
}
</style>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager"
/>
<asp:UpdatePanel ID="OuterPanel"
UpdateMode="Conditional"
>
<ContentTemplate>
<div>
<fieldset>
<legend>Outer Panel </legend>
<br />
<asp:Button ID="OPButton1"
Text="Outer Panel Button"
/>
<br />
Last updated on
<%= DateTime.Now.ToString() %>
<br />
<br />
<asp:UpdatePanel ID="NestedPanel1"
UpdateMode="Conditional"
>
<ContentTemplate>
<div class="NestedPanel">
<fieldset>
<legend>Nested Panel 1</legend>
<br />
Last updated on
<%= DateTime.Now.ToString() %>
<br />
<asp:Button ID="NPButton1"
Text="Nested Panel 1 Button"
/>
</fieldset>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</fieldset>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Nell'esempio di codice seguente viene illustrato un controllo UpdatePanel nidificato contenente un controllo GridView. Il controllo GridView è contenuto in un controllo UpdatePanel e ogni riga del controllo GridView contiene un controllo GridView nidificato in un altro 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">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
<title>Browse Departments</title>
<script >
Protected Sub DepartmentsGridView_RowDataBound(sender As object, e As GridViewRowEventArgs)
If e.Row.RowType = DataControlRowType.DataRow Then
Dim s As SqlDataSource = CType(e.Row.FindControl("EmployeesDataSource"), SqlDataSource)
Dim r As System.Data.DataRowView = CType(e.Row.DataItem, System.Data.DataRowView)
s.SelectParameters("DepartmentID").DefaultValue = r("DepartmentID").ToString()
End If
End Sub
</script>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" />
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="DepartmentsGridView" AllowPaging="True" AllowSorting="True"
AutoGenerateColumns="False" CellPadding="4" DataSourceID="DepartmentDataSource"
ForeColor="#333333" GridLines="None" PageSize="3" OnRowDataBound="DepartmentsGridView_RowDataBound">
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<Columns>
<asp:BoundField DataField="GroupName" HeaderText="Division" SortExpression="GroupName" >
<ItemStyle Width="200px" />
</asp:BoundField>
<asp:BoundField DataField="Name" HeaderText="Department Name" SortExpression="Name" >
<ItemStyle Width="160px" />
</asp:BoundField>
<asp:TemplateField HeaderText="Employees">
<ItemTemplate>
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="EmployeesGridView" AllowPaging="True" AllowSorting="True"
AutoGenerateColumns="False" BackColor="White" BorderColor="#999999" BorderStyle="None"
BorderWidth="1px" CellPadding="3" DataSourceID="EmployeesDataSource" GridLines="Vertical"
PageSize="4">
<FooterStyle BackColor="#CCCCCC" ForeColor="Black" />
<Columns>
<asp:BoundField DataField="FirstName" HeaderText="First Name" SortExpression="FirstName" >
<ItemStyle Width="80px" />
</asp:BoundField>
<asp:BoundField DataField="LastName" HeaderText="Last Name" SortExpression="LastName" >
<ItemStyle Width="160px" />
</asp:BoundField>
</Columns>
<RowStyle BackColor="#EEEEEE" ForeColor="Black" />
<SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
<HeaderStyle BackColor="#000084" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="Gainsboro" />
</asp:GridView>
<asp:Label ID="InnerTimeLabel"><%=DateTime.Now %></asp:Label>
<asp:SqlDataSource ID="EmployeesDataSource" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
SelectCommand="SELECT HumanResources.EmployeeDepartmentHistory.DepartmentID,
HumanResources.vEmployee.EmployeeID,
HumanResources.vEmployee.FirstName,
HumanResources.vEmployee.LastName
FROM HumanResources.EmployeeDepartmentHistory
INNER JOIN HumanResources.vEmployee
ON HumanResources.EmployeeDepartmentHistory.EmployeeID = HumanResources.vEmployee.EmployeeID
WHERE HumanResources.EmployeeDepartmentHistory.DepartmentID = @DepartmentID
ORDER BY HumanResources.vEmployee.LastName ASC, HumanResources.vEmployee.FirstName ASC">
<SelectParameters>
<asp:Parameter Name="DepartmentID" DefaultValue="0" Type="int32" />
</SelectParameters>
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
<ItemStyle Height="170px" Width="260px" />
</asp:TemplateField>
</Columns>
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" VerticalAlign="Top" />
<EditRowStyle BackColor="#999999" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" HorizontalAlign="Left" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" VerticalAlign="Top" />
</asp:GridView>
<asp:Label ID="OuterTimeLabel"><%=DateTime.Now %></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:SqlDataSource ID="DepartmentDataSource" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
SelectCommand="SELECT DepartmentID, Name, GroupName FROM HumanResources.Department ORDER BY Name">
</asp:SqlDataSource>
</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">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
<title>Browse Departments</title>
<script >
protected void DepartmentsGridView_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
SqlDataSource s = (SqlDataSource)e.Row.FindControl("EmployeesDataSource");
System.Data.DataRowView r = (System.Data.DataRowView)e.Row.DataItem;
s.SelectParameters["DepartmentID"].DefaultValue = r["DepartmentID"].ToString();
}
}
</script>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" />
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="DepartmentsGridView" AllowPaging="True" AllowSorting="True"
AutoGenerateColumns="False" CellPadding="4" DataSourceID="DepartmentDataSource"
ForeColor="#333333" GridLines="None" PageSize="3" OnRowDataBound="DepartmentsGridView_RowDataBound">
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<Columns>
<asp:BoundField DataField="GroupName" HeaderText="Division" SortExpression="GroupName" >
<ItemStyle Width="200px" />
</asp:BoundField>
<asp:BoundField DataField="Name" HeaderText="Department Name" SortExpression="Name" >
<ItemStyle Width="160px" />
</asp:BoundField>
<asp:TemplateField HeaderText="Employees">
<ItemTemplate>
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="EmployeesGridView" AllowPaging="True" AllowSorting="True"
AutoGenerateColumns="False" BackColor="White" BorderColor="#999999" BorderStyle="None"
BorderWidth="1px" CellPadding="3" DataSourceID="EmployeesDataSource" GridLines="Vertical"
PageSize="4">
<FooterStyle BackColor="#CCCCCC" ForeColor="Black" />
<Columns>
<asp:BoundField DataField="FirstName" HeaderText="First Name" SortExpression="FirstName" >
<ItemStyle Width="80px" />
</asp:BoundField>
<asp:BoundField DataField="LastName" HeaderText="Last Name" SortExpression="LastName" >
<ItemStyle Width="160px" />
</asp:BoundField>
</Columns>
<RowStyle BackColor="#EEEEEE" ForeColor="Black" />
<SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
<HeaderStyle BackColor="#000084" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="Gainsboro" />
</asp:GridView>
<asp:Label ID="InnerTimeLabel"><%=DateTime.Now %></asp:Label>
<asp:SqlDataSource ID="EmployeesDataSource" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
SelectCommand="SELECT HumanResources.EmployeeDepartmentHistory.DepartmentID,
HumanResources.vEmployee.EmployeeID,
HumanResources.vEmployee.FirstName,
HumanResources.vEmployee.LastName
FROM HumanResources.EmployeeDepartmentHistory
INNER JOIN HumanResources.vEmployee
ON HumanResources.EmployeeDepartmentHistory.EmployeeID = HumanResources.vEmployee.EmployeeID
WHERE HumanResources.EmployeeDepartmentHistory.DepartmentID = @DepartmentID
ORDER BY HumanResources.vEmployee.LastName ASC, HumanResources.vEmployee.FirstName ASC">
<SelectParameters>
<asp:Parameter Name="DepartmentID" DefaultValue="0" Type="int32" />
</SelectParameters>
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
<ItemStyle Height="170px" Width="260px" />
</asp:TemplateField>
</Columns>
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" VerticalAlign="Top" />
<EditRowStyle BackColor="#999999" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" HorizontalAlign="Left" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" VerticalAlign="Top" />
</asp:GridView>
<asp:Label ID="OuterTimeLabel"><%=DateTime.Now %></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:SqlDataSource ID="DepartmentDataSource" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
SelectCommand="SELECT DepartmentID, Name, GroupName FROM HumanResources.Department ORDER BY Name">
</asp:SqlDataSource>
</div>
</form>
</body>
</html>
Quando un controllo GridView interno visualizza una nuova pagina di record, il pannello esterno e i pannelli delle altre righe del controllo GridView esterno non vengono aggiornati. Quando il controllo GridView esterno visualizza una nuova pagina di record, sia il pannello esterno sia i pannelli nidificati vengono aggiornati.
Aggiornamento di controlli UpdatePanel a livello di codice
L'esempio seguente illustra come aggiornare un controllo UpdatePanel a livello di codice. In questo esempio, una pagina chiama il metodo RegisterAsyncPostBackControl allo scopo di registrare un controllo come trigger. Il codice aggiorna il controllo UpdatePanel a livello di codice chiamando il metodo Update.
<%@ 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 Property AnsweredQuestions As SortedList
Get
If ViewState("AnsweredQuestions") IsNot Nothing Then
Return CType(ViewState("AnsweredQuestions"), SortedList)
Else
Return New SortedList()
End If
End Get
Set
ViewState("AnsweredQuestions") = value
End Set
End Property
Protected Sub Page_Load()
ScriptManager1.RegisterAsyncPostBackControl(SurveyDataList)
End Sub
Protected Sub ChoicesRadioButtonList_SelectedIndexChanged(sender As Object, e As EventArgs)
Dim answers As SortedList = Me.AnsweredQuestions
Dim r As RadioButtonList = CType(sender, RadioButtonList)
answers(r.ToolTip) = r.SelectedValue
Me.AnsweredQuestions = answers
ResultsList.DataSource = Me.AnsweredQuestions
ResultsList.DataBind()
If Me.AnsweredQuestions.Count = SurveyDataList.Items.Count Then _
SubmitButton.Visible = True
UpdatePanel1.Update()
End Sub
Protected Sub SubmitButton_Click(sender As Object, e As EventArgs)
' Submit responses.
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>Registering Controls as Async Postback Controls</title>
<style type="text/css">
.AnswerFloatPanelStyle {
background-color: bisque;
position: absolute;
right: 10px;
height: 130px;
width: 150px;
border-right: silver thin solid; border-top: silver thin solid;
border-left: silver thin solid; border-bottom: silver thin solid;
}
</style>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" />
<div id="AnswerFloatPanel" class="AnswerFloatPanelStyle" >
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
<ContentTemplate>
Completed Questions:
<asp:DataList ID="ResultsList" >
<ItemTemplate>
<asp:Label ID="ResultQuestion" Text='<%# Eval("Key") %>' />
::
<asp:Label ID="ResultAnswer" Text='<%# Eval("Value") %>' />
</ItemTemplate>
</asp:DataList>
<p style="text-align: right">
<asp:Button ID="SubmitButton" Text="Submit" Visible="false"
OnClick="SubmitButton_Click" />
</p>
<asp:Label ID="Message" runat="Server" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
<asp:XmlDataSource ID="SurveyDataSource"
XPath="/Questions/Question"
DataFile="~/App_Data/SurveyQuestions.xml"/>
<asp:DataList
ID="SurveyDataList"
DataSourceID="SurveyDataSource"
>
<ItemTemplate>
<table cellpadding="2" cellspacing="2">
<tr>
<td valign="top">
<asp:Label id="QuestionLabel" Text='<%# XPath("@Title")%>' />
</td>
</tr>
<tr><td>
<asp:RadioButtonList ID="ChoicesRadioButtonList"
DataSource='<%#XPathSelect("Choices/Choice") %>'
DataTextField="InnerText" DataValueField="InnerText"
AutoPostBack="True"
ToolTip='<%# "Question" + XPath("@ID") %>'
OnSelectedIndexChanged="ChoicesRadioButtonList_SelectedIndexChanged"/>
</td></tr>
</table>
<hr />
</ItemTemplate>
</asp:DataList>
</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 SortedList AnsweredQuestions
{
get { return (SortedList)(ViewState["AnsweredQuestions"] ?? new SortedList()); }
set { ViewState["AnsweredQuestions"] = value; }
}
protected void Page_Load()
{
ScriptManager1.RegisterAsyncPostBackControl(SurveyDataList);
}
protected void ChoicesRadioButtonList_SelectedIndexChanged(object sender, EventArgs e)
{
SortedList answers = this.AnsweredQuestions;
RadioButtonList r = (RadioButtonList)sender;
answers[r.ToolTip] = r.SelectedValue;
this.AnsweredQuestions = answers;
ResultsList.DataSource = this.AnsweredQuestions;
ResultsList.DataBind();
if (this.AnsweredQuestions.Count == SurveyDataList.Items.Count)
SubmitButton.Visible = true;
UpdatePanel1.Update();
}
protected void SubmitButton_Click(object sender, EventArgs e)
{
// Submit responses.
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>Registering Controls as Async Postback Controls</title>
<style type="text/css">
.AnswerFloatPanelStyle {
background-color: bisque;
position: absolute;
right: 10px;
height: 130px;
width: 150px;
border-right: silver thin solid; border-top: silver thin solid;
border-left: silver thin solid; border-bottom: silver thin solid;
}
</style>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" />
<div id="AnswerFloatPanel" class="AnswerFloatPanelStyle" >
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
<ContentTemplate>
Completed Questions:
<asp:DataList ID="ResultsList" >
<ItemTemplate>
<asp:Label ID="ResultQuestion" Text='<%# Eval("Key") %>' />
::
<asp:Label ID="ResultAnswer" Text='<%# Eval("Value") %>' />
</ItemTemplate>
</asp:DataList>
<p style="text-align: right">
<asp:Button ID="SubmitButton" Text="Submit" Visible="false"
OnClick="SubmitButton_Click" />
</p>
<asp:Label ID="Message" runat="Server" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
<asp:XmlDataSource ID="SurveyDataSource"
XPath="/Questions/Question"
DataFile="~/App_Data/SurveyQuestions.xml"/>
<asp:DataList
ID="SurveyDataList"
DataSourceID="SurveyDataSource"
>
<ItemTemplate>
<table cellpadding="2" cellspacing="2">
<tr>
<td valign="top">
<asp:Label id="QuestionLabel" Text='<%# XPath("@Title")%>' />
</td>
</tr>
<tr><td>
<asp:RadioButtonList ID="ChoicesRadioButtonList"
DataSource='<%#XPathSelect("Choices/Choice") %>'
DataTextField="InnerText" DataValueField="InnerText"
AutoPostBack="True"
ToolTip='<%# "Question" + XPath("@ID") %>'
OnSelectedIndexChanged="ChoicesRadioButtonList_SelectedIndexChanged"/>
</td></tr>
</table>
<hr />
</ItemTemplate>
</asp:DataList>
</div>
</form>
</body>
</html>
Creazione di controlli UpdatePanel a livello di codice
Per aggiungere a una pagina un controllo UpdatePanel a livello di codice è necessario creare una nuova istanza del controllo UpdatePanel e quindi aggiungervi controlli tramite la proprietà ContentTemplateContainer e il metodo ControlCollection.Add. Evitare di aggiungere controlli direttamente alla proprietà ContentTemplate.
Quando si aggiunge un controllo UpdatePanel a livello di codice, solo i postback provenienti dai controlli appartenenti allo stesso contenitore di denominazione del controllo UpdatePanel possono essere utilizzati come trigger del pannello.
L'esempio seguente illustra come aggiungere a una pagina un controllo UpdatePanel a livello di codice. Nell'esempio si utilizza la proprietà ContentTemplateContainer per aggiungere al pannello un controllo Label e un controllo Button. Poiché la proprietà ChildrenAsTriggers è true per impostazione predefinita, il controllo Button funziona come trigger del panello.
<%@ 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 Page_Load(ByVal Sender As Object, ByVal E As EventArgs)
Dim up1 As UpdatePanel
up1 = New UpdatePanel()
up1.ID = "UpdatePanel1"
up1.UpdateMode = UpdatePanelUpdateMode.Conditional
Dim button1 As Button
button1 = New Button()
button1.ID = "Button1"
button1.Text = "Submit"
AddHandler button1.Click, AddressOf Button_Click
Dim label1 As Label
label1 = New Label()
label1.ID = "Label1"
label1.Text = "A full page postback occurred."
up1.ContentTemplateContainer.Controls.Add(button1)
up1.ContentTemplateContainer.Controls.Add(label1)
Page.Form.Controls.Add(up1)
End Sub
Protected Sub Button_Click(ByVal Sender As Object, ByVal E As EventArgs)
Dim lbl As Label
lbl = Page.FindControl("Label1")
lbl.Text = "Panel refreshed at " & _
DateTime.Now.ToString()
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>UpdatePanel Added Programmatically Example</title>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="TheScriptManager"
/>
</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 Page_Load(object sender, EventArgs e)
{
UpdatePanel up1 = new UpdatePanel();
up1.ID = "UpdatePanel1";
up1.UpdateMode = UpdatePanelUpdateMode.Conditional;
Button button1 = new Button();
button1.ID = "Button1";
button1.Text = "Submit";
button1.Click += new EventHandler(Button_Click);
Label label1 = new Label();
label1.ID = "Label1";
label1.Text = "A full page postback occurred.";
up1.ContentTemplateContainer.Controls.Add(button1);
up1.ContentTemplateContainer.Controls.Add(label1);
Page.Form.Controls.Add(up1);
}
protected void Button_Click(object sender, EventArgs e)
{
((Label)Page.FindControl("Label1")).Text = "Panel refreshed at " +
DateTime.Now.ToString();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
<title>UpdatePanel Added Programmatically Example</title>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="TheScriptManager"
/>
</div>
</form>
</body>
</html>
Controlli non compatibili con i controlli UpdatePanel
I controlli ASP.NET seguenti non sono compatibili con gli aggiornamenti a pagina parziale e pertanto non sono progettati per funzionare in un controllo UpdatePanel.
Controllo TreeView. Tale controllo non è compatibile in molti casi. Uno di essi è il caso in cui sono attivi callback non appartenenti a un postback asincrono. Un altro caso è quando gli stili del controllo vengono definiti direttamente come proprietà del controllo anziché implicitamente tramite un riferimento agli stili CSS. Un altro caso ancora è quando la proprietà EnableClientScript (che per impostazione predefinita è true) è false. Infine, un altro caso è quando si modifica il valore della proprietà EnableClientScript fra un postback asincrono e un altro. Per ulteriori informazioni, vedere Cenni preliminari sul controllo server Web TreeView.
Controllo Menu. Tale controllo non è compatibile quando gli stili del controllo vengono definiti direttamente come proprietà del controllo anziché implicitamente tramite un riferimento agli stili CSS. Per ulteriori informazioni, vedere Cenni preliminari sul controllo Menu.
Controlli FileUpload e HtmlInputFile. Tali controlli non sono compatibili quando vengono utilizzati per caricare file nell'ambito di un postback asincrono.
Controlli GridView e DetailsView. Tali controlli non sono compatibili quando la relativa proprietà EnableSortingAndPagingCallbacks è impostata su true. Il valore predefinito è false.
Controlli Login, PasswordRecovery, ChangePassword e CreateUserWizard. Tali controlli non sono compatibili quando il loro contenuto non è stato convertito in modelli modificabili.
Controllo Substitution.
Per utilizzare un controllo FileUpload o un controllo HtmlInputFile in un controllo UpdatePanel, impostare il controllo di postback che invia il file come controllo PostBackTrigger del pannello. I controlli FileUpload e HtmlInputFile possono essere utilizzati solo negli scenari di postback.
Tutti gli altri controlli sono utilizzabili con i controlli UpdatePanel. In alcuni casi è tuttavia possibile che un controllo utilizzato in un controllo UpdatePanel presenti un funzionamento imprevisto. Alcuni di questi casi sono:
Registrazione di script mediante i metodi di registrazione del controllo ClientScriptManager.
Rendering diretto di script o markup durante il rendering del controllo, ad esempio chiamando il metodo Write.
In determinati casi, anziché chiamare i metodi di registrazione di script del controllo ClientScriptManager è possibile utilizzare i metodi di registrazione di script corrispondenti del controllo ScriptManager. In questo caso, il controllo può essere utilizzato in un controllo UpdatePanel.
Utilizzo di controlli Web part nei controlli UpdatePanel
Web part ASP.NET è un insieme integrato di controlli per la creazione di siti Web che consentono agli utenti finali di modificare il contenuto, l'aspetto e il comportamento delle pagine Web direttamente in un browser. I controlli Web part possono essere utilizzati nei controlli UpdatePanel con le restrizioni seguenti:
Tutti i controlli WebPartZone devono trovarsi nello stesso controllo UpdatePanel. Ad esempio, una determinata pagina non può contenere due controlli UpdatePanel ognuno avente un proprio controllo WebPartZone.
Il controllo WebPartManager deve gestire tutte le informazioni sullo stato client relative ai controlli Web part e deve trovarsi nel controllo UpdatePanel più esterno della pagina.
Non è possibile importare o esportare controlli Web part tramite un postback asincrono. L'esecuzione di queste attività richiede infatti un controllo FileUpload e tale controllo non può essere utilizzato nei postback asincroni. Per impostazione predefinita, l'importazione di controlli Web part comporta l'esecuzione di un postback completo.
Non è possibile aggiungere o modificare gli stili di controlli Web part durante i postback asincroni.
Per ulteriori informazioni sui controlli Web part, vedere Cenni preliminari su Web part ASP.NET.
Proprietà e metodi non supportati durante i postback asincroni
I seguenti scenari per l'impostazione del pulsante di postback predefinito in una pagina non sono supportati durante i postback asincroni:
Modifica di DefaultButton a livello di codice durante un postback asincrono.
Modifica di DefaultButton a livello di codice durante un postback asincrono quando il controllo Panel non è contenuto in un controllo UpdatePanel.
I metodi seguenti della classe HttpResponse sono supportati unicamente in scenari di postback, non in scenari di postback asincroni:
Esempi di codice
Gli esempi contenuti nelle sezioni seguenti mostrano come creare e utilizzare i controlli UpdatePanel.
Procedure e 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
Utilizzo del controllo UpdatePanel ASP.NET con controlli utente
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 vengono illustrate le classi server principali dei controlli UpdatePanel.
Classe |
Descrizione |
|---|---|
Controllo server che specifica le parti di una pagina Web in grado di partecipare agli aggiornamenti a pagina parziale. |
|
Controllo server che gestisce il rendering a pagina parziale. Il controllo ScriptManager, oltre a registrare i componenti dello script da inviare al browser, esegue l'override del rendering della pagina in modo che quest'ultimo venga eseguito solo per aree specifiche della pagina. |
|
Controllo server che consente ai componenti nidificati (ad esempio una pagina di contenuto o un controllo utente) di aggiungere script e riferimenti a servizi Web. Questo controllo è utile se l'elemento padre già contiene un controllo ScriptManager. |
|
Classe in Microsoft AJAX Library che coordina il rendering a pagina parziale nel browser. La classe PageRequestManager scambia informazioni con il server in modo asincrono ed espone eventi e metodi per lo sviluppo di script client personalizzato. |
Ulteriori argomenti
Cenni preliminari sul ciclo di vita di una pagina ASP.NET
Vedere anche
Attività
Introduzione al controllo UpdatePanel
Creazione di una pagina ASP.NET semplice con più controlli UpdatePanel
Concetti
Panoramica del controllo UpdateProgress