演练：将 JavaScript 文件作为资源嵌入到程序集中

项目
10/22/2014

更新：2007 年 11 月

在本演练中，您将要把 JavaScript 文件作为嵌入资源包括到程序集中。当您有必须随您创建的程序集一起分发的客户端脚本组件时，就可在该程序集中嵌入一个 JavaScript 文件。例如，您可创建一个自定义 ASP.NET 服务器控件，该控件使用 JavaScript 文件来实现 ASP.NET 的 AJAX 功能。那么，您就可在程序集中嵌入 JavaScript 文件，然后就可从注册该程序集的 Web 应用程序引用这些文件了。

先决条件

若要在本演练中实现这些过程，您需要：

Microsoft Visual Studio 2005.

说明：

您不能使用 Visual Web Developer 2005 速成版，因为您无法利用 Visual Web Developer 速成版创建本演练中所需的类库项目。

说明：
您不能使用 Visual Web Developer 2005 速成版，因为您无法利用 Visual Web Developer 速成版创建本演练中所需的类库项目。

创建包含嵌入的 JavaScript 文件的程序集

首先，您需要创建一个包含要嵌入到程序集中的 JavaScript 代码的文件。

在程序集中嵌入客户端脚本文件

在 Visual Studio 中，创建一个名为 SampleControl 的新类库项目。
向项目中添加对 System.Web、System.Drawing 和 System.Web.Extensions 程序集的引用。
将名为 UpdatePanelAnimation.js 的新 JScript 文件添加到项目中。

将下面的代码添加到 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);
    }
}

该代码包含可临时显示 UpdatePanel 控件的彩色边框的 JavaScript 函数。

在 UpdatePanelAnimation.js 文件的“属性”窗口中，将**“生成操作”设置为“嵌入的资源”**。
将名为 CustomControl 的类文件添加到项目中。

用下面的代码替换 CustomControl 文件中的所有代码：

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

此类包含有可自定义 UpdatePanel 控件的边框的属性。此代码还可以注册 JavaScript 代码，以在网页中使用。该代码可为 Sys.Application 对象的加载事件创建处理程序。处理部分页更新时会调用 UpdatePanelAnimation.js 文件中的 animate 函数。

将下行添加到 AssemblyInfo 文件中。

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

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

说明：
AssemblyInfo.vb 文件位于解决方案资源管理器的“我的项目”节点中。如果在“我的项目”节点中未看到任何文件，请在“项目”菜单中单击“显示所有文件”。AssemblyInfo.cs 文件位于解决方案资源管理器的“属性”节点中。

WebResource 定义必须包含程序集的默认命名空间和 .js 文件的名称。

生成项目。

完成编译后，您将得到一个名为 SampleControl.dll 的程序集。UpdatePanelAnimation.js 文件中的 JavaScript 代码已经作为资源嵌入到了此程序集中。

引用嵌入的脚本文件

现在，您可以在 Web 应用程序中引用嵌入的脚本文件了。

说明：
虽然可以在同一 Visual Studio 解决方案中创建类库项目和网站，但本演练假定您没有进行这些操作。通过将项目放置在不同的解决方案中，可模拟控件开发人员和页面开发人员如何单独工作。但是，为方便期间，您可以在同一解决方案中创建这两个项目，并对本演练中的过程进行小小的调整。

引用嵌入的脚本文件

在 Visual Studio 中，创建新的支持 AJAX 的网站。
在该网站的根目录中创建一个 Bin 文件夹。

将 SampleControl.dll 从类库项目的 Bin\Debug 或 Bin\Release 目录复制到网站的 Bin 文件夹。

说明：
如果在同一 Visual Studio 解决方案中创建了类库项目和网站，则可从类库项目向网站添加一个引用。有关详细信息，请参见如何：在网站中添加对 Visual Studio 项目的引用。

用下面的代码替换 Default.aspx 文件中的代码：

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

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

此代码包括引用程序集的 ScriptReference 控件，以及在前面步骤中创建的 .js 文件的名称。该 .js 文件的名称包括引用程序集的默认命名空间的前缀。

运行该项目，并在页面中的日历中单击日期。

每次在日历中单击日期时，您都可在 UpdatePanel 控件的周围看到绿色边框。

回顾

本演练向您演示了如何将 JavaScript 文件作为资源嵌入到程序集中。可在包含该程序集的 Web 应用程序中访问嵌入的脚本文件。

下一步是学习如何将本地化资源嵌入到程序集中，以在客户端脚本中使用。有关更多信息，请参见演练：为 JavaScript 文件嵌入本地化资源。

通过

演练：将 JavaScript 文件作为资源嵌入到程序集中

先决条件

创建包含嵌入的 JavaScript 文件的程序集

在程序集中嵌入客户端脚本文件

引用嵌入的脚本文件

引用嵌入的脚本文件

回顾

请参见

任务

概念

其他资源