3-4 引用儲存於 .js 檔案中的...

3-10

3-4 引用儲存於 .js 檔案中的 JavaScript

除了以指令碼區塊的形式直接將 JavaScript 內含於 ASP.NET 網頁中，您也

可以將 JavaScript 儲存於 .js 檔案中，然後於 ASP.NET 網頁中加以引用，以

便叫用其中的 JavaScript 函式。

將 JavaScript 個別儲存於 .js 檔案中的最大好處，就是能夠有系統地加以組

織和管理，並且能夠讓不同的網頁加以共用。與網頁和圖片會被快取的形式

類似， .js 檔案也會被瀏覽器加以快取。在瀏覽器載入了 .js 檔案之後，它會

一直被保留在快取中，以便讓其他請求它的網頁使用。不消說，此舉能夠有

效提昇 Web 應用程式的效率。

圖表 3-4

網頁範例使用 JavaScript 製作跑馬燈

圖表 3-4 是網頁範例 CH3_DemoForm004.aspx 的執行畫面，它示範如何使用

JavaScript 製作跑馬燈。相關設計技巧說明如下：

我們將所撰寫的 JavaScript 儲存於 Js 資料夾內的 TextScroller.js 中，茲

將程式碼列示如下：

var myMessage =

" 親愛的朋友大家好，章立民研究室在此向大家問好！我們下本書再見！ ";

var scrollspeed=500;

var scrollingRegion=50;

var startPosition=0;

function TextScroller()

3-11

{

var scrollMessage=myMessage;

var tempLocation=(scrollingRegion*3/scrollMessage.length)+1;

if (tempLocation<1)

{

tempLocation=1;

}

var counter;

for (counter=0;counter<=tempLocation;counter++)

{

scrollMessage+=scrollMessage;

document.form1.ShowTextScroller.value=

scrollMessage.substring(

startPosition,startPosition+scrollingRegion);

startPosition++;

}

if (startPosition>scrollingRegion)

{

startPosition=0;

}

setTimeout("TextScroller()",scrollspeed);

}

我們必須在 ASP.NET 網頁中使用以下的方式來引用 Js 資料夾內的

TextScroller.js：

<script type="text/javascript" src="Js/TextScroller.js"></script>

我們必須如下所示，設定當網頁的 onload 事件引發時就執行 JavaScript

函式 TextScroller() ：

<body onload="TextScroller()">

<form id="form1" runat="server">

<div>

JavaScript 跑馬燈<br />

<input type="text" name="ShowTextScroller" size="50" value="" />

</div>

</form>

</body>

3-12

從以上的宣告式標記也可以看出，我們是利用一個 input項目來顯示跑馬燈。

3-5使用ClientScriptManager類別動態建立 JavaScript

在大多數的情況下，我們都是採用前兩節所述的宣告方式來引用

JavaScript。然而如果您的 JavaScript 必須根據在執行階段才能取得之資訊來

建置的話，就有需要動態建立 JavaScript。舉例來說，JavaScript 所要存取之

伺服器控制項的識別碼（ID）必須等到執行階段才能確認，亦或是 JavaScript

必須根據執行階段由使用者所提供的值來建立。此外，如果您希望在下列狀

況去執行 JavaScript 的話，則動態建立 JavaScript 也非常適用：

當網頁載入完成後才執行 JavaScript。

當使用者提交網頁時才執行 JavaScript。

所謂的動態建立，指的是在伺服器端程式碼（Visual Basic 或 Visual C#）中

使用 ClientScriptManager 類別的特定方法來動態建立 JavaScript 並將其加

入所呈現的網頁中。使用步驟如下：

1. 首先，請使用字串累加的方式組合出您所要動態建立的 JavaScript，如

下所示者即是一列：

// 動態構建 JavaScript 。

StringBuilder cstext = new StringBuilder();

cstext.Append("function DisplayCharCount(){");

cstext.Append(" spanCounter.innerText = ");

