Combinazione di script client in uno script composito
Aggiornamento: novembre 2007
In un'applicazione ASP.NET AJAX, il comportamento client dei controlli viene definito tramite i file JavaScript. In genere, un singolo file JavaScript definisce il comportamento client per un singolo controllo. Se una pagina Web contiene numerosi controlli, il browser deve scaricare diversi file JavaScript. Per scaricare un singolo file impiega una quantità minima di tempo. Tuttavia, quando una pagina Web contiene molti controlli, il tempo necessario per scaricare più file può influire sulle prestazioni percepite della pagina.
Una soluzione consiste nel combinare più file JavaScript in un singolo file, definito come script composto. Ciò consente di ridurre il numero di richieste del browser. Il risultato è tempi di downoload più rapidi per l'utente e meno carico sul server Web.
ASP.NET AJAX consente di combinare più file JavaScript in un singolo script composto tramite riferimenti a script compositi nel controllo ScriptManager o ScriptManagerProxy. Se gli script implicano dipendenze, ad esempio script che chiamano funzioni di altri script, è necessario gestire gli script in modo che vengano registrati nell'ordine adatto.
Se il browser supporta la compressione degli script, uno script composito verrà automaticamente compresso prima di essere inviato al browser. L'unica eccezione è rappresentata da Microsoft Internet Explorer 6.0 al quale ASP.NET invia sempre gli script non compressi.
Creazione di uno script composito
In un'applicazione ASP.NET AJAX, è possibile creare automaticamente uno script composto tramite il controllo ScriptManager. Per combinare gli script, aggiungere l'elemento CompositeScript ed elencare i riferimenti a script nell'ordine in cui si desidera che vengano inclusi nello script composito.
Nell'esempio seguente viene mostrato come combinare gli script client tramite un elemento ComposteScript nel controllo ScriptManager. Quando l'utente fa clic su uno dei pulsanti, viene chiamata una funzione nello script composito e l'elemento span corrispondente viene aggiornato.
<html xmlns="http://www.w3.org/1999/xhtml">
<head >
<title>Combining Scripts</title>
</head>
<body>
<form id="form1" >
<asp:ScriptManager ID="ScriptManager1" >
<CompositeScript>
<Scripts>
<asp:ScriptReference Path="~/Scripts/Script1.js" />
<asp:ScriptReference Path="~/Scripts/Script2.js" />
<asp:ScriptReference Path="~/Scripts/Script3.js" />
</Scripts>
</CompositeScript>
</asp:ScriptManager>
<h2>Combining Scripts</h2>
<p>This example shows how to combine multiple client scripts into
a single composite script.</p>
<div>
<input id="Button1" type="button" value="Button 1" onclick="buttonClick1()" />
<span id="Span1"></span><br /><br />
<input id="Button2" type="button" value="Button 2" onclick="buttonClick2()" />
<span id="Span2"></span><br /><br />
<input id="Button3" type="button" value="Button 3" onclick="buttonClick3()" />
<span id="Span3"></span>
</div>
</form>
</body>
</html>
Per evitare che l'esempio diventi troppo complesso, i seguenti script sono quasi identici. Ogni script trova l'elemento span e scrive un breve messaggio.
function buttonClick1()
{
var text = Sys.UI.DomElement.getElementById("Span1");
text.innerHTML = "You clicked Button 1. (Script1)";
}
function buttonClick2()
{
var text = Sys.UI.DomElement.getElementById("Span2");
text.innerHTML = "You clicked Button 2. (Script2)";
}
function buttonClick3()
{
var text = Sys.UI.DomElement.getElementById("Span3");
text.innerHTML = "You clicked Button 3. (Script3)";
}
Origini per gli script compositi
Uno script composito può contenere riferimenti a script basati su un percorso locale o che fanno riferimento a un assembly. I riferimenti a script basati su percorsi locali vengono identificati con l'elemento PathScriptReference. I riferimenti basati sugli assembly vengono identificati con l'attributo Name. Non è possibile utilizzare un riferimento a script locali che fa riferimento a uno script che non si trova nel server (vale a dire, che fa riferimento a un percorso di rete).
Uno script composito non può contenere altri script compositi. Non deve contenere tutti gli script utilizzati nella pagina Web. Può tuttavia contenere script del framework ASP.NET AJAX, ad esempio MicrosoftAjax.js.
Nell'esempio seguente viene mostrato uno script composito che combina uno script del framework, uno script basato sul percorso locale e più script dell'estensione basati sull'assembly.
<asp:ScriptManager id="SM1" >
<Scripts>
<asp:CompositeScript>
<Scripts>
<asp:ScriptReference Name="MicrosoftAjax.js"/>
<asp:ScriptReference Name="Custom.Extender.1.js"
Assembly="Custom" />
<asp:ScriptReference Path="Scripts/Custom2.js" />
<asp:ScriptReference Name="Custom.Extender.2.js"
Assembly="Custom" />
<asp:ScriptReference Name="Custom.Extender.3.js"
Assembly="Custom" />
</Scripts>
</asp:CompositeScript>
</Scripts>
</asp: ScriptManager>
Nell'esempio precedente, il controllo ScriptManager scarica uno script composito contenente i seguenti singoli script nell'ordine indicato:
MicrosoftAjax.js
Custom.Extender.1.js
Custom2.js
Custom.Extender.2.js
Custom.Extender.3.js
L'attributo ScriptPath del controllo ScriptManager viene applicato ai singoli script inclusi nel gruppo, ma non allo script composito risultante. Il percorso dello script per lo script composito viene definito tramite l'attributo Path nell'elemento CompositeScript.
Assegnazione di un nome file a uno script composito
È possibile assegnare facoltativamente un nome file a uno script composito aggiungendo l'attributo Path all'elemento CompositeScript, come mostrato nell'esempio seguente:
<asp:CompositeScript Path="~/Scripts/MyCompositeScript.js">
.gif "Nota") Nota: |
|---|
Non utilizzare una virgola (,) o un carattere barra verticale (|) nel nome dello script. |
Modifica dinamica dei riferimenti a script
La combinazione degli script si verifica dopo che è stato generato l'evento ResolveScriptReference. Ciò significa che è possibile creare un gestore eventi per modificare i riferimenti a script. Non è tuttavia possibile modificare l'ordine in cui gli script vengono registrati.
Condivisione di script compositi tra le pagine
Per condividere uno script composito tra più pagine ed evitare di eseguire più download, è possibile aggiungere lo script composito a una pagina master. Allo stesso modo, è possibile utilizzare i temi per definire una combinazione di script.
Combinazione di script localizzati
Se la proprietà EnableScriptLocalization viene impostata su true (che è l'impostazione predefinita), il framework combina le versioni localizzate degli script se sono disponibili. Gli script localizzati vengono combinati nello stesso ordine e utilizzando lo stesso modello delle versioni originali.
Utilizzo di script compositi con il controllo UpdatePanel
È possibile creare uno script composito che include script associati a controlli o componenti personalizzati in un controllo UpdatePanel. Durante il postback asincrono di un controllo UpdatePanel, un controllo potrebbe tentare di registrare uno script che è stato precedentemente scaricato come parte dello script composito. In tal caso, il framework rimuove il riferimento al singolo script e lo sostituisce con un riferimento allo script composito precedentemente scaricato.
Nell'esempio seguente viene mostrato un riferimento a uno script composito che supporta un componente personalizzato definito in un controllo UpdatePanel.
<asp:ScriptManager id="SM1" >
<Scripts>
<asp:CompositeScript>
<Scripts>
<asp:ScriptReference Name="MicrosoftAjax.js"/>
<asp:ScriptReference Name="Custom.Extender.1.js"
Assembly="Custom" />
<asp:ScriptReference Path="~/Scripts/Custom2.js" />
<asp:ScriptReference Name="Custom.Extender.2.js"
Assembly="Custom" />
<asp:ScriptReference Name="Custom.Extender.3.js"
Assembly="Custom" />
<asp:ScriptReference Name="Custom.Extender.4.js"
Assembly="Custom" />
</Scripts>
</asp:CompositeScript>
</Scripts>
</asp: ScriptManager>
<asp:UpdatePanel ...>
<ContentTemplate>
...
<cc:custom4 id="cc4"... />
...
</ContentTemplate>
</asp:UpdatePanel>