show toc
歡迎來(lái)到 MSDN >
Web/服務(wù)將 JavaScript 與 ASP.NET 2.0 配合使用
發(fā)布日期： 2006-6-13 | 更新日期： 2006-6-13
適用于：
ASP.NET 2.0
Visual Web Developer 2005 Express Edition
摘要：學(xué)習如何將 JavaScript 與 ASP.NET 2.0 應用程序配合使用。
本頁(yè)內容
簡(jiǎn)介將 JavaScript 添加到服務(wù)器控件執行簡(jiǎn)單的按鈕翻轉設置控件焦點(diǎn)使用較大的 JavaScript 函數Page.ClientScript.RegisterStartupScript() 方法Page.ClientScript.RegisterClientScriptBlock() 方法將 JavaScript 放到單獨的文件 (.js) 中結論簡(jiǎn)介
Web 開(kāi)發(fā)人員一直在通過(guò)將服務(wù)器端處理和客戶(hù)端處理結合使用來(lái)解決瀏覽器的限制?？蛻?hù)端的工作邏輯和應用程序進(jìn)程可使基于瀏覽器的應用程序看起來(lái)響應更及時(shí)且更“快速”。過(guò)去，對于客戶(hù)端開(kāi)發(fā)來(lái)說(shuō)，大多數開(kāi)發(fā)人員使用 JavaScript，并將此編程語(yǔ)言混合到了他們知名的 Microsoft Active Server 頁(yè)面與服務(wù)器端 Microsoft Visual Basic Scripting Edition 或 Microsoft JScript 代碼中?，F在，有了 Microsoft ASP.NET 及其提供的新模型，Web 開(kāi)發(fā)人員往往想知道如何在他們的 ASP.NET 頁(yè)面中正確使用 JavaScript 函數。
在先前的一篇 MSDN 文章中，我曾經(jīng)介紹過(guò)如何在 ASP.NET 1.x 應用程序中有效地使用 JavaScript。不過(guò)，在 ASP.NET 2.0 簡(jiǎn)介中，您會(huì )發(fā)現完成此項任務(wù)的方法已發(fā)生了改變。因此，重新回顧一下如何更好地創(chuàng )建使用 JavaScript 的 ASP.NET 應用程序是很重要的。本文將介紹一些現在可用的以前 JavaScript 函數的使用方法。完成該任務(wù)有多種方法，本文將介紹各種可能的方法。本文還將通過(guò)一些簡(jiǎn)短的示例介紹一些在 ASP.NET 頁(yè)面中對 JavaScript 的一些較為常見(jiàn)的使用方法。
返回頁(yè)首將 JavaScript 添加到服務(wù)器控件
將 JavaScript 添加到位于 ASP.NET 頁(yè)面中的某個(gè)特定服務(wù)器控件是非常簡(jiǎn)單的。我們以按鈕服務(wù)器控件為例。如果您使用任一 Microsoft Visual Studio 2005 將 Button HTML 服務(wù)器控件（HtmlInputButton 類(lèi)）拖放到某個(gè)頁(yè)面中，并將其作為服務(wù)器控件運行，則應具有以下代碼結構：
<input id="Button1" type="button" value="button" runat="server" />
這是一個(gè)普通按鈕，可通過(guò) ASP.NET 頁(yè)面的代碼分離或服務(wù)器端腳本以編程方式對其進(jìn)行控制。例如，要在生成頁(yè)面時(shí)指定按鈕文本，只需在該元素變成 HTML 服務(wù)器控件（右鍵單擊該控件，然后選擇 Run As Server Control（作為服務(wù)器控件運行））后使用該按鈕的 value 屬性即可。
Visual Basic
Protected Sub Page_Load(ByVal sender As Object, _ ByVal e As System.EventArgs) Button1.Value = DateTime.Now.ToString() End Sub
C#
protected void Page_Load(object sender, EventArgs e) { Button1.Value = DateTime.Now.ToString(); }
這段代碼只是在頁(yè)面上提供了一個(gè)按鈕，該按鈕的文本為日期和時(shí)間。
圖 1. 在按鈕上顯示日期和時(shí)間
需要特別注意的是，此處的 ASP.NET 頁(yè)面是從生成該頁(yè)面的服務(wù)器來(lái)獲取時(shí)間的。因此，如果 Web 服務(wù)器位于美國中央時(shí)區 (CST -6 GMT) 的某個(gè)位置，則無(wú)論請求此頁(yè)面的人位于何處，他們都將獲得相同的時(shí)間。
如果想要此按鈕顯示查看該頁(yè)面的人所在時(shí)區的時(shí)間，又該如何呢？完成此項任務(wù)的最簡(jiǎn)單方法就是在客戶(hù)端使用 JavaScript。
就此列舉一例，我們要將終端用戶(hù)（Web 頁(yè)面的查看者）的計算機時(shí)間置于一個(gè)按鈕 Web 服務(wù)器控件上。以下代碼顯示了如何完成該任務(wù)：
Visual Basic
<%@ Page Language="VB" %> <script runat="server"> Protected Sub Button1_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) Response.Write("回發(fā)！") End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>使用 JavaScript</title> </head> <body onload="javascript:document.forms[0][‘Button1‘].value=Date();"> <form id="form1" runat="server"> <div> <asp:Button ID="Button1" runat="server" Text="按鈕" OnClick="Button1_Click" Font-Bold="True" Font-Names="Verdana" Font-Size="Larger" /> </div> </form> </body> </html>
C#
<%@ Page Language="C#" %> <script runat="server"> protected void Button1_Click(object sender, EventArgs e) { Response.Write("回發(fā)！"); } </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>使用 JavaScript</title> </head> <body onload="javascript:document.forms[0][‘Button1‘].value=Date();"> <form id="form1" runat="server"> <div> <asp:Button ID="Button1" runat="server" Text="按鈕" OnClick="Button1_Click" Font-Bold="True" Font-Names="Verdana" Font-Size="Larger" /> </div> </form> </body> </html>
在此小段代碼中，要注意按鈕的一些屬性在被發(fā)送到客戶(hù)端瀏覽器之前是如何指定給服務(wù)器端的。本例中，按鈕上文本的字體被更改為具有特定大小的粗體 Verdana?？蛻?hù)端接收到按鈕的 HTML 代碼后，客戶(hù)端 JavaScript 即會(huì )將該按鈕的文本更改為終端用戶(hù)計算機上的當前時(shí)間。針對整個(gè)頁(yè)面生成的 HTML 代碼如下：
<html xmlns="http://www.w3.org/1999/xhtml" > <head><title> 使用 JavaScript </title></head> <body onload="javascript:document.forms[0][‘Button1‘].value=Date();"> <form name="form1" method="post" action="Default.aspx" id="form1"> <div> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY3NzE5MjIyMGRkVUxVdzEWBhD7U89t7JKIkQc6Cko=" /> </div> <div> <input type="submit" name="Button1" value="" id="Button1" style="font-family:Verdana;font-size:Larger;font-weight:bold;" /> </div> <div> <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgK394SHCAKM54rGBtsX8d2S8MO7sf02DOAiquFyBkeY" /> </div></form> </body> </html>
單擊該按鈕仍會(huì )出現一個(gè)回發(fā)（通過(guò) Response.Write 命令查看），當重新呈現此頁(yè)面時(shí)，按鈕控件上會(huì )顯示新時(shí)間。結果如圖 2 所示。
圖 2. 單擊日期按鈕
在本例中，我們通過(guò) onload 屬性將一些 JavaScript 直接置于頁(yè)面的 <body> 元素中。對于 onload 屬性的值，我們特意指向了第一個(gè) <form> 節（因為在 HTML 中可能會(huì )有多個(gè) form）中名為 Button1 的 HTML 元素。
雖然使用此方法來(lái)添加一些 JavaScript 以便與 ASP.NET Web 服務(wù)器控件配合使用很簡(jiǎn)單，但是我們也可以很容易地將一個(gè) JavaScript 命令添加到按鈕本身，如以下部分代碼示例所示：
Visual Basic
<%@ Page Language="VB" %> <script runat="server"> Protected Sub Page_Load(ByVal sender As Object, _ ByVal e As System.EventArgs) Button1.Attributes.Add("onclick", _ "javascript:alert(‘多加注意?。?！‘)") End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>使用 JavaScript</title> </head> <body> <form id="form1" runat="server"> <div> <asp:Button id="Button1" runat="server" Font-Bold="True" Font-Names="Verdana" Font-Size="Larger" Text="單擊我！"></asp:Button> </div> </form> </body> </html>
C#
<%@ Page Language="C#" %> <script runat="server"> protected void Page_Load(object sender, EventArgs e) { Button1.Attributes.Add("onclick", "javascript:alert(‘多加注意?。?！‘)"); } </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>使用 JavaScript</title> </head> <body> <form id="form1" runat="server"> <div> <asp:Button id="Button1" runat="server" Font-Bold="True" Font-Names="Verdana" Font-Size="Larger" Text="單擊我！"></asp:Button> </div> </form> </body> </html>
使用服務(wù)器控件的 attribute 屬性將附加的 JavaScript 添加到控件特定的控件是一種很好的方式。本例中，通過(guò)將 Attribute.Add 屬性與腳本關(guān)鍵字和腳本本身（兩者均表示為字符串值）配合使用添加了 JavaScript。
返回頁(yè)首執行簡(jiǎn)單的按鈕翻轉
一談到 Web 頁(yè)面上的按鈕，Web 開(kāi)發(fā)人員想要為按鈕賦予的較為常見(jiàn)的功能就是翻轉效果。翻轉效果就是當終端用戶(hù)將其鼠標置于 Web 頁(yè)面的某個(gè)按鈕上時(shí)（并不單擊該按鈕），該按鈕的顏色和形狀將發(fā)生改變。對于具有多個(gè)按鈕的 Web 頁(yè)面而言，該功能尤為有用，從使用角度而言這是很有用的，會(huì )在終端用戶(hù)單擊按鈕之前通知其要對該按鈕執行單擊操作了。
在服務(wù)器控件出現之前，該操作很容易實(shí)現，現在，盡管有了服務(wù)器控件，也不是那么困難。執行類(lèi)似操作的代碼如下：
Visual Basic
<%@ Page Language="VB" %> <script runat="server"> Protected Sub ImageButton1_Click(ByVal sender As Object, _ ByVal e As System.Web.UI.ImageClickEventArgs) Label1.Text = "回發(fā)！" End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>使用 JavaScript</title> </head> <body> <form id="form1" runat="server"> <div> <p> <asp:ImageButton id="ImageButton1" onmouseover="this.src=‘button2.gif‘" onclick="ImageButton1_Click" onmouseout="this.src=‘button1.gif‘" runat="server" ImageUrl="button1.gif"></asp:ImageButton> </p> <p> <asp:Label id="Label1" runat="server" /> </p> </div> </form> </body> </html>
C#
<%@ Page Language="C#" %> <script runat="server"> protected void ImageButton1_Click(object sender, ImageClickEventArgs e) { Label1.Text = "回發(fā)！"; } </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>使用 JavaScript</title> </head> <body> <form id="form1" runat="server"> <div> <p> <asp:ImageButton id="ImageButton1" onmouseover="this.src=‘button2.gif‘" onclick="ImageButton1_Click" onmouseout="this.src=‘button1.gif‘" runat="server" ImageUrl="button1.gif"></asp:ImageButton> </p> <p> <asp:Label id="Label1" runat="server" /> </p> </div> </form> </body> </html>
這次我們不通過(guò) <body> 元素將 JavaScript 指定給服務(wù)器控件，而是使用控件的 onmouseover 和 onmouseout 事件。對于每個(gè)事件，我們均指定一個(gè) JavaScript 值。onmouseover 事件表示終端用戶(hù)將其鼠標置于控件上方的操作，而 onmouseout 表示終端用戶(hù)將其鼠標從控件上方移開(kāi)的操作。在本例中，我們希望當鼠標置于按鈕上方時(shí)會(huì )顯示一張圖像，而在當加載頁(yè)面后與當將鼠標從按鈕移開(kāi)后會(huì )顯示原始圖像。
如果您正在直接使用該類(lèi)控件，而不是像我們在 <body> 元素中使用 JavaScript 時(shí)那樣在 form 中指定控件，您可以使用 this 關(guān)鍵字，其后緊跟您試圖更改的屬性。
返回頁(yè)首設置控件焦點(diǎn)
ASP.NET 2.0 現在包括了為其中的一個(gè) HTML 表單元素設置（光標的）焦點(diǎn)的功能。在 ASP.NET 2.0 之前，您必須親自使用 JavaScript 來(lái)完成同樣的任務(wù)。例如，如果您的 ASP.NET 1.x 頁(yè)面中有多個(gè)文本框，則可通過(guò)在頁(yè)面的 <body> 標記中使用以下代碼來(lái)使頁(yè)面在加載后將焦點(diǎn)設置為第一個(gè) TextBox 控件。
<body onload="document.forms[0][‘TextBox1‘].focus();">
通過(guò)使用該構造代碼，當頁(yè)面被加載后，包含 ID TextBox1 的元素將獲得焦點(diǎn)，從而使終端用戶(hù)能夠開(kāi)始直接輸入文本，而無(wú)需通過(guò)鼠標來(lái)定位焦點(diǎn)。
ASP.NET 2.0 通過(guò)添加 Focus() 方法使得該任務(wù)變得非常簡(jiǎn)單?，F在，您可以通過(guò)下面的代碼來(lái)完成對 TextBox 控件的焦點(diǎn)設置：
Visual Basic
Protected Sub Page_Load(ByVal sender As Object, _ ByVal e As System.EventArgs) TextBox1.Focus() End Sub
C#
protected void Page_Load(object sender, EventArgs e) { TextBox1.Focus(); }
瀏覽器加載使用此方法的頁(yè)面后，光標即已經(jīng)被置于了文本框的內部，等待您開(kāi)始鍵入文本。因此，您不必將鼠標移到相應的位置即可開(kāi)始在表單中輸入信息。Focus() 方法使您可以動(dòng)態(tài)地將終端用戶(hù)的光標置于指定的表單元素中（不僅僅是 TextBox 控件，而可以是從 WebControl 類(lèi)派生而來(lái)的任何服務(wù)器控件）。
返回頁(yè)首使用較大的 JavaScript 函數
既然我們可以在 HTML 元素內部嵌入部分 JavaScript，甚至可以以動(dòng)態(tài)方式使用 JavaScript 和 Web 服務(wù)器控件，那么如何將全部 JavaScript 函數置于您的代碼中呢？
可通過(guò)多種方法來(lái)完成此任務(wù)，我們將介紹幾種可在 ASP.NET 代碼中使用的較為常見(jiàn)的方法。在本文中，我們將介紹如何使用新的 Page.ClientScript 屬性。在 ASP.NET 2.0 之前，您需要使用 RegisterStartupScript 和 RegisterClientScriptBlock 方法?，F在，這兩個(gè)方法已被淘汰。在 ASP.NET 1.x 中注冊腳本的兩種可能方法均需要使用一組關(guān)鍵字/腳本參數。由于涉及到了兩個(gè)獨立的方法，因此極有可能會(huì )出現一些關(guān)鍵字名稱(chēng)沖突。Page.ClientScript 屬性本身就可以完成所有的腳本注冊，從而使您的代碼少出錯。
返回頁(yè)首Page.ClientScript.RegisterStartupScript() 方法
最初可用的選項之一就是使用一個(gè)可實(shí)現此功能的 .NET 類(lèi)來(lái)注冊腳本塊。第一個(gè)是 RegisterStartupScript 方法。當您有一個(gè)想要在頁(yè)面加載時(shí)啟動(dòng)的 JavaScript 函數時(shí)，最好使用該類(lèi)。就此列舉一例，在 Visual Studio 2005 中創(chuàng )建一個(gè)包含兩個(gè)按鈕的 ASP.NET 頁(yè)面。Button1 和 Button2 分別為這兩個(gè)按鈕的 ID。然后，在 Page_Load 事件內部嵌入以下代碼。
Visual Basic
Page.ClientScript.RegisterStartupScript(Me.GetType(), "MyScript", _ "function AlertHello() { alert(‘你好，ASP.NET‘); }", True) Button1.Attributes("onclick") = "AlertHello()" Button2.Attributes("onclick") = "AlertHello()"
C#
Page.ClientScript.RegisterStartupScript(this.GetType(), "MyScript", "function AlertHello() { alert(‘你好，ASP.NET‘); }", true); Button1.Attributes["onclick"] = "AlertHello()"; Button2.Attributes["onclick"] = "AlertHello()";
RegisterStartupScript 方法的兩個(gè)可能結構如下：
•
RegisterStartupScript (type, key, script)
•
RegisterStartupScript (type, key, script, script tag specification)
在上例中，您指定了類(lèi)型 Me.GetType()、關(guān)鍵字及包含的腳本，然后是一個(gè)值為 True 的布爾值（以便 .NET 自動(dòng)使用 <script> 標記將腳本嵌入 ASP.NET 頁(yè)面中）。
在 Page_Load 事件中使用該代碼會(huì )在瀏覽器中生成以下 HTML 代碼（為簡(jiǎn)明起見(jiàn)，已刪除了一些 HTML 代碼）：
<html xmlns="http://www.w3.org/1999/xhtml" > <head><title> 使用 JavaScript </title></head> <body> <form name="form1" method="post" action="Default.aspx" id="form1"> <div> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJMTM4ODA1MjE5D2QWAgIED2QWBAIBDw9kFgIeB29uY2xpY2s FDEFsZXJ0SGVsbG8oKWQCAw8PZBYCHwAFDEFsZXJ0SGVsbG8oKWRk+DQIaJpw5 A7pyhzP8dxf/JGUSbA=" /> </div> <div> <input type="submit" name="Button1" value="Button" onclick="AlertHello();" id="Button1" /> <input type="submit" name="Button2" value="Button" onclick="AlertHello();" id="Button2" /> </div> <div> <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwK4yNWFBwKM54rGBgK7q7GGCHwBEr6DyGutQ/egvNrB3OYhCwM4" /> </div> <script type="text/javascript"> <!-- function AlertHello() { alert(‘你好，ASP.NET‘); }// --> </script> </form> </body> </html>
使用該 ASP.NET 頁(yè)面時(shí)，請注意，在頁(yè)面的底部、表單 (</form>) 的最后，嵌入了一個(gè) JavaScript 函數。
應為頁(yè)面上的所有 JavaScript 指定唯一的關(guān)鍵字，這一點(diǎn)十分重要（這可通過(guò)該方法中要求的 key 參數來(lái)實(shí)現）。如果多個(gè) JavaScript 具有相同的關(guān)鍵字名稱(chēng)，則只會(huì )在頁(yè)面中嵌入第一個(gè) JavaScript。
返回頁(yè)首Page.ClientScript.RegisterClientScriptBlock() 方法
現在，我們通過(guò)使用 Page.ClientScript.RegisterClientScriptBlock 方法來(lái)創(chuàng )建一個(gè)更好版本的按鈕翻轉示例。先前的翻轉按鈕示例有一個(gè)問(wèn)題，即當終端用戶(hù)的鼠標置于按鈕圖像上時(shí)，必須通過(guò)單獨的請求從服務(wù)器檢索翻轉圖像。較好的翻轉按鈕情況是，按鈕的翻轉圖像已經(jīng)下載并存儲到了瀏覽器的高速緩存中，以便當終端用戶(hù)將鼠標置于按鈕上時(shí)，會(huì )立即顯示翻轉圖像。要完成該任務(wù)，我們必須構建一個(gè) JavaScript 函數。以下示例介紹了該 JavaScript 函數以及如何使用 RegisterClientScriptBlock 方法將該函數置于頁(yè)面中。就本例而言，代碼分離只需要一個(gè) Page_Load 事件及一個(gè)針對 ImageButton 服務(wù)器控件的按鈕單擊事件。
Visual Basic
Protected Sub Page_Load(ByVal sender As Object, _ ByVal e As System.EventArgs) Page.ClientScript.RegisterClientScriptBlock(Me.GetType(), _ "MyScript", _ "if (document.images) {" & _ "MyButton = new Image;" & _ "MyButtonShaded = new Image;" & _ "MyButton.src = ‘button1.gif;" & _ "MyButtonShaded.src = ‘button2.gif;" & _ "}" & _ "else {" & _ "MyButton = ‘‘;" & _ "MyButtonShaded = ‘‘;" & _ "}", True) ImageButton1.Attributes.Add("onmouseover", _ "this.src = MyButtonShaded.src;" & _ "window.status=‘是的！請單擊此處！‘;") ImageButton1.Attributes.Add("onmouseout", _ "this.src = MyButton.src;" & _ "window.status=‘‘;") End Sub Protected Sub ImageButton1_Click(ByVal sender As Object, _ ByVal e As System.Web.UI.ImageClickEventArgs Label1.Text = "回發(fā)！" End Sub
C#
<%@ Page Language="C#" %> <script runat="server"> protected void Page_Load(object sender, EventArgs e) { Page.RegisterClientScriptBlock("MyScript", _ "if (document.images) {" + "MyButton = new Image;" + "MyButtonShaded = new Image;" + "MyButton.src = ‘button1.gif;" + "MyButtonShaded.src = ‘button2.gif;" + "}" + "else {" + "MyButton = ‘‘;" + "MyButtonShaded = ‘‘;" + "}", true); ImageButton1.Attributes.Add("onmouseover", "this.src = MyButtonShaded.src;" + "window.status=‘是的！請單擊此處！‘;"); ImageButton1.Attributes.Add("onmouseout", "this.src = MyButton.src;" + "window.status=‘‘;"); } protected void ImageButton1_Click(object sender, ImageClickEventArgs e) { Label1.Text = "回發(fā)！"; } </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>使用 JavaScript</title> </head> <body> <form id="form1" runat="server"> <div> <p> <asp:ImageButton id="ImageButton1" onmouseover="this.src=‘button2.gif‘" onclick="ImageButton1_Click" onmouseout="this.src=‘button1.gif‘" runat="server" ImageUrl="button1.gif"></asp:ImageButton> </p> <p> <asp:Label id="Label1" runat="server" /> </p> </div> </form> </body> </html>
使用此代碼時(shí)，瀏覽器的 HTML 輸出將如下所示：
<html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1"><title> 使用 JavaScript </title></head> <body> <form name="form1" method="post" action="Default.aspx" id="form1"> <div> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTcyMTcwOTQ2NA9kFgICBA9kFgICAQ8PZBYEHgtvbm1 vdXNlb3ZlcgVCdGhpcy5zcmMgPSBNeUJ1dHRvblNoYWRlZC5zcmM7d2luZ G93LnN0YXR1cz0nT2ggWWVzISBDbGljayBoZXJlISc7Hgpvbm1vdXNlb3V 0BSl0aGlzLnNyYyA9IE15QnV0dG9uLnNyYzt3aW5kb3cuc3RhdHVzPScnO 2QYAQUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgEFDEltYWd lQnV0dG9uMXDJ4zl4FNylcdE+kep0e5wzi14T" /> </div> <script type="text/javascript"> <!-- if (document.images) {MyButton = new Image;MyButtonShaded = new Image; MyButton.src = ‘button1.gif‘;MyButtonShaded.src = ‘button2.gif‘;} else {MyButton= ‘‘;MyButtonShaded = ‘‘;}// --> </script> <div> <p> <input type="image" name="ImageButton1" id="ImageButton1" onmouseover="this.src = MyButtonShaded.src;window.status= ‘是的！請單擊此處！‘;" onmouseout="this.src = MyButton.src;window.status=‘‘;" src="button1.gif" style="border-width:0px;" /> </p> <p> <span id="Label1"></span> </p> </div> <div> <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgLhoLy4DwLSwpnTCEKaKJJN3KmLU7TP4vwT5VSKMT+M" /> </div></form> </body> </html>
對于該輸出，請注意：通過(guò)使用 RegisterClientScriptBlock，JavaScript 函數緊跟在 HTML 代碼中開(kāi)啟元素 <form> 的后面。除了使用 RegisterClientScriptBlock 方法添加了 JavaScript 函數外，我們還添加了一些額外的 JavaScript（只是為了增添點(diǎn)樂(lè )趣），以便在終端用戶(hù)將鼠標置于按鈕上時(shí)文本會(huì )顯示在瀏覽器的狀態(tài)欄中。如圖 3 所示。
圖 3. 活動(dòng)的翻轉按鈕
對于所有此類(lèi) JavaScript 來(lái)說(shuō)，最值得高興的就是，對服務(wù)器端事件的普通回發(fā)將正常工作。在本例中單擊 ImageButton 將產(chǎn)生一個(gè)回發(fā)，其中更改了標簽服務(wù)器控件的 text 屬性。
Page.ClientScript.RegisterStartupScript 與 Page.ClientScript.RegisterClientScriptBlock 之間的區別
我們已為您介紹了兩種不同的可用來(lái)將 JavaScript 函數嵌入 ASP.NET 頁(yè)面的方法，那么，二者之間有何不同呢？主要區別在于，RegisterStartupScript 方法是將 JavaScript 嵌入到 ASP.NET 頁(yè)面的底部，恰好位于關(guān)閉元素 </form> 的前面。RegisterClientScriptBlock 方法是將 JavaScript 嵌入到頁(yè)面中開(kāi)啟元素 <form> 的緊后面。那么，這有何不同呢？正如我們將要看到的，這有很大的不同。
就此列舉一例，以下是在頁(yè)面加載到瀏覽器時(shí)，將焦點(diǎn)置于該頁(yè)面上的一個(gè)文本框中的方法 - 使用利用了 RegisterStartupScript 方法的 Visual Basic：
Page.ClientScript.RegisterStartupScript(Me.GetType(), "Testing", _ "document.forms[0][‘TextBox1‘].focus();", True)
由于在瀏覽器運行到頁(yè)面底部并執行此小段 JavaScript 時(shí)，就已生成了頁(yè)面上的文本框，并已將其放到了頁(yè)面中，因此，此方法運行正常。但是，如果不按照上述方法，而編寫(xiě)如下代碼（使用 RegisterClientScriptBlock 方法）：
Page.ClientScript.RegisterClientScriptBlock(Me.GetType(), "Testing", _ "document.forms[0][‘TextBox1‘].focus();", True)
文本框控件將不會(huì )獲得焦點(diǎn)，且會(huì )在頁(yè)面上生成一個(gè) JavaScript 錯誤（如圖 4 所示）。
圖 4. 執行 JavaScript 時(shí)出錯
出錯的原因在于，瀏覽器將先遇到 JavaScript，而后文本框才會(huì )出現在頁(yè)面中。因此，JavaScript 將無(wú)法找到 TextBox1。
返回頁(yè)首將 JavaScript 放到單獨的文件 (.js) 中
強烈建議將 JavaScript 函數放到單獨的文件中（.js 文件）。一旦它們位于單獨的文件中，并且是某個(gè)項目的一部分，即可使用某些曾經(jīng)介紹過(guò)的方法將該文件導入到頁(yè)面中。
例如，可通過(guò)以下代碼將 .js 文件包括到 ASP.NET 頁(yè)面中：
Visual Basic
Page.ClientScript.RegisterClientScriptBlock(Me.GetType(), "MyScript", _ "MyJavaScriptFile.js")
C#
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "MyScript", "MyJavaScriptFile.js");
一旦將 .js 文件導入到了 ASP.NET 頁(yè)面中，即可像以前一樣調用任何 JavaScript 函數。如果要管理 JavaScript 函數，并將它們與其他 ASP.NET 頁(yè)面的邏輯分離，這是個(gè)不錯的方法。也可使用該方法很容易地在多個(gè) ASP.NET 頁(yè)面中使用相同的 JavaScript 函數。
返回頁(yè)首結論
本文簡(jiǎn)要介紹了在 ASP.NET 頁(yè)面中使用 JavaScript 的一些常見(jiàn)方法以及對 JavaScript 的一些較為常見(jiàn)的使用方法。需要注意的一些較為重要的提示是，要將 JavaScript 放到單獨的 .js 文件中，并使用 RegisterStartupScript 和 RegisterClientScriptBlock 方法將 JavaScript 嵌入到頁(yè)面中。使用 HtmlGenericControl 的功能將控件特定的 JavaScript 部署到 ASP.NET 頁(yè)面中也是相當容易的。
關(guān)于作者
Bill Evjen 是 .NET 技術(shù)的積極擁護者，也是針對 .NET 的基于社團的學(xué)習創(chuàng )始人。自從 .NET 于 2000 年發(fā)布以來(lái)，他一直積極地致力于 .NET 方面的工作。同一年，Bill 創(chuàng )建了“圣路易斯 .NET 用戶(hù)組”(
http://www.stlnet.org) - 世界上最先創(chuàng )建的 .NET 用戶(hù)組之一。Bill 也是“國際 .NET 聯(lián)盟”(
http://www.ineta.org) 的創(chuàng )始人，該聯(lián)盟在全球擁有 400,000 多名成員。
以美國密蘇里州圣路易斯為基地，Bill 是大家擁戴的 ASP.NET 和 XML Web 服務(wù)方面的作者和代言人。他所編寫(xiě)或參與合著(zhù)的書(shū)籍達 10 余種，包括《Professional ASP.NET 2.0》、《Professional C# 2005》、《Professional VB 2005》、《XML Web Services for ASP.NET》以及《Web Services Enhancements: Understanding the WSE for Enterprise Applications, Visual Basic .NET Bible, and ASP.NET Professional Secrets》（均由 Wiley 出版發(fā)行）。除了書(shū)籍編寫(xiě)之外，Bill 還參與了很多會(huì )議的演講，包括 DevConnections、VSLive 和 TechEd。
Bill 是 Lipper（一家歸 Reuters 所有的公司）的技術(shù)架構師。他畢業(yè)于位于華盛頓州貝靈漢的西華盛頓大學(xué)，具有俄語(yǔ)學(xué)位。當不在計算機前忙于工作時(shí)，通常會(huì )在位于芬蘭 Toivakka 的避暑別墅中找到他。您可通過(guò) evjen@yahoo.com 與 Bill 取得聯(lián)系。目前，其個(gè)人網(wǎng)絡(luò )日志位于
http://www.geekswithblogs.net/evjen。
轉到原英文頁(yè)面返回頁(yè)首 適合打印機打印的版本 通過(guò)電子郵件發(fā)送此頁(yè)面個(gè)人信息中心 |
MSDN中文速遞郵件 |
聯(lián)系我們©2007 Microsoft Corporation. 版權所有.
保留所有權利 |
商標 |
隱私權聲明
