Procedura dettagliata: incorporamento di un file JavaScript come risorsa in un assembly

Articolo
10/22/2014

Aggiornamento: novembre 2007

In questa procedura dettagliata verrà incluso un file JavaScript come risorsa incorporata in un assembly. Incorporare un file JavaScript quando si dispone di un componente script client che deve essere distribuito con un assembly creato. Ad esempio, è possibile creare un controllo server ASP.NET personalizzato che utilizza file JavaScript per implementare la funzionalità AJAX per ASP.NET. È possibile incorporare i file JavaScript nell'assembly e farvi quindi riferimento da un'applicazione Web che registra l'assembly.

Prerequisiti

Per implementare le procedure in questa procedura dettagliata è necessario:

Microsoft Visual Studio 2005.

Nota:
Non è possibile utilizzare Visual Web Developer 2005 Express Edition, perché Visual Web Developer Express Edition non consente di creare il progetto Libreria di classi richiesto nella procedura dettagliata.

Creazione di un assembly che contiene un file JavaScript incorporato

Per iniziare verrà creato un file contenente il codice JavaScript che si desidera incorporare nell'assembly.

Per incorporare un file script client in un assembly

In Visual Studio creare un nuovo progetto Libreria di classi denominato SampleControl.
Aggiungere al progetto riferimenti agli assembly System.Web, System.Drawing e System.Web.Extensions.
Aggiungere al progetto un nuovo file JScript denominato UpdatePanelAnimation.js.

Aggiungere al file UpdatePanelAnimation.js il seguente codice:

BorderAnimation = function(color) {
    this._color = color;
}

BorderAnimation.prototype = {
    animate: function(panelElement) {
        var s = panelElement.style;
        s.borderWidth = '2px';
        s.borderColor = this._color;
        s.borderStyle = 'solid';

        window.setTimeout(
            function() {{
                s.borderWidth = 0;
            }},
            500);
    }
}

BorderAnimation = function(color) {
    this._color = color;
}

BorderAnimation.prototype = {
    animate: function(panelElement) {
        var s = panelElement.style;
        s.borderWidth = '2px';
        s.borderColor = this._color;
        s.borderStyle = 'solid';

        window.setTimeout(
            function() {{
                s.borderWidth = 0;
            }},
            500);
    }
}

Il codice contiene una funzione JavaScript che consente di visualizzare temporaneamente un bordo colorato intorno al controllo UpdatePanel.

Nella finestra Proprietà del file UpdatePanelAnimation.js, impostare Operazione di compilazione su Risorsa incorporata.
Aggiungere al progetto un file della classe denominato CustomControl.

Sostituire il codice nel file CustomControl con il codice seguente:

Imports System.Web.UI
Imports System.Drawing
Imports System.Globalization

Public Class UpdatePanelAnimationWithClientResource
    Inherits Control

    Private _updatePanelID As String
    Private _borderColor As Color
    Private _animate As Boolean

    Public Property BorderColor() As Color
        Get
            Return _borderColor
        End Get
        Set(ByVal value As Color)
            _borderColor = value
        End Set
    End Property

    Public Property UpdatePanelID() As String
        Get
            Return _updatePanelID
        End Get
        Set(ByVal value As String)
            _updatePanelID = value
        End Set
    End Property

    Public Property Animate() As Boolean
        Get
            Return _animate
        End Get
        Set(ByVal value As Boolean)
            _animate = value
        End Set
    End Property

    Protected Overrides Sub OnPreRender(ByVal e As EventArgs)
        MyBase.OnPreRender(e)
        If (Animate) Then

            Dim updatePanel As UpdatePanel = CType(Me.FindControl(UpdatePanelID), UpdatePanel)

            Dim script As String = String.Format( _
                   CultureInfo.InvariantCulture, _
                   "Sys.Application.add_load(function(sender, args) {{var {0}_borderAnimation = new BorderAnimation('{1}');var panelElement = document.getElementById('{0}');if (args.get_isPartialLoad()) {{{0}_borderAnimation.animate(panelElement);}}}});", _
                   updatePanel.ClientID, _
                   ColorTranslator.ToHtml(BorderColor))


            ScriptManager.RegisterStartupScript( _
                Me, _
                GetType(UpdatePanelAnimationWithClientResource), _
                ClientID, _
                script, _
                True)
        End If
    End Sub
