Tutorial: Incrustar un archivo JavaScript como recurso en un ensamblado

Artículo
10/22/2014

Actualización: noviembre 2007

En este tutorial, se incluirá un archivo JavaScript como un recurso incrustado en un ensamblado. Un archivo JavaScript se incrusta si tiene un componente de script de cliente que se debe distribuir con un ensamblado que haya creado. Por ejemplo, podría crear un control de servidor ASP.NET personalizado que utilice archivos JavaScript para implementar la funcionalidad de AJAX para ASP.NET. Puede incrustar los archivos JavaScript en el ensamblado y, a continuación, se puede hacer referencia a ellos desde una aplicación web que registre el ensamblado.

Requisitos previos

Para implementar los procedimientos de este tutorial necesitará:

Microsoft Visual Studio 2005.

Nota:

No puede usar Visual Web Developer 2005 Express, porque Visual Web Developer Express no permite crear el proyecto de bibliotecas de clase que precisa el tutorial.

Nota:
No puede usar Visual Web Developer 2005 Express, porque Visual Web Developer Express no permite crear el proyecto de bibliotecas de clase que precisa el tutorial.

Crear un ensamblado que contiene un archivo JavaScript incrustado

Para comenzar, creará un archivo que contiene el código JavaScript que desea incrustar en el ensamblado.

Para incrustar un archivo de script de cliente en un ensamblado

En Visual Studio, cree un nuevo proyecto de bibliotecas de clase denominado SampleControl.
Agregue referencias a los ensamblados System.Web, System.Drawing y System.Web.Extensions al proyecto.
Agregue un nuevo archivo JScript denominado UpdatePanelAnimation.js al proyecto.

Agregue el siguiente código al archivo 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);
    }
}

El código contiene una función JavaScript que muestra temporalmente un borde coloreado alrededor de un control UpdatePanel.

En la ventana Propiedades del archivo UpdatePanelAnimation.js, establezca Acción de generación en Recurso incrustado.
Agregue un archivo de clase denominado al proyecto.

Reemplace el código del archivo CustomControl por el siguiente código:

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

Esta clase contiene las propiedades para personalizar el borde que se muestra alrededor del control UpdatePanel. El código también registra código JavaScript para utilizarlo en una página web. El código crea un controlador para el evento load del objeto Sys.Application. Se llama a la función animate del archivo UpdatePanelAnimation.js cuando se procesa una actualización parcial de la página.

Agregue la siguiente línea al archivo AssemblyInfo.

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

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

Nota:
El archivo AssemblyInfo.vb está en el nodo My Project del Explorador de soluciones. Si no ve ningún archivo en el nodo My Project, en el menú Proyecto, haga clic en Mostrar todos los archivos. El archivo AssemblyInfo.cs está en el nodo Propiedades del Explorador de soluciones.

La definición WebResource debe incluir el espacio de nombres predeterminado del ensamblado y el nombre del archivo .js.

Genere el proyecto.

Cuando finalice la compilación, tendrá un ensamblado denominado SampleControl.dll. El código JavaScript del archivo UpdatePanelAnimation.js se incrusta en este ensamblado como un recurso.

Hacer referencia al archivo de script incrustado

Ahora puede hacer referencia al archivo de script incrustado en una aplicación web.

Nota:
Aunque puede crear el proyecto de bibliotecas de clase y el sitio web en la misma solución de Visual Studio, en este tutorial no se supone que se haga esto. Si los proyectos se encuentran en soluciones independientes, se emula la forma en que un desarrollador de controles y un desarrollador de páginas trabajarían por separado. Sin embargo, por mayor comodidad, puede crear ambos proyectos en la misma solución y realizar pequeños ajustes en los procedimientos del tutorial.

Aunque puede crear el proyecto de bibliotecas de clase y el sitio web en la misma solución de Visual Studio, en este tutorial no se supone que se haga esto. Si los proyectos se encuentran en soluciones independientes, se emula la forma en que un desarrollador de controles y un desarrollador de páginas trabajarían por separado. Sin embargo, por mayor comodidad, puede crear ambos proyectos en la misma solución y realizar pequeños ajustes en los procedimientos del tutorial.

Para hacer referencia al archivo de script incrustado

En Visual Studio, cree un nuevo sitio web habilitado para AJAX.
Cree una carpeta Bin en el directorio raíz del sitio web.

Copie SampleControl.dll del directorio Bin\Debug o Bin\Release del proyecto de bibliotecas de clase a la carpeta Bin del sitio web.

Nota:
Si creó el proyecto de bibliotecas de clase y el sitio web en la misma solución de Visual Studio, puede agregar una referencia del proyecto de bibliotecas de clase al sitio web. Para obtener información detallada, vea Cómo: Agregar una referencia a un proyecto de Visual Studio en un sitio Web.

Reemplace el código del archivo Default.aspx por el código siguiente:

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

Este código incluye un control ScriptReference que hace referencia al ensamblado y al nombre del archivo .js que creó en el procedimiento anterior. El nombre del archivo .js incluye un prefijo que hace referencia al espacio de nombres predeterminado del ensamblado.

Ejecute el proyecto y, en la página, haga clic en las fechas del calendario.

Cada vez que haga clic en una fecha del calendario, verá un borde verde alrededor del control UpdatePanel.

Revisión

Este tutorial explicó cómo incrustar un archivo JavaScript como un recurso en un ensamblado. Se puede obtener acceso al archivo de script incrustado en una aplicación web que contiene el ensamblado.

El paso siguiente es aprender a incrustar recursos adaptados en un ensamblado para usarlos en script de cliente. Para obtener más información, vea Tutorial: Incrustar recursos localizados en un archivo JavaScript.

Compartir a través de

Tutorial: Incrustar un archivo JavaScript como recurso en un ensamblado

Requisitos previos

Crear un ensamblado que contiene un archivo JavaScript incrustado

Para incrustar un archivo de script de cliente en un ensamblado

Hacer referencia al archivo de script incrustado

Para hacer referencia al archivo de script incrustado

Revisión

Vea también

Tareas

Conceptos

Recursos adicionales