本文結合範例講述了在ASP.net應用程式中如何利用客戶端的Javascript腳本來提高程式的執行效率並實現更多的功能。
一、ASP.Net與Javascript
.Net是微軟公司下一代的戰略核心，ASP.Net是.Net戰略在Web開發方面的具體實現。它繼承了ASP的簡單性和易用性，同時克服了ASP程式結構化較差，難於閱讀和理解的缺點。特別是伺服器端控制項和事件驅動模式的引入，使得Web應用程式的開發更接近過去桌面程式的開發。
在各種介紹ASP.Net的文章和書籍中，都把重點放在了伺服器控制項和.Net Framework SDK上，因為這是ASP.Net中最新和最具革命性的改進；與此相反，在過去的Web開發中佔據重要地位的客戶端腳本Javascript(也包括VBScript)則鮮有提及，似乎有了伺服器端程序，已經不需要客戶端腳本了。但是，伺服器端的程式畢竟需要一次瀏覽器與Web伺服器的交互，對於ASP.Net來說，就是一次頁面的提交，需要來回傳送大量的數據，而很多工作，例如輸入驗證或刪除確認等，完全可以用Javascript來實作。因此，探討在ASP.Net中如何使用Javascript仍然很有必要。
二、Javascript的應用範例
1．為頁面上的某個伺服器控制項新增Javascript事件
伺服器控制項最終產生的仍然是普通的HTML,例如<asp:textbox>產生input text。表單中的每個HTML控制項都有它自己的Javascript事件，例如Textbox有onchange事件，Button有onclick事件，Listbox有onchange事件等。要為伺服器控制項新增客戶端的事件，需要用到Attributes屬性。 Attributes屬性是所有的伺服器控制項都有的屬性，它用來為最終產生的HTML添加自訂的一些標記。假設Web Form上有一個儲存按鈕btnSave,希望在使用者點此按鈕時提示使用者是否確實要儲存(例如一旦儲存就無法復原等)，則應在Page_Load事件中加入下列程式碼：
if not page.isPostBack() then
btnSave.Attributes.Add(“onclick”,”Javascript:return confirm('Are you sure to save?');”)
end if
要注意的是'return'，這是不可省的，否則即使用戶點了取消，資料仍然會保存。
2．為Datagrid中的每一行新增Javascript事件
假設Datagrid的每一行都有一個刪除按鈕，希望在使用者點此按鈕時提示使用者是否確實要刪除此筆記錄，以防使用者點錯了行，或只是無意中點了刪除按鈕。
無論這個刪除按鈕是什麼名字，都不能像上個範例那樣直接引用，因為每一行都有這樣一個按鈕，它們是Datagrid中的子控制項。在這種情況下，需要使用到Datagrid的OnItemDataBound事件。 OnItemDataBound事件發生在Datagrid的每一行資料綁定到Datagrid之後（即一行激發一次）。首先在Datagrid的宣告中加入以下程式碼：
<asp:datagrid id="grd1" runat="server" OnItemDataBound = "ItemDataBound" >
…Columns definition here
</asp:datagrid> 此處說明OnItemDataBound事件發生時呼叫DataBound方法發生時呼叫，在程式碼後置檔案中加入此方法的定義：
Sub ItemDataBound(ByVal sender As Object, ByVal e As DataGridItemEventArgs)
If e.Item.ItemType <> ListItemType.Header And e.Item.ItemType <> ListItemType.Footer Then
Dim oDeleteButton As LinkButton = e.Item.CellsType.Footer ThenDim oDeleteButton As LinkButton = e.Item.Cells(5). Controls(0)
oDeleteButton.Attributes("onclick") = "javascript:return Confirm ('Are you sure you want to delete" & DataBinder.Eval(e.Item.DataItem, "m_sName") & "?')"
End If
End Sub
由於Datagrid的標題行和腳註行也會激發此事件，所以首先判斷激發此事件的行不是標題行和腳註行。這裡假設Delete按鈕位於Datagrid的第6列（第一列是0），且Datagrid的Datasource中包含名為”m_sName」的列
3．引用編輯狀態下的Datagrid中的控制項
Datagrid的內建編輯功能使得記錄的欄位較少時的一種編輯方法。使用者不必進入一個單獨的頁面編輯記錄，而是直接點編輯按鈕就可以使當前行進入編輯模式。而另一方面，有一些Javascript程式需要引用控制項的名稱。例如，許多程式在需要使用者輸入日期時都提供一個日期控制項以確保日期格式的合法性，當使用者點控制項圖示時彈出一個新視窗供使用者選擇日期。此時需要把顯示日期的文本框的ID提供給新窗口，以便當用戶選擇日期後值可以回填到文本框中。
如果是普通的伺服器文字方塊控件，它的ID與產生的HTML輸入框的ID是相同的；但是在Datagrid的編輯狀態下，兩個ID並不相同（其道理與上例相同），這就需要用到控制項的ClientID屬性。
Protected Sub ItemEdit(ByVal source As Object, ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs)
Dim sDateCtrl as string
sDateCtrl = grd1. Items (e.Item.ItemIndex) . Cells(2).D.D." . ClientID
End Sub
這裡假設ItemEdit方法是Dategrid的OnItemEdit事件處理程序，同時在Datagrid的第三列包含一個名為txtDate的伺服器文字方塊控制項。
4．引用ASP.Net自動產生的Javascript程式
所謂的「伺服器端控制項」是針對開發人員的，在產生的HTML來源程式中並沒有伺服器和客戶端之分，都是標準的HTML,DHTML和Javascript。它之所以能回應使用者的輸入是因為每個控制項的事件處理程序最終都產生了一段腳本，此腳本重新提交頁面使得Web Server有機會再次回應並進行處理。通常情況下我們不必知道此腳本是什麼也不必直接呼叫此腳本，但在某些情況下，適當地呼叫此腳本可以簡化許多工作。請看下面兩個例子。
● 點Datagrid的任一位置以選取一行
Datagrid提供了一個內建的選擇按鈕,當點此按鈕時選取目前行（可以設定SelectedItemStyle屬性以使目前行有不同的外觀）。但使用者可能更習慣於點任一個位置都能選取一行，如果完全自己實作這個功能相當煩瑣。一個好的想法是新增一個選擇按鈕，但使此列隱藏，當點任一行時呼叫此按鈕產生的Javascript腳本。
Sub Item_Bound(ByVal sender As Object, ByVal e As DataGridItemEventArgs )
Dim itemType As ListItemType
itemType = CType(e.Item.ItemType, ListItemType)
If (itemType <> ListItemType.Header)
And _ (itemType <oo> ListType.
(itemType <> ListItemType.Separator) Then
Dim oSelect As LinkButton = CType(e.Item.Cells(5).Controls(0), LinkButton)
e.Item.Attributes("onclick") = Page. GetPostBackClientHyperlink (oSelect, "oSelecto, " ")
End Sub
這裡假設選擇鈕位於第6列。 e.Item代表了一行，從生成的HTML上看就是在每個<tr>裡增加了一個onclick事件。 Page.GetPostBackClientHyperLink方法傳回頁面中LinkButton控制項產生的客戶端腳本，其中第一個參數是Linkbutton控制項,第二個參數是傳遞給此控制項的參數，通常為空。如果不是LinkButton控件，有一個類似的函數GetPostBackClientEvent，讀者可以參考MSDN。
● 伺服器產生的腳本與手動新增的腳本衝突
伺服器控制項的伺服器事件一般對應到客戶端控制項的對應事件，如Dropdownlist的SelectedIndexChanged事件對應HTML <Select>的onchange事件。如果你要手動增加一個onchange事件，則會在客戶端產生兩個onchange,瀏覽器就會忽略掉一個。例如使用者希望每當改變了Dropdownlist中的選項就儲存到資料庫（雖然不是很常見，但確實有這種需求），但同時也希望提醒使用者是否確實要做保存。顯然，保存的程式碼應該放在SelectedIndexChanged事件中，而提醒的工作應該要手工加上一段onchange事件。結果就是兩個onchange只能執行一個。正確的方法應該是新增一個不可見的儲存按鈕，在手工增加的onchange事件中呼叫此按鈕產生的程式。
Page_Load方法如下：
Dim sCmd as string
sCmd=Page.GetPostBackClientHyperlink(btnUpdate, "")
If not page.isPostback then
Dropdownlist1.Attributes.add("onchange","ConfirmUpdate(" &list1.Attributes.add("onchange","ConfirmUpdate"
End if
ConfirmUpdate函數如下
<Script language=”javascript”>
function ConfirmUpdate(cmd){
if confirm(“Are you sure to update?”)
eval(cmd);
}
</Script>
這裡利用了Javascript eval函數來呼叫一個字串中包含的命令。要注意的是包含指令的字串不能用單引號括起來，因為自動產生的腳本包含單引號，所以這裡用兩個雙引號表示字串本身的雙引號。
三、結束語
以上簡單討論了在ASP.Net中插入Javascript的幾個情況。合理地在伺服器程式中插入客戶端的Javascript腳本，可以提高程式的運作效率並提供更友善的使用者介面。