演练:将 JavaScript 文件作为资源嵌入到程序集中
更新:2007 年 11 月
在本演练中,您将要把 JavaScript 文件作为嵌入资源包括到程序集中。当您有必须随您创建的程序集一起分发的客户端脚本组件时,就可在该程序集中嵌入一个 JavaScript 文件。例如,您可创建一个自定义 ASP.NET 服务器控件,该控件使用 JavaScript 文件来实现 ASP.NET 的 AJAX 功能。那么,您就可在程序集中嵌入 JavaScript 文件,然后就可从注册该程序集的 Web 应用程序引用这些文件了。
先决条件
若要在本演练中实现这些过程,您需要:
Microsoft Visual Studio 2005.
说明: 您不能使用 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 文件嵌入本地化资源。