Condividi tramite

Procedura dettagliata: animazione dei controlli UpdatePanel ASP.NET

  • Articolo

Aggiornamento: novembre 2007

In questa procedura dettagliata viene descritto come aggiungere un'animazione a un controllo UpdatePanel aggiornato come risultato di un postback asincrono.

La Microsoft AJAX Library consente di gestire eventi nel ciclo di vita della pagina client. Questa operazione viene effettuata mediante la gestione degli eventi della classe PageRequestManager client. In questa procedura dettagliata verrà illustrato come utilizzare gli eventi beginRequest e pageLoaded per aggiungere un'animazione a un controllo UpdatePanel quando un controllo specifico nella pagina provoca un postback asincrono. L'evento beginRequest viene generato prima dell'inizio di un postback asincrono e prima dell'invio del postback al server. L'evento pageLoaded viene generato durante i postback e i postback asincroni. Durante questo evento, è possibile accedere a informazioni sui pannelli creati e aggiornati come risultato del più recente postback. Per i postback i pannelli vengono soltanto creati, mentre per i postback asincroni i pannelli possono essere creati e aggiornati.

Prerequisiti

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

  • Visual Studio 2008 o Visual Web Developer 2008 Express Edition.

  • Un sito Web ASP.NET con supporto AJAX.

Creazione di uno script client che aggiunge un'animazione a un controllo UpdatePanel

In questa procedura verrà creato un file ECMAScript (JavaScript o JScript) che definisce una classe di animazione. La classe contiene un metodo che aggiunge un'animazione a un elemento DOM HTML. Nel browser, il controllo UpdatePanel a cui aggiungere l'animazione viene rappresentato come elemento div.

Per creare uno script client che aggiunge un'animazione a un controllo UpdatePanel

  1. Nel sito Web ASP.NET con supporto AJAX, aggiungere un file JScript e denominarlo UpdatePanelAnimation.js.

  2. Aggiungere al file il codice JavaScript seguente:

    Type.registerNamespace("ScriptLibrary");
ScriptLibrary.BorderAnimation = function(startColor, endColor, duration) {
    this._startColor = startColor;
    this._endColor = endColor;
    this._duration = duration;
}
ScriptLibrary.BorderAnimation.prototype = {
    animatePanel: function(panelElement) {
        var s = panelElement.style;
        var startColor = this._startColor;
        var endColor = this._endColor;
        s.borderColor = startColor;
        window.setTimeout(
            function() {{ s.borderColor = endColor; }},
            this._duration
        );
    }
}
ScriptLibrary.BorderAnimation.registerClass('ScriptLibrary.BorderAnimation', null);

var panelUpdatedAnimation = new ScriptLibrary.BorderAnimation('blue', 'gray', 1000);
var postbackElement;

Sys.Application.add_load(ApplicationLoadHandler);
function ApplicationLoadHandler() {
    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);
}

function beginRequest(sender, args) {
    postbackElement = args.get_postBackElement();
}
function pageLoaded(sender, args) {
    var updatedPanels = args.get_panelsUpdated();
    if (typeof(postbackElement) === "undefined") {
        return;
    } 
    else if (postbackElement.id.toLowerCase().indexOf('animate') > -1) {
        for (i=0; i < updatedPanels.length; i++) {            
            panelUpdatedAnimation.animatePanel(updatedPanels[i]);
        }
    }

}
if(typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();

    Type.registerNamespace("ScriptLibrary");
ScriptLibrary.BorderAnimation = function(startColor, endColor, duration) {
    this._startColor = startColor;
    this._endColor = endColor;
    this._duration = duration;
}
ScriptLibrary.BorderAnimation.prototype = {
    animatePanel: function(panelElement) {
        var s = panelElement.style;
        var startColor = this._startColor;
        var endColor = this._endColor;
        s.borderColor = startColor;
        window.setTimeout(
            function() {{ s.borderColor = endColor; }},
            this._duration
        );
    }
}
ScriptLibrary.BorderAnimation.registerClass('ScriptLibrary.BorderAnimation', null);

var panelUpdatedAnimation = new ScriptLibrary.BorderAnimation('blue', 'gray', 1000);
var postbackElement;

Sys.Application.add_load(ApplicationLoadHandler);
function ApplicationLoadHandler() {
    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);
}

