Demonstra Passo a passo: Incorporação de um arquivo JavaScript sistema autônomo um recurso em um assembly

Artigo
10/15/2014

Nessa explicação passo a passo, você irá incluir um arquivo JavaScript como um recurso incorporado em um conjunto de módulos (assembly).Você incorpora um arquivo JavaScript quando você tiver um componente de scripts de cliente que deve ser distribuído com um conjunto de módulos (assembly) que você criou.Por exemplo, você pode criar um controle de servidor ASP.NET personalizado que usa arquivos JavaScript para implementar a funcionalidade AJAX do ASP.NET.Você pode incorporar os arquivos JavaScript no conjunto de módulos (assembly) e, em seguida, pode ser referenciados de um aplicativo Web Web que registra o assembly.

Pré-requisitos

Para implementar os procedimentos nessa explicação passo a passo, você precisará:

Microsoft Visual Studio 2005.

Observação:
Não pode-se usar Visual Web Developer 2005 Express Edition, já que Visual Web Developer Express Edition não permite que você crie o projeto de biblioteca de classes necessário nessa explicação passo a passo.

Criando um módulo (assembly) que contém um arquivo incorporado JavaScript

Para começar, você criará um arquivo que contém o código JavaScript que você deseja incorporar no conjunto de módulos (assembly).

Para incorporar um script de cliente em um assembly

Em Visual Studio, crie um novo projeto biblioteca de classes denominado SampleControl.
Adicione referências para os módulos System.Web e System.Web.Extensions ao projeto.
Adicione um novo arquivo JScript para o projeto chamado UpdatePanelAnimation.js.

Adicione o seguinte código no arquivo 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);
    }
}

O código contém uma função de JavaScript que exibe uma borda colorida ao redor de um controle UpdatePanel temporariamente.

Na janela Propriedades para o arquivo UpdatePanelAnimation.js, defina Ação ao Compilar para Recurso Incorporado.
Adicione um arquivo de classe chamado CustomControl ao projeto.

Substitua o código no arquivo do CustomControl com o seguinte 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);
            }
        }
    }
}

Essa classe contém propriedades para personalizar a borda que é exibida ao redor do controle UpdatePanel.O código também registra código JavaScript para usar em um página da Web.O código cria um manipulador para o evento Carregar do objeto Sys.Application.A função animate no arquivo UpdatePanelAnimation.js é chamada quando uma atualização parcial de página é processada.

Adicione as linhas a seguir ao arquivo AssemblyInfo.

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

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

Observação:
O arquivo AssemblyInfo.vb está no nó Meu projeto do Gerenciador de Soluções.Se você não vir quaisquer arquivos no nó Meu Projeto, faça o seguinte: no menu Projeto, clique em Mostrar todos os arquivos.O arquivo AssemblyInfo.cs está no nó Propriedades do Gerenciador de Soluções.

A definição WebResource deve incluir o namespace padrão do módulo e o nome do arquivo .js.

Crie o projeto.

Quando termina a compilação, você terá um assembly chamado SampleControl.dll.O código JavaScript no arquivo UpdatePanelAnimation.js é incorporado neste conjunto de módulos (assembly) sistema autônomo um recurso.

Referênciando o Arquivo de Script Incorporados

Você pode agora fazer referência ao arquivo de script incorporado em um aplicativo da Web.

Observação:
Embora você possa criar o projeto de biblioteca de classes e o site da Web na mesma solução Visual Studio, esta explicação não presume que você esteja fazendo isso.Ter os projetos em soluções separadas simula como um desenvolvedor de controle e um desenvolvedor de página poderiam trabalhar separadamente.No entanto, para sua conveniência você pode criar ambos os projetos na mesma solução e efetuar pequenos ajustes aos procedimentos na explicação.

Embora você possa criar o projeto de biblioteca de classes e o site da Web na mesma solução Visual Studio, esta explicação não presume que você esteja fazendo isso.Ter os projetos em soluções separadas simula como um desenvolvedor de controle e um desenvolvedor de página poderiam trabalhar separadamente.No entanto, para sua conveniência você pode criar ambos os projetos na mesma solução e efetuar pequenos ajustes aos procedimentos na explicação.

Para referenciar o arquivo de script incorporados

Em Visual Studio, criar um novo site com AJAX habilitado.
Crie um diretório Bin no diretório raiz do Site da Web.

Copie o SampleControl.dll do diretório Bin\Debug ou Bin\Release do projeto de biblioteca de classes para a pasta Bin do site da Web.

Observação:
Se você criou o projeto de biblioteca de classes e o site da Web na mesma solução Visual Studio, você pode adicionar uma referência do projeto de biblioteca de classes no site da Web.Para obter detalhes, consulte:Como: Adicionar uma referência a um projeto do Visual Studio em um site da Web.

Substitua o código no arquivo Default.aspx pelo o seguinte código:

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

Esse código inclui um controle ScriptReference que faz referência o assembly e o nome do arquivo .js que você criou no procedimento anterior.O nome do arquivo .js inclui um prefixo que referencia o namespace padrão do assembly.

Executar o projeto e, na página, clique nas datas no calendário.

Toda vez que você clique em uma data no calendário, vai aparecer uma borda verde redor o controle UpdatePanel.

Revisão

Essa explicação passo a passo mostrou como incorporar um arquivo JavaScript como um recurso em um conjunto de módulos (assembly).O arquivo de script incorporado pode ser acessado de um aplicativo da Web que contém o módulo.

A próxima etapa é para aprender a incorporar recursos localizados em um conjunto de módulos (assembly) para uso em script de cliente.Para obter mais informações, consulte Demonstra Passo a passo: A incorporação de recursos localizados de um arquivo JavaScript.

Consulte também

Tarefas

Demonstra Passo a passo: Adicionando recursos localizados em um arquivo JavaScript

Conceitos

Criando Scripts de Cliente Personalizado Usando a Biblioteca Microsoft AJAX

Compartilhar via