End Class

using System;
using System.Drawing;
using System.Web.UI;
using System.Web;
using System.Globalization;

namespace SampleControl
{
    public class UpdatePanelAnimationWithClientResource : Control
    {
        private string _updatePanelID;
        private Color _borderColor;
        private Boolean _animate;
        public Color BorderColor
        {
            get
            {
                return _borderColor;
            }
            set
            {
                _borderColor = value;
            }
        }

        public string UpdatePanelID
        {
            get
            {
                return _updatePanelID;
            }
            set
            {
                _updatePanelID = value;
            }
        }

        public Boolean Animate
        {
            get
            {
                return _animate;
            }
            set
            {
                _animate = value;
            }
        }
        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);
            if (Animate)
            {

                UpdatePanel updatePanel = (UpdatePanel)FindControl(UpdatePanelID);

                string script = String.Format(
                   CultureInfo.InvariantCulture,
                   @"
Sys.Application.add_load(function(sender, args) {{
var {0}_borderAnimation = new BorderAnimation('{1}');    
var panelElement = document.getElementById('{0}');
     if (args.get_isPartialLoad()) {{
        {0}_borderAnimation.animate(panelElement);
    }}
}})
",
                   updatePanel.ClientID,
                   ColorTranslator.ToHtml(BorderColor));


                ScriptManager.RegisterStartupScript(
                    this,
                    typeof(UpdatePanelAnimationWithClientResource),
                    ClientID,
                    script,
                    true);
            }
        }
    }
}

Questa classe contiene le proprietà per la personalizzazione del bordo visualizzato intorno al controllo UpdatePanel. Il codice registra inoltre il codice JavaScript da utilizzare in una pagina Web. Il codice crea un gestore per l'evento load dell'oggetto Sys.Application. La funzione animate nel file UpdatePanelAnimation.js viene chiamata quando viene elaborato un aggiornamento a pagina parziale.

Aggiungere al file AssemblyInfo il codice seguente.

<Assembly: System.Web.UI.WebResource("SampleControl.UpdatePanelAnimation.js", "application/x-javascript")>

[assembly: System.Web.UI.WebResource("SampleControl.UpdatePanelAnimation.js", "application/x-javascript")]

Nota:
Il file AssemblyInfo.vb si trova nel nodo Progetto di Esplora soluzioni. Se non sono presenti file nel nodo Progetto, scegliere Mostra tutti i file dal menu Progetto. Il file AssemblyInfo.cs si trova nel nodo Proprietà di Esplora soluzioni.

La definizione WebResource deve includere lo spazio dei nomi predefinito dell'assembly e il nome del file js.

Generare il progetto.

Al termine della compilazione si otterrà un assembly denominato SampleControl.dll. Il codice JavaScript nel file UpdatePanelAnimation.js viene incorporato in questo assembly come risorsa.

Riferimento al file script incorporato

È ora possibile fare riferimento al file script incorporato in un'applicazione Web.

Nota:
Anche se è possibile creare il progetto Libreria di classi e il sito Web nella stessa soluzione Visual Studio, in questa procedura dettagliata non si presuppone questo tipo di procedura. La presenza dei progetti in soluzioni separate consente di simulare la modalità di lavoro separata di uno sviluppatore di controlli e uno sviluppatore di pagine. Per praticità è comunque possibile creare entrambi progetti nella stessa soluzione e apportare piccole rettifiche alle procedure nella procedura dettagliata.

Anche se è possibile creare il progetto Libreria di classi e il sito Web nella stessa soluzione Visual Studio, in questa procedura dettagliata non si presuppone questo tipo di procedura. La presenza dei progetti in soluzioni separate consente di simulare la modalità di lavoro separata di uno sviluppatore di controlli e uno sviluppatore di pagine. Per praticità è comunque possibile creare entrambi progetti nella stessa soluzione e apportare piccole rettifiche alle procedure nella procedura dettagliata.

