Programmazione dei controlli UpdateProgress nello script client

Articolo
10/22/2014

Aggiornamento: novembre 2007

In questa esercitazione si apprenderà come estendere il controllo UpdateProgress con il comportamento client tramite la scrittura di codice ECMAScript (JavaScript). Nel codice verrà utilizzata la classe PageRequestManager che fa parte della Microsoft AJAX Library. Nel controllo UpdateProgress si aggiungerà un pulsante per consentire agli utenti di annullare un postback asincrono. Durante lo svolgimento di questa attività si utilizzerà uno script client per visualizzare o nascondere il messaggio di stato.

In questo argomento si presuppone che l'utente abbia acquisito familiarità con il controllo UpdateProgress. In caso contrario, rivedere l'argomento Introduzione al controllo UpdateProgress.

Prerequisiti

Per implementare le procedure nell'ambiente di sviluppo in uso è necessario:

Microsoft Visual Studio 2005 o Visual Web Developer Express Edition.
Sito Web ASP.NET compatibile AJAX.

Per annullare un postback asincrono tramite uno script client

Creare una nuova pagina Web ASP.NET e passare alla visualizzazione Progettazione.
Nella scheda Estensioni AJAX della casella degli strumenti fare doppio clic sui controlli ScriptManager, UpdatePanel e UpdateProgress per aggiungere un'istanza di ogni controllo alla pagina.
Dalla scheda Standard della casella degli strumenti aggiungere un controllo Label al controllo UpdatePanel, quindi impostare la proprietà Text dell'etichetta su Pannello con rendering.
Aggiungere un controllo Button al controllo UpdatePanel e impostare la relativa proprietà Text su Aggiorna.
Nel controllo UpdateProgress aggiungere il testo Elaborazione in corso….
Dalla scheda HTML della casella degli strumenti aggiungere un controllo HtmlButton al controllo UpdateProgress e impostare il relativo attributo Value su Annulla.
Fare doppio clic sul pulsante Aggiorna per aggiungere un gestore eventi per il relativo evento Click.

Aggiungere il codice seguente al gestore Click. Viene creato artificialmente un ritardo di tre secondi, quindi viene impostata l'etichetta sull'ora corrente del server.

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    System.Threading.Thread.Sleep(3000)
    Label1.Text = DateTime.Now.ToString()
End Sub

protected void Button1_Click(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(3000);
    Label1.Text = DateTime.Now.ToString();
}

Nota:
Il gestore per l'evento Click introduce intenzionalmente un ritardo per questa esercitazione. Nella pratica il ritardo non viene introdotto, ma sarebbe il risultato di traffico del server o di codice server che richiede tempi di elaborazione lunghi, ad esempio una query di database a esecuzione prolungata.

Al di sotto dell'elemento <asp:ScriptManager> aggiungere lo script riportato di seguito:

<script language="javascript" type="text/javascript">
<!-- 
var prm = Sys.WebForms.PageRequestManager.getInstance();
function CancelAsyncPostBack() {
    if (prm.get_isInAsyncPostBack()) {
      prm.abortPostBack();
    }
}
// -->
</script>

<script language="javascript" type="text/javascript">
<!-- 
var prm = Sys.WebForms.PageRequestManager.getInstance();
function CancelAsyncPostBack() {
    if (prm.get_isInAsyncPostBack()) {
      prm.abortPostBack();
    }
}
// -->
</script>

Lo script ottiene l'istanza corrente della classe PageRequestManager. Crea quindi una funzione che chiama il metodo abortPostBack per arrestare un postback asincrono.

Impostare l'attributo onclick del controllo HtmlButtonsu CancelAsyncPostBack, ovvero il nome del gestore creato nel passaggio precedente.

<input id="Button2" 
       type="button" 
       value="cancel" 
       onclick="CancelAsyncPostBack()" />

<input id="Button2" 
       type="button" 
       value="cancel" 
       onclick="CancelAsyncPostBack()" />

Aggiungere il seguente blocco di stili all'elemento <head>.

<style type="text/css">    
#UpdatePanel1 {
  width:200px; height:100px;
  border: 1px solid gray;
}
#UpdateProgress1 {
  width:200px; background-color: #FFC080;
  bottom: 0%; left: 0px; position: absolute;
}
</style>