cstext.Append(" '字元數目 ' +");

cstext.Append(" document.forms[0].TextBox1.value.length.toString();");

cstext.Append("}");

2. 接下來，您必須透過 Page 物件的 ClientScript 屬性來取得

ClientScriptManager 類別的執行個體：

ClientScriptManager cs = Page.ClientScript;

ClientScriptManager 物件用來管理、註冊並將 JavaScript 加至網頁中。

3-13

3. 根據您要何時以及如何將 JavaScript 加至網頁中，請呼叫

ClientScriptManager 物件的下列方法之一：

RegisterClientScriptBlock

RegisterClientScriptBlock 方法能夠將 JavaScript 加至網頁的開頭

處。但是請注意，動態加入的 JavaScript 很可能會在所有的項目被

載入之前轉譯，此意味著，無法保證您可以在 JavaScript 中存取網

頁的所有項目。此外，各段 JavaScript 也不保證會依它們被註冊的

順序來輸出，如果各段 JavaScript 的順序很重要，請使用

StringBuilder 物件將它們全部組合成單一字串然後一起註冊。

RegisterClientScriptInclude

RegisterClientScriptInclude 方法非常類似於 RegisterClient

ScriptBlock 方法，只不過它所動態加入的 JavaScript 會去引用一

個 .js 檔案，所引用的 .js 檔案會在其他所有動態加入的 JavaScript

之前被加入，此意味著，無法保證您可以在 JavaScript 中存取網頁

的所有項目。

RegisterStartupScript

RegisterStartupScript 方法會在網頁完成載入但是在網頁的

onload 事件被引發之前將 JavaScript 加入至網頁中。以此種方式加

入的 JavaScript 通常不會做為一個事件處理常式或函式，它通常是

您只需要執行一次的陳述式。

各段 JavaScript 不保證會依它們被註冊的順序來輸出，如果各段

JavaScript 的順序很重要，請使用 StringBuilder 物件將它們全部組

合成單一字串然後一起註冊。

RegisterOnSubmitStatement

RegisterOnSubmitStatement 方法所動態加入的 JavaScript 會在網

頁被提交（Submit）之前執行，因此您可以在此段 JavaScript 中去

取消提交操作。

4. 當我們使用 ClientScriptManager 物件的上述方法來動態建立

JavaScript 並加入至網頁時，會提供一個型別來讓所要加入的 JavaScript

3-14

與之相關聯，此外，也會賦予該段 JavaScript 一個鍵值。提供型別可以

避免網頁與控制項（自訂控制項或使用者控制項）都將 JavaScript 加至

相同網頁時所造成的衝突狀況。至於鍵值的目的，則是為了避免重覆。

當您呼叫特定方法來加入 JavaScript 時，如果已經存在擁有相同型別與

鍵值的 JavaScript，則該段 JavaScript 將不會再被加入。

您所提供的型別與鍵值可以避免不必要的重覆。因此一般來說，您不需

要額外確認某一段 JavaScript 是否已經存在。不過您仍然可以使用

ClientScriptManager 物件的下列方法來判斷某一段 JavaScript 是否已

經存在：

IsClientScriptBlockRegistered

IsClientScriptIncludeRegistered

IsOnSubmitStatementRegistered

IsStartupScriptRegistered

圖表 3-5

顯示此一用戶端對話方塊的 JavaScript 是利用 ClientScriptManager物件的 RegisterStartupScript方法所動態加入的。

3-15

網頁範例 1 示範使用 ClientScriptManager 物件動態加入 JavaScript

網頁範例 CH3_DemoForm005.aspx 示範如何使用 ClientScriptManager 物

件的各個方法來動態加入 JavaScript。以下是其功能特性說明：

當網頁第一次開啟時，會如圖表 3-5 所示，顯示一個用戶端對話方塊來

顯示問候語。顯示此一對話方塊的 JavaScript 是利用

ClientScriptManager 物件的 RegisterStartupScript 方法所動態加入

的。