Per fare riferimento al file script incorporato

In Visual Studio creare un nuovo sito Web con supporto AJAX.
Creare una cartella Bin nella directory radice del sito Web.

Copiare SampleControl.dll dalla directory Bin\Debug o Bin\Release del progetto Libreria di classi nella cartella Bin del sito Web.

Nota:
Se il progetto Libreria di classi e il sito Web sono stati creati nella stessa soluzione Visual Studio, è possibile aggiungere un riferimento dal progetto Libreria di classi al sito Web. Per informazioni dettagliate, vedere Procedura: aggiungere un riferimento a un progetto Visual Studio in un sito Web.

Sostituire il codice nel file metodo Default.aspx con il codice seguente:

<%@ Page Language="VB" AutoEventWireup="true" %>

<%@ Register TagPrefix="Samples" Namespace="SampleControl" Assembly="SampleControl" %>

<!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>ScriptReference</title>
</head>
<body>
    <form id="form1" >
        <div>
            <asp:ScriptManager ID="ScriptManager1" 
                                 EnablePartialRendering="True"
                                 >
             <Scripts>
                <asp:ScriptReference Assembly="SampleControl" Name="SampleControl.UpdatePanelAnimation.js" />
             </Scripts>
            </asp:ScriptManager>


            <Samples:UpdatePanelAnimationWithClientResource 
                     ID="UpdatePanelAnimator1"
                     BorderColor="Green"
                     Animate="true"
                     UpdatePanelID="UpdatePanel1"
                      >
            </Samples:UpdatePanelAnimationWithClientResource>
            <asp:UpdatePanel ID="UpdatePanel1" 
                               UpdateMode="Conditional"
                               >
                <ContentTemplate>
                    <asp:Calendar ID="Calendar2" 
                                  >
                    </asp:Calendar>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </form>
</body>
</html>

<%@ Page Language="C#" %>
<%@ Register TagPrefix="Samples" Namespace="SampleControl" Assembly="SampleControl" %>

<!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 >
    <title>ScriptReference</title>
</head>
<body>
    <form id="form1" >
        <div>
            <asp:ScriptManager ID="ScriptManager1" 
                                 EnablePartialRendering="True"
                                 >
             <Scripts>
                <asp:ScriptReference Assembly="SampleControl" Name="SampleControl.UpdatePanelAnimation.js" />
             </Scripts>
            </asp:ScriptManager>


            <Samples:UpdatePanelAnimationWithClientResource 
                     ID="UpdatePanelAnimator1"
                     BorderColor="Green"
                     Animate="true"
                     UpdatePanelID="UpdatePanel1"
                      >
            </Samples:UpdatePanelAnimationWithClientResource>
            <asp:UpdatePanel ID="UpdatePanel1" 
                               UpdateMode="Conditional"
                               >
                <ContentTemplate>
                    <asp:Calendar ID="Calendar2" 
                                  >
                    </asp:Calendar>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </form>
</body>
</html>

Questo codice include un controllo ScriptReference che fa riferimento all'assembly e il nome del file con estensione js creato nella procedura precedente. Il nome del file con estensione js include un prefisso che fa riferimento allo spazio dei nomi predefinito dell'assembly.

Eseguire il progetto e nella pagina fare clic sulle date del calendario.

Ogni volta che si fa clic su una data del calendario, verrà visualizzato un bordo verde intorno al controllo UpdatePanel.

Verifica

In questa procedura dettagliata è stato illustrato come incorporare un file JavaScript come risorsa in un assembly. È possibile accedere al file script incorporato in un'applicazione Web che contiene l'assembly.

Nel passaggio successivo viene illustrato come incorporare risorse localizzate in un assembly da utilizzare nello script client. Per ulteriori informazioni, vedere Procedura dettagliata: incorporamento di risorse localizzate per un file JavaScript.

Vedere anche

Attività

Procedura dettagliata: aggiunta di risorse localizzate a un file JavaScript

Concetti

Creazione di uno script client personalizzato utilizzando Microsoft AJAX Library

Condividi tramite