<style type="text/css">
#UpdatePanel1 {
  width:200px; height:100px;
  border: 1px solid gray;
}
#UpdateProgress1 {
  width:200px; background-color: #FFC080;
  bottom: 0%; left: 0px; position: absolute;
}
</style>

Le impostazioni dello stile consentono di configurare il controllo UpdateProgress che verrà visualizzato all'angolo inferiore sinistro della finestra del browser.

Salvare le modifiche, quindi premere CTRL+F5 per visualizzare la pagina in un browser.
Fare clic su Aggiorna.

Il messaggio di stato viene visualizzato dopo un breve intervallo. Attendere il completamento dell'aggiornamento a pagina parziale in modo che il messaggio nel controllo UpdatePanel venga modificato per visualizzare l'ora.

Nota:

È possibile configurare l'intervallo di ritardo impostando la proprietà DisplayAfter. Il valore predefinito è 500 millisecondi.

Nota:
È possibile configurare l'intervallo di ritardo impostando la proprietà DisplayAfter. Il valore predefinito è 500 millisecondi.

Fare clic di nuovo su Aggiorna, quindi immediatamente su Annulla per interrompere l'aggiornamento a pagina parziale.

L'ora nel controllo UpdatePanel non viene aggiornata.

<%@ 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 Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        System.Threading.Thread.Sleep(3000)
        Label1.Text = DateTime.Now.ToString()
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">    
    #UpdatePanel1 {
      width:200px; height:100px;
      border: 1px solid gray;
    }
    #UpdateProgress1 {
      width:200px; background-color: #FFC080;
      bottom: 0%; left: 0px; position: absolute;
    }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" />
        <script language="javascript" type="text/javascript">
        <!-- 
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        function CancelAsyncPostBack() {
            if (prm.get_isInAsyncPostBack()) {
              prm.abortPostBack();
            }
        }
        // -->
        </script>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <asp:Label ID="Label1"  Text="Panel rendered."></asp:Label><br />
                <asp:Button ID="Button1"  OnClick="Button1_Click" Text="refresh" />
            </ContentTemplate>
        </asp:UpdatePanel>

    </div>
        <asp:UpdateProgress ID="UpdateProgress1" >
            <ProgressTemplate>
                Processing...
                <input id="Button2" 
                       type="button" 
                       value="cancel" 
                       onclick="CancelAsyncPostBack()" />
            </ProgressTemplate>
        </asp:UpdateProgress>
    </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 Button1_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
        Label1.Text = DateTime.Now.ToString();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 {
      width:200px; height:100px;
      border: 1px solid gray;
    }
    #UpdateProgress1 {
      width:200px; background-color: #FFC080;
      bottom: 0%; left: 0px; position: absolute;
    }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" />
        <script language="javascript" type="text/javascript">
        <!-- 
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        function CancelAsyncPostBack() {
            if (prm.get_isInAsyncPostBack()) {
              prm.abortPostBack();
            }
        }
        // -->
        </script>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <asp:Label ID="Label1"  Text="Panel rendered."></asp:Label><br />
                <asp:Button ID="Button2"  OnClick="Button1_Click" Text="refresh" />
            </ContentTemplate>
        </asp:UpdatePanel>

    </div>
        <asp:UpdateProgress ID="UpdateProgress1" >
            <ProgressTemplate>
                Processing...
                <input id="Button2" 
                       type="button" 
                       value="cancel" 
                       onclick="CancelAsyncPostBack()" />
            </ProgressTemplate>
        </asp:UpdateProgress>
    </form>
</body>
</html>

Visualizzazione dello stato di avanzamento dell'aggiornamento tramite script client

Negli scenari seguenti il controllo UpdateProgress non verrà visualizzato automaticamente:

Il controllo UpdateProgress viene associato a un pannello di aggiornamento specifico, ma il postback asincrono viene generato da un controllo esterno a quel pannello di aggiornamento.
Il controllo UpdateProgress non è associato ad alcun controllo UpdatePanel e il postback asincrono non è generato da un controllo esterno a un controllo UpdatePanel e non è un trigger. Ad esempio, l'aggiornamento viene eseguito nel codice.

