本文中，我們將探討ASP.NET AJAX組件開發過程的一個相關環節：如何把一個JavaScript檔案作為一種嵌入式資源“隱藏”到一個程式集的內部，然後再從註冊該程式集的一個Web應用程式中來引用這些資源。
【注】本文樣本程式測試環境：Windows XP專業版＋Visual Studio 2005＋ASP.NET AJAX架構。
二、 把用戶端指令碼檔案嵌入程式集中
（一）建立一個空類庫
首先，啟動Visual Studio 2005，選擇“檔案→建立項目…”，選擇C#作為內建支援語言，然後選擇“類庫”模板建立一個類庫，命名為“MySampleControl”，最後點擊OK。
然後，右擊“方案總管”中的檔案夾“引用”並點擊“添加引用…”，在隨後出現的“添加引用”對話方塊中分別把對System.Web，System.Drawing和System.Web.Extensions等命名空間的引用添加到當前工程中。
（二）建立樣本JavaScript指令檔
接下來，我們在工程中添加一個名為UpdatePanelAnimation.js的簡單的JScript檔案。下面展示了這個JScript指令檔的完整代碼：
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);}}
上面的代碼定義了一個相當簡單的JavaScript類—BorderAnimation。這個類中僅提供了一個成員函數—animate，它能夠實現圍繞ASP.NET AJAX伺服器端UpdatePanel控制項顯示一個帶有指定顏色的邊框。
接下來，在UpdatePanelAnimation.js檔案相應的屬性視窗中設定其產生方式為“內嵌資源”，如１所示。
圖１.把指令檔的產生方式設定為嵌入資源方式。
（三）在類庫中建立一個控制項類
接下來，右擊工程，然後點擊“添加→類…”，在隨後出現的“添加新項”對話方塊中選擇“類”模板，最終在工程中添加一個名為MyCustomControl.cs的控制項類檔案。
【注】此時，我們可以把隨同前面類庫工程一起自動產生的檔案class1.cs刪除。
然後，開啟檔案MyCustomControl.cs作進一步修改。下列代碼相應於我們剛才建立的控制項類的完整代碼：
using System;using System.Drawing;using System.Web.UI;using System.Web;using System.Globalization;namespace MySampleControl{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控制項的邊界顏色的屬性。此外，上面的代碼還註冊了將要在Web頁面中使用的JavaScript代碼。其中，此代碼還建立了一個處理器以用於載入Sys.Application對象事件。這樣以來，當實現局部頁面進行更新操作時，前面指令檔UpdatePanelAnimation.js中包含的那個animate函數即被調用。
接下來，我們還必須把下列程式碼添加到程式集屬性檔案AssemblyInfo.cs檔案中。
[assembly: System.Web.UI.WebResource("MySampleControl.UpdatePanelAnimation.js", "application/x-javascript")]
注意，這裡的WebResource定義中必須包括命名空間以及該.js檔案的名字。
最後，用滑鼠右擊上面的類庫工程並選擇“產生”把這個類庫工程構建成一個.dll組件檔。
當編譯最終完成之時，你已經擁有了自己的一個名字為SampleControl.dll的程式集。UpdatePanelAnimation.js檔案中的JavaScript代碼將作為一個嵌入式資源“隱藏”到這個程式集的內部。２展示了使用Lutz Roeder編寫的.NET Reflector觀察到的程式集SampleControl.dll的資訊。
圖２.使用.NET Reflector剖析器集SampleControl.dll的結果。
三、 從Web頁面中引用嵌入的指令檔
現在，我們將建立一個簡單的Web應用程式，以便在Web頁面中引用剛才我們建立的嵌入式指令檔。
點擊菜單“檔案→添加→建立網站…”，然後選擇“ASP.NET AJAX-Enabled Web Site”模板，命名工程為“AjaxTestWebSite”，並選擇C#作為內建支援語言，最後點擊OK。
用滑鼠右擊此網站，在該網站的根目錄下建立一個Bin檔案夾。
然後，右擊此Bin檔案夾添加對前面類庫工程相應的bin\debug或bin\release目錄下的庫檔案SampleControl.dll的引用。
【注意】如果上面這兩個工程不在同一個方案下的話，你需要把把前面類庫工程相應的庫檔案SampleControl.dll複製到該網站的這個Bin檔案夾下。
之後，用如下代碼來替換掉Default.aspx檔案中的內容：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><%@ Register TagPrefix="Samples" Namespace="MySampleControl" Assembly="MySampleControl" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><title>Untitled Page</title></head><body><form id="form1" runat="server"><asp:ScriptManager ID="ScriptManager1" runat="server" ><Scripts><asp:ScriptReference Assembly="MySampleControl" Name="MySampleControl.UpdatePanelAnimation.js" /></Scripts></asp:ScriptManager><div><Samples:UpdatePanelAnimationWithClientResourceID="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>
注意，第一，因為我們實際在上面建立了一個簡單的繼承自Control的控制項；所以，在工具列中會出現這個控制項—你只要把這個控制項直接拖動到樣本頁面中即可。第二，在上面的程式碼片段中，我們包括了一個<asp:ScriptReference>子項目。此元素引用了你在前一節建立的那個程式集MySampleControl和UpdatePanelAnimation.js檔案。ASP.NET AJAX線上教程中有關於這個子項目的細節說明。
最後，按下F5鍵啟動該網站程式。每當你點擊日曆控制項中的某一個日期時，你會看到圍繞UpdatePanel控制項出現一個綠色的邊框。３相應於此程式運行時刻的一個快照。
圖３.樣本網站運行時刻的一個快照。
四、 小結
在本文中，我們實現了把一個JavaScript檔案作為一個資源嵌入到一個.NET程式集中。然後，通過一些簡單的ASP.NET AJAX網站的例子展示如何在Web應用程式中引用此程式集中嵌入的指令檔。注意，所有本文中涉及的基本操作是基於定製組件擴充ASP.NET AJAX架構的基本功。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