如果您希望在文字方塊中輸入資料的時候，會立即利用 JavaScript 計算

並顯示出所輸入的字元數目，請勾選核取方塊 □ 是否顯示 TextBox中

的字元數目，並按下「確定」按鈕；反之，請取消勾選核取方塊 □ 是

否顯示 TextBox中的字元數目，並按下「確定」按鈕。

圖表 3-6

值得注意的是，當您按下「確定」按鈕時，會如圖表 3-6 所示，顯示一

個用戶端對話方塊來詢問您是否真的要送出（提交）網頁。如果您按下

顯示此一提交確認對話方塊的 JavaScript 是利用 ClientScriptManager物件的 RegisterOnSubmitStatement方法所動態加入的。

3-16

「確定」按鈕，網頁就會被提交，相關的伺服器端程式碼將會被執行；如

果您按下「取消」按鈕，網頁將不會被提交，相關的伺服器端程式碼也就

不會被執行。值得注意的是，顯示此一提交確認對話方塊的 JavaScript 是

利用 ClientScriptManager 物件的 RegisterOnSubmitStatement 方法所動

態加入的。

在勾選核取方塊 □ 是否顯示 TextBox中的字元數目，而且也按下「確

定」按鈕順利提交網頁之後，您於文字方塊中輸入資料時，會立即利用

JavaScript 計算並顯示出您所輸入的字元數目（如圖表 3-7 所示）。值

得注意的是，此段 JavaScript 是利用 ClientScriptManager 物件的

RegisterClientScriptBlock 方法所動態加入的。

圖表 3-7

用來動態構建 JavaScript並將其加入網頁中的伺服器端程式碼撰寫於網頁的

Load 事件處理常式中。我們已替程式碼加入完整的註解，茲列示如下，請

自行參考之：

您於輸入文字時，會利用 JavaScript立即顯示出所輸入的字元數目，此段 JavaScript是利用 ClientScriptManager物件的 RegisterClientScriptBlock方法所動態加入的。

3-17

protected void Page_Load(object sender, EventArgs e)

{

// 定義要動態加入至網頁中之 JavaScript 的型別。

Type cstype = this.GetType();

// 定義要動態加入至網頁中之 JavaScript 的鍵值。

String cskey1 = "PopupScript";

String cskey2 = "ConfirmSubmit";

String cskey3 = "CounterScript";

// 取得 ClientScriptManager 類別的執行個體。

ClientScriptManager cs = Page.ClientScript;

// 由於我們只希望問候語的對話方塊只有在網頁第一次載入時顯示，

// 因此必須擺在 !IsPostBack 的條件式中。

if (!IsPostBack)

{

// 判斷特定型別與鍵值的 JavaScript 是否已經被註冊過。

if (!cs.IsStartupScriptRegistered(cstype, cskey1))

{

String scriptText1 = "alert('嗨！章立民研究室向大家問好');";

cs.RegisterStartupScript(

cstype, cskey1, scriptText1, true);

}

}

// 判斷 OnSubmit 陳述式是否已經註冊。

if (!cs.IsOnSubmitStatementRegistered(cstype, cskey2))

{

String scriptText2 =

"return confirm('您確定要送出（提交）此網頁嗎？')";

ClientScript.RegisterOnSubmitStatement(

cstype, cskey2, scriptText2);

}

// 判斷何取方塊是否被勾選

if (checkDisplayCount.Checked)

{

// 判斷特定型別與鍵值的 JavaScript 是否已經被註冊過。

if (!cs.IsClientScriptBlockRegistered(cstype, cskey3))

{

// 動態構建 JavaScript 。

3-18

StringBuilder scriptText3 = new StringBuilder();

scriptText3.Append("function DisplayCharCount(){");

scriptText3.Append(" spanCounter.innerText = ");

scriptText3.Append(" '字元數目 ' +");

scriptText3.Append(

" document.forms[0].TextBox1.value.length.toString();");

scriptText3.Append("}");

// 呼叫 RegisterClientScriptBlock 方法來動態加入 JavaScript 。

cs.RegisterClientScriptBlock(

cstype, cskey3, scriptText3.ToString(), true);

}

// 設定當引發 TextBox1 的用戶端事件 onkeyup 時

// 就執行 JavaScript 函式 DisplayCharCount()。

TextBox1.Attributes.Add("onkeyup", "DisplayCharCount()");

// 於 PlaceHolder 控制項中加入一個 span 項目，

// 以便利用它來顯示文字方塊中的字元數目。

LiteralControl spanLiteral = new

LiteralControl("<span id=\"spanCounter\"></span>");

PlaceHolder1.Controls.Add(spanLiteral);

}

else

{

TextBox1.Attributes.Remove("onkeyup");

}

}