La procedura descritta di seguito mostra come visualizzare un controllo UpdateProgress quando il postback asincrono non ha origine nel controllo UpdatePanel associato. In questa procedura si presuppone che sia stata completata la prima parte di questa esercitazione.

Per visualizzare un controllo UpdateProgress a livello di codice

Nella pagina creata precedentemente passare alla visualizzazione Progettazione.
Selezionare il controllo UpdateProgress, quindi nella finestra Proprietà impostare la proprietà AssociatedUpdatePanelID su UpdatePanel1.
Aggiungere un controllo Button in un punto qualsiasi all'esterno dei controlli UpdatePanel e UpdateProgress.
Impostare la proprietà Text del pulsante su Trigger e i relativi ID su Panel1Trigger.
Selezionare il controllo UpdatePanel, quindi nella finestra Proprietà fare clic sui puntini di sospensione (…) nella casella della proprietà Triggers.

Verrà visualizzata la finestra di dialogo Editor dell'insieme UpdatePanelTrigger.
Creare un oggetto AsyncPostBackTrigger e impostare la relativa proprietà ControlID su Panel1Trigger.
Scegliere OK per chiudere l'editor dell'insieme.
Fare doppio clic sul pulsante Trigger per aggiungere un gestore eventi per il relativo evento Click.

Aggiungere il codice riportato di seguito al gestore dell'evento Click che crea artificialmente un ritardo di tre secondi: Viene quindi visualizzata l'ora del server e un messaggio in cui è specificato che il postback è causato da un trigger.

Protected Sub Panel1Trigger_Click(ByVal sender As Object, ByVal e As System.EventArgs)
    System.Threading.Thread.Sleep(3000)
    Label1.Text = DateTime.Now.ToString() & " - trigger"
End Sub

protected void Panel1Trigger_Click(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(3000);
    Label1.Text = DateTime.Now.ToString() + " - trigger";
}

In visualizzazione Origine aggiungere il seguente script client al di sotto del blocco <script> presente nella pagina.

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 == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'block';                
    }
}
function EndRequest(sender, args) {
    if (postBackElement.id == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'none';
    }
}

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 == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'block';                
    }
}
function EndRequest(sender, args) {
    if (postBackElement.id == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'none';
    }
}

Lo script consente di effettuare le seguenti operazioni:

Definisce un gestore per l'evento initializeRequest della classe PageRequestManager. Il codice del gestore annulla qualsiasi postback asincrono in corso. Al contrario, se il postback viene generato nell'elemento Panel1Trigger<div>, viene visualizzato il modello UpdateProgress.
Definisce un gestore per l'evento endRequest della classe PageRequestManager. Se il postback viene generato nell'elemento Panel1Trigger<div>, il controllo dello stato di avanzamento viene nascosto dal codice del gestore.

Nell'esempio riportato di seguito viene illustrato il blocco di script completo.

<script language="javascript" type="text/javascript">
<!-- 
var prm = Sys.WebForms.PageRequestManager.getInstance();
function CancelAsyncPostBack() {
    if (prm.get_isInAsyncPostBack()) {
      prm.abortPostBack();
    }
}
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 == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'block';                
    }
}
function EndRequest(sender, args) {
    if (postBackElement.id == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'none';
    }
}
// -->
</script>

<script language="javascript" type="text/javascript">
<!-- 
var prm = Sys.WebForms.PageRequestManager.getInstance();
function CancelAsyncPostBack() {
    if (prm.get_isInAsyncPostBack()) {
      prm.abortPostBack();
    }
}
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 == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'block';                
    }
}
function EndRequest(sender, args) {
    if (postBackElement.id == 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'none';
    }
}
// -->
</script>

Salvare le modifiche, quindi premere CTRL+F5 per visualizzare la pagina in un browser.
Scegliere il pulsante Aggiorna.

Il messaggio di stato viene visualizzato dopo un breve intervallo. Attendere il completamento dell'aggiornamento a pagina parziale in modo che il messaggio nel controllo UpdatePanel visualizzi l'ora.

Fare clic sul pulsante Trigger.