function beginRequest(sender, args) {
    postbackElement = args.get_postBackElement();
}
function pageLoaded(sender, args) {
    var updatedPanels = args.get_panelsUpdated();
    if (typeof(postbackElement) === "undefined") {
        return;
    } 
    else if (postbackElement.id.toLowerCase().indexOf('animate') > -1) {
        for (i=0; i < updatedPanels.length; i++) {            
            panelUpdatedAnimation.animatePanel(updatedPanels[i]);
        }
    }

}
if(typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();

    Mediante il codice vengono effettuate le seguenti operazioni:

    • Registrazione dello spazio dei nomi ScriptLibrary mediante la chiamata al metodo Type.registerNamespace.

    • Utilizzo del modello di progettazione prototipo per definire la classe BorderAnimation nello spazio dei nomi ScriptLibrary. Un metodo denominato animatePanel nella classe BorderAnimation definisce la logica di animazione.

    • Registrazione della classe BorderAnimation mediante la chiamata al metodo registerClass.

    • Crea una nuova istanza della classe BorderAnimation. Il codice passa tre valori al costruttore della classe: un colore di animazione, un colore predefinito e il numero di millisecondi per visualizzare il colore di animazione.

    • Definizione di un gestore per l'evento load della classe Sys.Application. A sua volta, questa classe definisce i gestori degli eventi beginRequest e pageLoaded della classe PageRequestManager.

    • Nel gestore eventi beginRequest, il codice salva il nome dell'elemento che ha provocato il postback.

    • Se l'ID dell'elemento di postback contiene la parola "animate", il codice esegue l'animazione nel gestore eventi pageLoaded.

Utilizzo dello script client con un controllo UpdatePanel

In questa procedura si utilizzerà lo script di animazione in una pagina che contiene un controllo UpdatePanel. Lo script aggiunge un'animazione al pannello quando il contenuto del pannello viene aggiornato.

Per aggiungere un'animazione a un controllo UpdatePanel

  1. Creare una nuova pagina e passare alla visualizzazione Progettazione.

  2. Se la pagina non contiene già un controllo ScriptManager, trascinarne uno dalla scheda Estensioni AJAX della Casella degli strumenti.

  3. Nella Casella degli strumenti fare doppio clic sul controllo UpdatePanel per aggiungere un controllo UpdatePanel alla pagina.

  4. Fare clic all'interno del controllo UpdatePanel, quindi nella scheda Standard della casella degli strumenti fare doppio clic sul controllo Button per due volte per aggiungere due pulsanti al controllo UpdatePanel.

  5. Impostare la proprietà Text del primo pulsante su Aggiorna con animazione e l'ID relativo su AnimateButton1.

  6. Impostare la proprietà Text del secondo pulsante su Aggiorna senza animazione. Lasciare l'ID relativo come valore predefinito di Button2.

  7. Passare alla visualizzazione Origine e aggiungere le regole di stile seguenti nel blocco style dell'elemento head della pagina.

    <style type="text/css">
#UpdatePanel1 {
  width: 300px;
  height: 100px;
  border:solid 1px gray;
}    
</style>

    <style type="text/css">
#UpdatePanel1 {
  width: 300px;
  height: 100px;
  border:solid 1px gray;
}    
</style>

    Le regole di stile definiscono l'altezza, la larghezza e il bordo dell'elemento div di cui viene eseguito il rendering per il controllo UpdatePanel.

  8. Aggiungere il codice seguente nell'elemento ContentTemplate dell'elemento asp:UpdatePanel:

    <%=DateTime.Now.ToString() %>

    <%=DateTime.Now.ToString() %>

    Il codice visualizza il momento in cui è stato eseguito il rendering più recente del markup.

  9. Passare alla visualizzazione Progettazione e selezionare il controllo ScriptManager.

  10. Nella finestra Proprietà selezionare la proprietà Scripts e fare clic sul pulsante con i puntini di sospensione (…) per visualizzare la finestra di dialogo Editor dell'insieme ScriptReference.

  11. Fare clic su Aggiungi per aggiungere un riferimento allo script.

  12. Impostare la proprietà Path del riferimento allo script su UpdatePanelAnimation.js, che è il file JavaScript creato precedentemente.

    Un riferimento allo script viene aggiunto utilizzando l'insieme Scripts di ScriptManager per assicurarsi che lo script venga caricato dopo il caricamento del codice per la Microsoft AJAX Library.

  13. Scegliere OK per chiudere la finestra di dialogo Editor dell'insieme ScriptReference.

  14. Salvare le modifiche e premere CTRL+F5 per visualizzare la pagina in un browser.

  15. Fare clic sul pulsante Aggiorna per aggiornare il pannello.

    Notare che il bordo del pannello cambia colore brevemente.

    <%@ 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 id="Head1" >
    <title>UpdatePanel Animation Example</title>
    <style type="text/css">
    #UpdatePanel1 {
      width: 300px;
      height: 100px;
      border:solid 1px gray;
    }    
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        <Scripts>
        <asp:ScriptReference Path="UpdatePanelAnimation.js" />
        </Scripts>
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <%=DateTime.Now.ToString() %>
                <asp:Button ID="AnimateButton1"  Text="Refresh with Animation" />
                <asp:Button ID="Button2"  Text="Refresh with no Animation" />
            </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">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
    <title>UpdatePanel Animation Example</title>
    <style type="text/css">
    #UpdatePanel1 {
      width: 300px;
      height: 100px;
      border:solid 1px gray;
    }    
    </style>
</head>
<body>
    <form id="form1" >
    <div>
        <asp:ScriptManager ID="ScriptManager1" >
        <Scripts>
        <asp:ScriptReference Path="UpdatePanelAnimation.js" />
        </Scripts>
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" >
            <ContentTemplate>
                <%=DateTime.Now.ToString() %>
                <asp:Button ID="AnimateButton1"  Text="Refresh with Animation" />
                <asp:Button ID="Button2"  Text="Refresh with no Animation" />
            </ContentTemplate>
        </asp:UpdatePanel>

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

Verifica

In questa procedura dettagliata è stato illustrato come fornire una semplice animazione a un controllo UpdatePanel quando il contenuto del pannello viene aggiornato. Il codice in un file JavaScript aggiunge un 'animazione all'elemento div HTML di cui il controllo UpdatePanel esegue il rendering. Il file JavaScript viene aggiunto all'insieme Scripts del controllo ScriptManager. La logica principale nel file script viene definita nei gestori per gli eventi beginRequest e pageLoaded della classe PageRequestManager.

Vedere anche

Concetti

Utilizzo di eventi PageRequestManager

Riferimenti

Classe Sys.WebForms.PageRequestManager

Classe Sys.WebForms.PageLoadedEventArgs