3-6 如何使用 ScriptManager 物件來引用 JavaScript －非常重要

我們在 3-1 節就已經提過，為了讓您更容易使用 JavaScript 替網頁開發出強

大的用戶端功能，ASP.NET 3.5 的 AJAX 架構（或者是說 Microsoft AJAX

Library）對 JavaScript 做了具體且完整的擴充，使得您所撰寫的 JavaScript

能夠擁有 OOP 等各項功能特性。但是請特別注意，欲使 JavaScript擁有這

3-19

些擴充功能，您務必在網頁上加入一個 ScriptManager 控制項，並且透過

ScriptManager控制項來引用所需的 JavaScript檔案。

如果您是以指令碼區塊的方式直接將 JavaScript 內含於 ASP.NET 網頁中，

或是在網頁的 <script>….</script> 標記中使用 src 屬性來引用 JavaScript

檔案（.js），亦或是使用 ClientScriptManager 物件來動態加入 JavaScript，

則其 JavaScript 不僅無法使用 ASP.NET AJAX 替 JavaScript 所建立的物件導

向功能，也無法被某些 Microsoft AJAX Library 元件存取。為了讓 ASP.NET

AJAX 網頁在進行網頁局部更新時能夠存取 JavaScript 檔案，您應該使用網

頁上的 ScriptManager 控制項來引用所需的 JavaScript 檔案。

接下來，我們要詳細探討如何透過 ScriptManager 控制項來引用 JavaScript

檔案。

3-6.1 以宣告方式引用獨立存在的 .js 檔案

ScriptManager 控制項可以採用宣告方式來引用所需的 JavaScript 檔案

（.js），寫法如下：

<asp:ScriptManager ID="SMgr" runat="server">

<Scripts>

<asp:ScriptReference path="~/Js/MyJavaScript1.js" />

<asp:ScriptReference path="~/Js/MyJavaScript2.js" />

</Scripts>

</asp:ScriptManager>

以上面的寫法而言，表示引用根目錄之 Js 目錄中的 MyJavaScript1.js 與

MyJavaScript2.js。

請大家注意，為了讓 ScriptManager 控制項能夠正確處理 JavaScript 檔案，

以此方式引用的 JavaScript 檔案務必在結尾處呼叫

Sys.Application.notifyScriptLoaded 方法，以便通知程式已經完成載入

JavaScript 檔案的動作：

if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

3-20

圖表 3-8 圖片逐漸變大

請注意

文字背

景色的

變化

3-21

網頁範例示範引用獨立存在的 Animation.js 與 Timer.js 來播放動畫

圖表 3-8 是網頁範例 CH3_DemoForm006.aspx 的執行畫面，按下「播放動

畫」按鈕之後，畫面上的文字以及圖片將會改變其文字內容、背景顏色與

大小，展現動畫效果。

瞭解了網頁範例 CH3_DemoForm006.aspx 的特色之後，我們來研究其設計

技巧：

請如下所示，在網頁的 <head>…</head> 之間加入下面這一段

JavaScript 程式碼：

<script language="javascript" type="text/javascript">

<!--

var HighlightAnimations = {};

function Button1_onclick()

