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