Il messaggio di stato viene visualizzato.

<%@ 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 Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        System.Threading.Thread.Sleep(3000)
        Label1.Text = DateTime.Now.ToString()
    End Sub
    Protected Sub Panel1Trigger_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        System.Threading.Thread.Sleep(3000)
        Label1.Text = DateTime.Now.ToString() & " - trigger"
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 {
      width:200px; height:100px;
      border: 1px solid gray;
    }
    #UpdateProgress1 {
      width:200px; background-color: #FFC080;
      bottom: 0%; left: 0px; position: absolute;
    }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1"  />
        <script language="javascript" type="text/javascript">
        <!-- 
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        function CancelAsyncPostBack() {
            if (prm.get_isInAsyncPostBack()) {
              prm.abortPostBack();
            }
        }
        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 == 'Panel1Trigger') {
                $get('UpdateProgress1').style.display = 'block';                
            }
        }
        function EndRequest(sender, args) {
            if (postBackElement.id == 'Panel1Trigger') {
                $get('UpdateProgress1').style.display = 'none';
            }
        }
        // -->
        </script>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <asp:Label ID="Label1"  Text="Panel rendered."></asp:Label><br />
                <asp:Button ID="Button1"  Text="refresh" OnClick="Button1_Click" />
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Panel1Trigger" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:Button ID="Panel1Trigger"  Text="Trigger" OnClick="Panel1Trigger_Click" />
        <asp:UpdateProgress ID="UpdateProgress1"  AssociatedUpdatePanelID="UpdatePanel1">
            <ProgressTemplate>
                Processing...
                <input id="Button2" 
                       type="button" 
                       value="cancel"
                       onclick="CancelAsyncPostBack()" />
            </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 Button1_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
        Label1.Text = DateTime.Now.ToString();
    }
    protected void Panel1Trigger_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
        Label1.Text = DateTime.Now.ToString() + " - trigger";
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>UpdateProgress Tutorial</title>
    <style type="text/css">
    #UpdatePanel1 {
      width:200px; height:100px;
      border: 1px solid gray;
    }
    #UpdateProgress1 {
      width:200px; background-color: #FFC080;
      bottom: 0%; left: 0px; position: absolute;
    }
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1"  />
        <script language="javascript" type="text/javascript">
        <!-- 
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        function CancelAsyncPostBack() {
            if (prm.get_isInAsyncPostBack()) {
              prm.abortPostBack();
            }
        }
        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 == 'Panel1Trigger') {
                $get('UpdateProgress1').style.display = 'block';                
            }
        }
        function EndRequest(sender, args) {
            if (postBackElement.id == 'Panel1Trigger') {
                $get('UpdateProgress1').style.display = 'none';
            }
        }
        // -->
        </script>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <asp:Label ID="Label1"  Text="Panel rendered."></asp:Label><br />
                <asp:Button ID="Button1"  Text="refresh" OnClick="Button1_Click" />
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Panel1Trigger" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:Button ID="Panel1Trigger"  Text="Trigger" OnClick="Panel1Trigger_Click" />
        <asp:UpdateProgress ID="UpdateProgress1"  AssociatedUpdatePanelID="UpdatePanel1">
            <ProgressTemplate>
                Processing...
                <input id="Button2" 
                       type="button" 
                       value="cancel"
                       onclick="CancelAsyncPostBack()" />
            </ProgressTemplate>
        </asp:UpdateProgress>

    </div>
    </form>
</body>
</html>

Verifica

In questa esercitazione sono stati descritti i metodi che consentono di estendere il controllo UpdateProgress tramite la scrittura di codice ECMAScript (JavaScript). È possibile utilizzare eventi e metodi della classe PageRequestManager per annullare un postback asincrono e visualizzare e nascondere a livello di codice un controllo UpdateProgress.

Condividi tramite

Programmazione dei controlli UpdateProgress nello script client

Prerequisiti

Per annullare un postback asincrono tramite uno script client

Visualizzazione dello stato di avanzamento dell'aggiornamento tramite script client

Per visualizzare un controllo UpdateProgress a livello di codice

Verifica

Vedere anche

Concetti

Riferimenti

Risorse aggiuntive