Procédure pas à pas : incorporation d'un fichier JavaScript en tant que ressource dans un assembly

Article
10/22/2014

Mise à jour : novembre 2007

Dans cette procédure pas à pas, vous allez inclure un fichier JavaScript comme une ressource incorporée dans un assembly. Vous incorporez un fichier JavaScript lorsque vous avez un composant de script client qui doit être distribué avec un assembly que vous avez créé. Par exemple, vous pouvez créer un contrôle serveur ASP.NET personnalisé qui utilise des fichiers JavaScript pour implémenter des fonctionnalités AJAX pour ASP.NET. Vous pouvez incorporer les fichiers JavaScript dans l'assembly, puis ils pourront être référencés depuis une application Web qui enregistre l'assembly.

Composants requis

Pour implémenter les étapes de cette procédure pas à pas, vous aurez besoin de :

Microsoft Visual Studio 2005.

Remarque :
Vous ne pouvez pas utiliser Visual Web Developer 2005 Express car Visual Web Developer Express ne vous permet pas de créer le projet de bibliothèque de classes requis dans la procédure pas à pas.

Création d'un assembly contenant un fichier JavaScript incorporé

Pour commencer, vous aller créer un fichier qui contient le code JavaScript que vous souhaitez incorporer dans l'assembly.

Pour incorporer un fichier de script client dans un assembly

Dans Visual Studio, créez un nouveau projet de bibliothèque de classes nommé SampleControl.
Ajoutez au projet des références aux assemblys System.Web, System.Drawing et System.Web.Extensions.
Ajoutez un nouveau fichier JScript nommé UpdatePanelAnimation.js au projet.

Ajoutez le code suivant au fichier UpdatePanelAnimation.js :

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);
    }
}

Le code contient une fonction JavaScript qui affiche temporairement une bordure colorée autour d'un contrôle UpdatePanel.

Dans le Fenêtre Propriétés pour le fichier UpdatePanelAnimation.js, définissez Action de génération à Ressource incorporée.
Ajoutez au projet un fichier de classe nommé CustomControl.

Remplacez le contenu du fichier CustomControl par le code suivant :

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);
            }
        }
    }
}

Cette classe contient des propriétés permettant de personnaliser la bordure affichée autour du contrôle UpdatePanel. Le code enregistre également le code JavaScript à utiliser dans une page Web. Le code crée un gestionnaire de l'événement load de l'objet Sys.Application. La fonction animate du fichier UpdatePanelAnimation.js est appelée lorsqu'une mise à jour de page partielle est traitée.

Ajoutez la ligne suivante au fichier AssemblyInfo.

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

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

Remarque :
Le fichier AssemblyInfo.vb est dans le nœud My Project de l'Explorateur de solutions. Si vous ne voyez pas de fichiers dans le nœud My Project, procédez comme suit : dans le menu Projet, cliquez sur Afficher tous les fichiers. Le fichier AssemblyInfo.cs est dans le nœud Propriétés de l'Explorateur de solutions.

La définition WebResource doit inclure l'espace de noms par défaut de l'assembly et le nom du fichier .js.

Générez le projet.

La compilation produit un assembly nommé SampleControl.dll. Le code JavaScript du fichier UpdatePanelAnimation.js est incorporé dans cet assembly en tant que ressource.

Référencement du fichier de script incorporé

Vous pouvez maintenant référencer le fichier de script incorporé dans une application Web.

Remarque :
Bien que vous puissiez créer le projet de bibliothèque de classes et le site Web dans la même solution Visual Studio, cette procédure pas à pas ne présuppose pas ce fait. Avoir les projets dans des solutions séparées permet de simuler la manière dont travailleraient un développeur de contrôles et un développeur de pages séparément. Toutefois, par commodité, vous pouvez créer les deux projets dans la même solution et apporter de petites modifications aux étapes de la procédure pas à pas.

Bien que vous puissiez créer le projet de bibliothèque de classes et le site Web dans la même solution Visual Studio, cette procédure pas à pas ne présuppose pas ce fait. Avoir les projets dans des solutions séparées permet de simuler la manière dont travailleraient un développeur de contrôles et un développeur de pages séparément. Toutefois, par commodité, vous pouvez créer les deux projets dans la même solution et apporter de petites modifications aux étapes de la procédure pas à pas.

Pour référence le fichier de script incorporé

Dans Visual Studio, créez un site Web AJAX.
Dans le répertoire racine du site Web, créez un dossier Bin.

Copiez SampleControl.dll depuis le dossier Bin\Debug ou Bin\Release du projet de bibliothèque de classes dans le dossier Bin du site Web.

Remarque :
Si vous avez créé le projet de bibliothèque de classes et le site Web dans la même solution Visual Studio, vous pouvez ajouter une référence au projet de bibliothèque de classes dans le site Web. Pour plus d'informations, consultez Comment : ajouter une référence à un projet Visual Studio dans un site Web.

Remplacez le code contenu dans le fichier Default.aspx par le code suivant :

<%@ 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>

Ce code inclut un contrôle ScriptReference qui référence l'assembly et le nom du fichier .js que vous avez créé à l'étape précédente. Le nom du fichier .js inclut un préfixe qui référence l'espace de noms par défaut de l'assembly.

Exécutez le projet et, sur la page, cliquez sur les dates dans le calendrier.

Chaque fois que vous cliquez sur une date dans le calendrier, vous pouvez voir une bordure verte autour du contrôle UpdatePanel.

Récapitulatif

Cette procédure pas à pas vous a montré comment incorporer un fichier JavaScript en tant que ressource dans un assembly. Le fichier de script incorporé peut être accédé depuis une application Web qui contient l'assembly.

L'étape suivante est apprendre comment incorporer des ressources localisées dans un assembly pour une utilisation dans un script client. Pour plus d'informations, consultez Procédure pas à pas : incorporation de ressources localisées pour un fichier JavaScript.

Voir aussi

Tâches

Procédure pas à pas : ajout de ressources localisées à un fichier JavaScript

Concepts

Création d'un script client personnalisé à l'aide de Microsoft AJAX Library