{

var el1 = $get('<%=Label1.ClientID%>');

el1.innerText = "章立民研究室 - 台北麵攤營養補給站";

var el2 = $get('<%=Image1.ClientID%>');

var el3 = $get('<%=Label2.ClientID%>');

el3.innerText = "章立民研究室 - 北京博客園";

if (HighlightAnimations[el1.uniqueID] == null)

{

HighlightAnimations[el1.uniqueID] =

AjaxControlToolkit.Animation.createAnimation(

{

AnimationName : "color",

duration : 3.5,

fps: 50,

property : "style",

propertyKey : "backgroundColor",

startValue : "#FFFF90",

endValue : "#993366"

}, el1);

}

3-22

{



{

AnimationName : "resize",

duration : 3.5,

fps: 50,

width : 131,

height : 187,

unit : "px"

}, el2);

}


{



{

AnimationName : "StyleAction",

attribute : "fontSize",

value:"200%"

}, el3);

}

HighlightAnimations[el1.uniqueID].stop();

HighlightAnimations[el1.uniqueID].play();





return false;

}

// -->

</script>

上面這一段 JavaScript 程式碼的主要是替「播放動畫」按鈕的 Click 事

件撰寫 JavaScript 事件處理常式 Button1_onclick（請注意，「播放動畫」

按鈕是一個 input 按鈕），該常式會呼叫 AjaxControlToolkit.Animation

3-23

類別的 createAnimation 方法，以便建立三個不同的 Animation 物件，

並且呼叫物件的 stop 以及 play 方法來產生動畫效果。

我們常常在 JavaScript透過 ClientID屬性來存取 ASP.NET伺服器控制項，詳細的使用說明，請參閱 3-8節「如何於 JavaScript中存取ASP.NET伺服器控制項」。

本網頁範例完全使用 AJAX Control Toolkit 內建的 Animations.js 與

Timer.js 所定義的 JavaScript 類別來產生動畫效果，不需要再額外撰寫

程式碼。請務必如下所示，使用 ScriptManager 控制項來引用 JavaScript

檔案：

<asp:ScriptManager ID="Scriptmanager1" runat="server"

EnablePartialRendering="true">

<Scripts>

<asp:ScriptReference Path="~/JS/Animations.js" /> <asp:ScriptReference Path="~/JS/Timer.js" /> </Scripts>


3-6.2 以宣告方式引用內嵌於組件中的 .js 檔案

如果 JavaScript 檔案並不是獨立的 .js 檔案，而是內嵌於組件（Assembly） .dll

中，則使用 ScriptManager 控制項來引用時不需要指定 path 屬性，但是必

須使用 Name 屬性來指定 JavaScript 檔案的名稱，以及使用 Assembly 屬性

來指定組件的名稱（不包含副檔名）。此種方法最大的好處就是能夠保護

JavaScript 檔案的內容，避免 JavaScript 類別的定義被修改。如下所示者即

是一例：

<asp:ScriptManager ID="SMgr" runat="server">

<Scripts>

<asp:ScriptReference

Name="MyJavaScript.js" Assembly="MyJavaScriptAssembly"/>

</Scripts>


3-24

以上面的寫法而言，表示引用內嵌於組件檔 MyJavaScriptAssembly.dll 中的

JavaScript 檔案 MyJavaScript.js。請大家注意，如果您的 JavaScript 檔案是

內嵌於組件中，則不需要在結尾處呼叫 Sys.Application.notifyScriptLoaded

方法。

大家必須瞭解，ScriptReference 之 NotifyScriptLoaded 屬性的預設值是

true，此表示當引用內嵌於組件檔 .dll 中的 JavaScript 檔案時，會自動在

JavaScript 結尾處呼叫 Sys.Application 類別的 notifyScriptLoaded 方法。由

於從一個 JavaScript 檔案中呼叫 notifyScriptLoaded 方法一次以上將會擲回

一個錯誤，因此我們才會說，當引用內嵌於組件檔 .dll 中的 JavaScript 檔案

時，不需要在 JavaScript 檔案的結尾處呼叫 Sys.Application 類別的

notifyScriptLoaded 方法。然而一般來說，大家一開始都是將 JavaScript 撰

寫於獨立的 .js 檔案中，也不確定將來是否會將其內嵌於組件檔中，因此通

常會統一採用一致性的寫法，也就是會在 .js 檔案的結尾處呼叫

Sys.Application.notifyScriptLoaded 方法。現在請注意聽了，如果內嵌於組

件檔 .dll 中的 .js 檔案已在結尾處呼叫 Sys.Application.notifyScriptLoaded

方法，為了避免發生錯誤，只需將 ScriptReference 的 NotifyScriptLoaded

屬性設定成 false 即可。

網頁範例示範引用 AjaxControlToolkit.dll 組件中的 Animation.js 與

Timer.js 來播放動畫

本網頁範例 CH3_DemoForm007.aspx 與前一個網頁範例

CH3_DemoForm006.aspx 在功能上完全相同，最主要的差別在於網頁範例

CH3_DemoForm007.aspx 所使用的 Animations.js 與 Timer.js 並不是個別獨

立存在的 JavaScript 檔案，而是內嵌於組件 AjaxControlToolkit.dll 中。在

此僅列出 CH3_DemoForm007.aspx 引用 JavaScript 檔案的方式，其中的

Assembly 屬性用於指定組件的檔案名稱（不含副檔名）：

<asp:ScriptManager ID="Scriptmanager1" runat="server"

EnablePartialRendering="true">

<Scripts>

<asp:ScriptReference Assembly="AjaxControlToolkit"

Name="AjaxControlToolkit.Animation.Animations.js" />

<asp:ScriptReference Assembly="AjaxControlToolkit"

3-25

Name="AjaxControlToolkit.Compat.Timer.Timer.js" />

</Scripts>


大家從以上的網頁範例可以看出，ASP.NET 3.5 AJAX 引用 JavaScript 檔案

的方式非常具有彈性，能夠針對不同的需求適時加入對 JavaScript 的參考，

這也是 ASP.NET 3.5 AJAX 相當具有代表性的特色之一。

3-6.3 以程式控制方式動態引用 JavaScript

ScriptManager 控制項也允許您使用程式控制方式來動態引用 JavaScript 檔

案，作法歸納如下：

第一種作法是動態建立 ScriptReference 物件。

第二種作法是利用程式碼動態構建內含 JavaScript 的字串，並將其當作

參數傳遞給 ScriptManager 控制項的 RegisterClientScriptBlock 方法。

第三種作法是呼叫 ScriptManager 控制項的 RegisterClientScriptInclude

方法，來加入與 Microsoft AJAX Library 無關聯，獨立的 JavaScript 檔

案。

第四種作法是呼叫ScriptManager控制項的RegisterClientScriptResource

方法，來引用內嵌於組件中的 JavaScript 檔案。

請大家注意，使用第二至第四種作法來動態引用的 JavaScript 不支援當地語

系化功能。

網頁範例 1 示範使用 ScriptManager 控制項動態引用獨立存在的

JavaScript 檔案

圖表 3-9 與 3-10 是網頁範例 CH3_DemoForm008.aspx 的操作畫面，很顯然

這是一個非同步的可收合式清單。當您展開與摺入某一個項目，都是透過

JavaScript 來完成相關的處理，由於所有的作業都是在用戶端完成，因此網

頁不需要回傳，也不會有重新整理的問題。更重要的是，我們所使用的

JavaScript 是透過 ScriptManager 控制項來動態引用的。

3-26

圖表 3-9

非同步的可收合式

清單

整個可收合式清單是

一個 ListView控制項

3-27

圖表 3-10

非同步的可收合

式清單

整個可收合式清單是

一個 ListView控制項

3-4 引用儲存於 .js 檔案中的...

Documents