Tutorial: Incrustar un archivo JavaScript como recurso en un ensamblado

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.

Para implementar los procedimientos de este tutorial necesitará:

  • Microsoft Visual Studio 2005.

    Bb398930.alert_note(es-es,VS.90).gifNota:

    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.

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

  1. En Visual Studio, cree un nuevo proyecto de bibliotecas de clase denominado SampleControl.

  2. Agregue referencias a los ensamblados System.Web, System.Drawing y System.Web.Extensions al proyecto.

  3. Agregue un nuevo archivo JScript denominado UpdatePanelAnimation.js al proyecto.

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

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

  5. En la ventana Propiedades del archivo UpdatePanelAnimation.js, establezca Acción de generación en Recurso incrustado.

    Establecer archivo de script en recurso incrustado
  6. Agregue un archivo de clase denominado al proyecto.

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

    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.

  8. Agregue la siguiente línea al archivo AssemblyInfo.

    [assembly: System.Web.UI.WebResource("SampleControl.UpdatePanelAnimation.js", "application/x-javascript")]
    
    
    
    Bb398930.alert_note(es-es,VS.90).gifNota:

    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.

  9. 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.

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

Bb398930.alert_note(es-es,VS.90).gifNota:

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

  1. En Visual Studio, cree un nuevo sitio web habilitado para AJAX.

  2. Cree una carpeta Bin en el directorio raíz del sitio web.

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

    Bb398930.alert_note(es-es,VS.90).gifNota:

    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.

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

    <%@ 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 runat="server">
    
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>ScriptReference</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:ScriptManager ID="ScriptManager1" 
                                     EnablePartialRendering="True"
                                     runat="server">
                 <Scripts>
                    <asp:ScriptReference Assembly="SampleControl" Name="SampleControl.UpdatePanelAnimation.js" />
                 </Scripts>
                </asp:ScriptManager>
    
    
                <Samples:UpdatePanelAnimationWithClientResource 
                         ID="UpdatePanelAnimator1"
                         BorderColor="Green"
                         Animate="true"
                         UpdatePanelID="UpdatePanel1"
                         runat="server" >
                </Samples:UpdatePanelAnimationWithClientResource>
                <asp:UpdatePanel ID="UpdatePanel1" 
                                   UpdateMode="Conditional"
                                   runat="server">
                    <ContentTemplate>
                        <asp:Calendar ID="Calendar2" 
                                      runat="server">
                        </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.

  5. 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.

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.

Adiciones de comunidad

Mostrar: