Panoramica del controllo UpdateProgress
Aggiornamento: novembre 2007
Il controllo UpdateProgress fornisce informazioni sullo stato degli aggiornamenti a pagina parziale nei controlli UpdatePanel. È possibile personalizzare il contenuto predefinito e il layout del controllo UpdateProgress. Per impedire il lampeggiamento quando un aggiornamento a pagina parziale è molto veloce, è possibile specificare un ritardo prima che il controllo UpdateProgress venga visualizzato.
In questo argomento sono presenti informazioni su:
Scenari
Sfondo
Esempi di codice
Riferimento alle classi
Scenari
Il controllo UpdateProgress consente di progettare un'interfaccia utente più intuitiva quando una pagina Web contiene uno o più controlli UpdatePanel per il rendering a pagina parziale. Se un aggiornamento a pagina parziale è lento, è possibile utilizzare il controllo UpdateProgress per fornire feedback visivo sullo stato dell'aggiornamento. È possibile includere più controlli UpdateProgress in una pagina, ciascuno associato a un diverso controllo UpdatePanel. In alternativa, è possibile utilizzare un solo controllo UpdateProgress e associarlo a tutti i controlli UpdatePanel della pagina.
Sfondo
Il controllo UpdateProgress esegue il rendering di un elemento <div> che viene visualizzato o nascosto in base al fatto che un controllo UpdatePanel associato abbia determinato un postback asincrono o meno. Per il rendering della pagina iniziale e i postback asincroni, il controllo UpdateProgress non viene visualizzato.
Associazione di un controllo UpdateProgress a un controllo UpdatePanel
È possibile associare un controllo UpdateProgress a un controllo UpdatePanel impostando la proprietà AssociatedUpdatePanelID del controllo UpdateProgress. Quando un evento postback ha origine da un controllo UpdatePanel, vengono visualizzati gli eventuali controlli UpdateProgress associati. Se il controllo UpdateProgress non viene associato a un controllo UpdatePanel specifico, il controllo UpdateProgress visualizza lo stato di avanzamento di tutti postback asincroni.
Se la proprietà ChildrenAsTriggers di un controllo UpdatePanel è impostata su false e un postback ha origine dall'interno di tale controllo UpdatePanel, verranno visualizzati gli eventuali controlli UpdateProgress associati.
Creazione di contenuto per il controllo UpdateProgress
Utilizzare la proprietà ProgressTemplate per specificare in modo dichiarativo il messaggio visualizzato da un controllo UpdateProgress. L'elemento <ProgressTemplate> può contenere HTML e markup. Nell'esempio riportato di seguito viene illustrato come specificare un messaggio per un controllo UpdateProgress.
<asp:UpdateProgress ID="UpdateProgress1" >
<ProgressTemplate>
An update is in progress...
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdateProgress ID="UpdateProgress1" >
<ProgressTemplate>
An update is in progress...
</ProgressTemplate>
</asp:UpdateProgress>
Nell'esempio riportato di seguito viene illustrato un controllo UpdateProgress che riporta lo stato di aggiornamento per due controlli 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 Button_Click(ByVal sender As Object, ByVal e As System.EventArgs)
System.Threading.Thread.Sleep(3000)
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
<title>UpdateProgress Example</title>
<style type="text/css">
#UpdatePanel1, #UpdatePanel2, #UpdateProgress1 {
border-right: gray 1px solid; border-top: gray 1px solid;
border-left: gray 1px solid; border-bottom: gray 1px solid;
}
#UpdatePanel1, #UpdatePanel2 {
width:200px; height:200px; position: relative;
float: left; margin-left: 10px; margin-top: 10px;
}
#UpdateProgress1 {
width: 400px; background-color: #FFC080;
bottom: 0%; left: 0px; position: absolute;
}
</style>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" />
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
<ContentTemplate>
<%=DateTime.Now.ToString() %> <br />
<asp:Button ID="Button1" Text="Refresh Panel" OnClick="Button_Click" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" >
<ContentTemplate>
<%=DateTime.Now.ToString() %> <br />
<asp:Button ID="Button2" Text="Refresh Panel" OnClick="Button_Click"/>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" >
<ProgressTemplate>
Update in progress...
</ProgressTemplate>
</asp:UpdateProgress>
</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 Button_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
<title>UpdateProgress Example</title>
<style type="text/css">
#UpdatePanel1, #UpdatePanel2, #UpdateProgress1 {
border-right: gray 1px solid; border-top: gray 1px solid;
border-left: gray 1px solid; border-bottom: gray 1px solid;
}
#UpdatePanel1, #UpdatePanel2 {
width:200px; height:200px; position: relative;
float: left; margin-left: 10px; margin-top: 10px;
}
#UpdateProgress1 {
width: 400px; background-color: #FFC080;
bottom: 0%; left: 0px; position: absolute;
}
</style>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" />
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
<ContentTemplate>
<%=DateTime.Now.ToString() %> <br />
<asp:Button ID="Button1" Text="Refresh Panel" OnClick="Button_Click" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" >
<ContentTemplate>
<%=DateTime.Now.ToString() %> <br />
<asp:Button ID="Button2" Text="Refresh Panel" OnClick="Button_Click"/>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" >
<ProgressTemplate>
Update in progress...
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</form>
</body>
</html>
Nell'esempio seguente vengono illustrati due controlli UpdateProgress. Ogni controllo mostra lo stato di aggiornamento per un controllo UpdatePanel associato.
<%@ 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 Button_Click(ByVal sender As Object, ByVal e As System.EventArgs)
System.Threading.Thread.Sleep(3000)
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
<title>UpdateProgress Example</title>
<style type="text/css">
#UpdatePanel1, #UpdatePanel2 {
width:200px; height:200px; position: relative;
float: left; margin-left: 10px; margin-top: 10px;
border-right: gray 1px solid; border-top: gray 1px solid;
border-left: gray 1px solid; border-bottom: gray 1px solid;
}
#UpdateProgress1, #UpdateProgress2 {
width: 200px; background-color: #FFC080;
position: absolute; bottom: 0px; left: 0px;
}
</style>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" />
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
<ContentTemplate>
<%=DateTime.Now.ToString() %> <br />
<asp:Button ID="Button1" Text="Refresh Panel" OnClick="Button_Click" />
<asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="UpdatePanel1" >
<ProgressTemplate>
UpdatePanel1 updating...
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" >
<ContentTemplate>
<%=DateTime.Now.ToString() %> <br />
<asp:Button ID="Button2" Text="Refresh Panel" OnClick="Button_Click"/>
<asp:UpdateProgress ID="UpdateProgress2" AssociatedUpdatePanelID="UpdatePanel2" >
<ProgressTemplate>
UpdatePanel2 updating...
</ProgressTemplate>
</asp:UpdateProgress>
</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 Button_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
<title>UpdateProgress Example</title>
<style type="text/css">
#UpdatePanel1, #UpdatePanel2 {
width:200px; height:200px; position: relative;
float: left; margin-left: 10px; margin-top: 10px;
border-right: gray 1px solid; border-top: gray 1px solid;
border-left: gray 1px solid; border-bottom: gray 1px solid;
}
#UpdateProgress1, #UpdateProgress2 {
width: 200px; background-color: #FFC080;
position: absolute; bottom: 0px; left: 0px;
}
</style>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" />
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
<ContentTemplate>
<%=DateTime.Now.ToString() %> <br />
<asp:Button ID="Button1" Text="Refresh Panel" OnClick="Button_Click" />
<asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="UpdatePanel1" >
<ProgressTemplate>
UpdatePanel1 updating...
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" >
<ContentTemplate>
<%=DateTime.Now.ToString() %> <br />
<asp:Button ID="Button2" Text="Refresh Panel" OnClick="Button_Click"/>
<asp:UpdateProgress ID="UpdateProgress2" AssociatedUpdatePanelID="UpdatePanel2" >
<ProgressTemplate>
UpdatePanel2 updating...
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Nell'esempio seguente viene illustrato come aggiungere un pulsante all'elemento <ProgressTemplate> su cui l'utente può fare clic per interrompere il postback asincrono. Tutti i nuovi postback avviati durante l'esecuzione di un altro postback vengono annullati.
<%@ 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 Button_Click(ByVal sender As Object, ByVal e As System.EventArgs)
System.Threading.Thread.Sleep(3000)
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
<title>UpdateProgress Example</title>
<style type="text/css">
#UpdatePanel1, #UpdatePanel2, #UpdateProgress1 {
border-right: gray 1px solid; border-top: gray 1px solid;
border-left: gray 1px solid; border-bottom: gray 1px solid;
}
#UpdatePanel1, #UpdatePanel2 {
width:200px; height:200px; position: relative;
float: left; margin-left: 10px; margin-top: 10px;
}
#UpdateProgress1 {
width: 400px; background-color: #FFC080;
bottom: 0%; left: 0px; position: absolute;
}
</style>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" />
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
var postBackElement;
function InitializeRequest(sender, args) {
if (prm.get_isInAsyncPostBack())
{
args.set_cancel(true);
}
postBackElement = args.get_postBackElement();
if (postBackElement.id == 'ButtonTrigger')
{
$get('UpdateProgress1').style.display = "block";
}
}
function EndRequest (sender, args) {
if (postBackElement.id == 'ButtonTrigger')
{
$get('UpdateProgress1').style.display = "none";
}
}
function AbortPostBack() {
if (prm.get_isInAsyncPostBack()) {
prm.abortPostBack();
}
}
</script>
<asp:Button ID="ButtonTrigger" Text="Refresh Panel 1" OnClick="Button_Click" />
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
<ContentTemplate>
<%=DateTime.Now.ToString() %> <br />
The trigger for this panel
causes the UpdateProgress to be displayed
even though the UpdateProgress is associated
with panel 2.
<br />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ButtonTrigger" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" >
<ContentTemplate>
<%=DateTime.Now.ToString() %> <br />
<asp:Button ID="Button2" Text="Refresh Panel" OnClick="Button_Click"/>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="UpdatePanel2" >
<ProgressTemplate>
Update in progress...
<input type="button" value="stop" onclick="AbortPostBack()" />
</ProgressTemplate>
</asp:UpdateProgress>
</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 Button_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
<title>UpdateProgress Example</title>
<style type="text/css">
#UpdatePanel1, #UpdatePanel2, #UpdateProgress1 {
border-right: gray 1px solid; border-top: gray 1px solid;
border-left: gray 1px solid; border-bottom: gray 1px solid;
}
#UpdatePanel1, #UpdatePanel2 {
width:200px; height:200px; position: relative;
float: left; margin-left: 10px; margin-top: 10px;
}
#UpdateProgress1 {
width: 400px; background-color: #FFC080;
bottom: 0%; left: 0px; position: absolute;
}
</style>
</head>
<body>
<form id="form1" >
<div>
<asp:ScriptManager ID="ScriptManager1" />
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
var postBackElement;
function InitializeRequest(sender, args) {
if (prm.get_isInAsyncPostBack())
{
args.set_cancel(true);
}
postBackElement = args.get_postBackElement();
if (postBackElement.id == 'ButtonTrigger')
{
$get('UpdateProgress1').style.display = "block";
}
}
function EndRequest (sender, args) {
if (postBackElement.id == 'ButtonTrigger')
{
$get('UpdateProgress1').style.display = "none";
}
}
function AbortPostBack() {
if (prm.get_isInAsyncPostBack()) {
prm.abortPostBack();
}
}
</script>
<asp:Button ID="ButtonTrigger" Text="Refresh Panel 1" OnClick="Button_Click" />
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" >
<ContentTemplate>
<%=DateTime.Now.ToString() %> <br />
The trigger for this panel
causes the UpdateProgress to be displayed
even though the UpdateProgress is associated
with panel 2.
<br />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ButtonTrigger" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" >
<ContentTemplate>
<%=DateTime.Now.ToString() %> <br />
<asp:Button ID="Button2" Text="Refresh Panel" OnClick="Button_Click"/>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" AssociatedUpdatePanelID="UpdatePanel2" >
<ProgressTemplate>
Update in progress...
<input type="button" value="stop" onclick="AbortPostBack()" />
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</form>
</body>
</html>
Nell'esempio precedente, l'attributo onClick di un controllo HtmlButton dell'elemento <ProgressTemplate> chiama la funzione AbortPostBack di JavaScript. Per ulteriori informazioni, vedere il metodo abortPostBack e la proprietà isInAsyncPostBack della classe PageRequestManager.
Specifica del layout del contenuto
Quando la proprietà DynamicLayout è true, inizialmente il controllo UpdateProgress non occupa spazio nella visualizzazione della pagina. La pagina viene invece modificata in modo dinamico per visualizzare il contenuto del controllo UpdateProgress, se necessario. Per il supporto della visualizzazione dinamica, viene eseguito il rendering del controllo come elemento <div> con la relativa proprietà di stile display inizialmente impostata su none.
Quando la proprietà DynamicLayout è false, il controllo UpdateProgress occupa spazio nella visualizzazione della pagina, anche se non è visibile. In tal caso, l'elemento <div> del controllo presenta la relativa proprietà di stile display impostata su block e la relativa visibility inizialmente impostata su hidden.
Inserimento dei controlli UpdateProgress nella pagina
È possibile inserire i controlli UpdateProgress all'interno o all'esterno dei controlli UpdatePanel. Un controllo UpdateProgress viene visualizzato ogni qualvolta il controllo UpdatePanel, al quale è associato, viene aggiornato in seguito a un postback asincrono. Questo è valido anche se il controllo UpdateProgress si trova all'interno di un altro controllo UpdatePanel.
Se un controllo UpdatePanel si trova all'interno di un altro pannello di aggiornamento, un postback che ha origine dall'interno del pannello figlio determina la visualizzazione di tutti i controlli UpdateProgress associati al pannello figlio. Vengono anche visualizzati tutti i controlli UpdateProgress associati al pannello padre. Se un postback ha origine da un controllo figlio immediato del pannello padre, vengono visualizzati solo i controlli UpdateProgress associati al pannello padre. Questo processo segue il criterio di attivazione dei postback.
Specifica del momento di visualizzazione dei controlli UpdateProgress
È possibile controllare a livello di codice quando un controllo UpdateProgress viene visualizzato utilizzando gli eventi beginRequest e endRequest di JavaScript della classe PageRequestManager. Nel gestore eventi beginRequest, visualizzare l'elemento DOM che rappresenta il controllo UpdateProgress. Nel gestore eventi endRequest, nascondere l'elemento.
È necessario fornire script client per mostrare e nascondere un controllo UpdateProgress nelle circostanze seguenti:
Durante un postback da un controllo registrato come trigger del postback asincrono per il pannello di aggiornamento ma a cui non è associato il controllo UpdateProgress.
Durante i postback da controlli registrati a livello di codice come controlli di postback asincroni utilizzando il metodo RegisterAsyncPostBackControl del controllo ScriptManager. In tal caso, il controllo UpdateProgress non può determinare automaticamente se è stato attivato un postback asincrono.
Esempi di codice
Nelle sezioni seguenti sono inclusi gli esempi di codice per la creazione e l'utilizzo dei controlli [T:System.Web.UI.]UpdateProgress.
Esercitazioni
Riferimento alle classi
Nella tabella riporta di seguito sono elencate le classi principali per l'utilizzo della classe [T:System.Web.UI.]UpdateProgress.
Classe |
Descrizione |
|---|---|
Fornisce feedback visivo nel browser quando il contenuto dei controlli UpdatePanel viene aggiornato. |
|
Specifica le parti di una pagina Web che possono far parte di aggiornamenti a pagina parziale. |
|
Gestisce il rendering a pagina parziale. Il controllo ScriptManager registra i componenti dello script da inviare al browser ed esegue l'override del rendering della pagina in modo che venga eseguito solo il rendering delle regioni specificate della pagina. |
|
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 script client personalizzato. |
Ulteriori argomenti
Cenni preliminari sul ciclo di vita di una pagina ASP.NET
Vedere anche
Attività
Introduzione al controllo UpdatePanel
Introduzione al controllo UpdateProgress
Programmazione dei controlli UpdateProgress nello script client