概要 本文結合示例講述了在應用程序中如何利用客戶端的Javascript腳本提高程序的執行效率並實現更多的功能
一ASPNet與Javascript
Net是微軟公司下一代的戰略核心ASPNet是Net戰略在Web開發方面的具體實現它繼承了ASP的簡單性和易用性同時克服了ASP程序結構化較差難於閱讀和理解的缺點特別是服務器端控件和事件驅動模式的引入使得Web應用程序的開發更接近於過去桌面程序的開發
在各種各樣介紹ASPNet的文章和書籍中都把重點放在了服務器控件和Net Framework SDK上因為這是ASPNet中最新和最具革命性的改進與此相反在過去的Web開發中占據重要地位的客戶端腳本Javascript（也包括VBScript）則鮮有提及似乎有了服務器端程序已經不需要客戶端腳本了但是服務器端的程序畢竟需要一次浏覽器與Web服務器的交互對於ASPNet來說就是一次頁面的提交需要來回傳送大量的數據而很多工作比如輸入驗證或者刪除確認等完全可以用Javascript來實現因此探討在ASPNet中如何使用Javascript仍然很有必要
二Javascript的應用示例
為頁面上的某個服務器控件添加Javascript事件
服務器控件最終生成的仍然是普通的HTML比如<asptextbox>生成input text表單中的每個HTML控件都有它自己的Javascript事件比如Textbox有onchange事件Button有onclick事件Listbox有onchange事件等要想為服務器控件添加客戶端的事件需要用到Attributes屬性Attributes屬性是所有的服務器控件都有的一個屬性它用來為最終生成的HTML添加自定義的一些標記假設Web Form上有一個保存按鈕btnSave希望在用戶點此按鈕時提示用戶是否確實要保存（比如一旦保存就無法恢復等）則應在Page_Load事件中添加如下代碼
if not pageisPostBack（） then
btnSaveAttributesAdd（onclickJavascriptreturn confirm（Are you sure to save？））
end if
要注意的是return這是不可省的否則即使用戶點了取消數據仍然會保存
為Datagrid中的每一行添加Javascript事件
假設Datagrid的每一行有一個刪除按鈕希望在用戶點此按鈕時提示用戶是否確實要刪除此條記錄以防用戶點錯了行或僅僅是無意中點了刪除按鈕
無論這個刪除按鈕是什麼名字都不能象上個例子那樣直接引用因為每一行都有這樣一個按鈕它們是Datagrid中的子控件在這種情況下需要用到Datagrid的OnItemDataBound事件OnItemDataBound事件發生在Datagrid的每一行數據綁定到Datagrid之後（即一行激發一次）首先在Datagrid的聲明中添加如下代碼
<aspdatagrid id=grd runat=server OnItemDataBound = ItemDataBound >
…Columns definition here
</aspdatagrid> 此處說明OnItemDataBound事件發生時調用ItemDataBound方法在代碼後置文件中添加此方法的定義
Sub ItemDataBound（ByVal sender As Object ByVal e As DataGridItemEventArgs）
If eItemItemType <> ListItemTypeHeader And eItemItemType <> ListItemTypeFooter Then
Dim oDeleteButton As LinkButton = eItemCells（）Controls（）
oDeleteButtonAttributes（onclick） = javascriptreturn Confirm （Are you sure you want to delete & DataBinderEval（eItemDataItem m_sName） & ？）
End If
End Sub
由於Datagrid的標題行和腳注行也會激發此事件所以首先判斷激發此事件的行不是標題行和腳注行這裡假設Delete按鈕位於Datagrid的第列（第一列是）且Datagrid的Datasource中包含名為m_sName的列
引用編輯狀態下的Datagrid中的控件
Datagrid的內置編輯功能使得當記錄的字段較少時的一種編輯方法用戶不必進入一個單獨的頁面編輯記錄而是直接點編輯按鈕就可以使當前行進入編輯模式而另一方面有一些Javascript程序需要引用控件的名稱比如很多程序在需要用戶輸入日期時都提供一個日期控件以保證日期格式的合法性當用戶點控件圖標時彈出一個新窗口供用戶選擇日期此時需要把顯示日期的文本框的ID提供給新窗口以便當用戶選擇日期後值可以回填到文本框中
如果是普通的服務器文本框控件它的ID與生成的HTML輸入框的ID是相同的但是在Datagrid的編輯狀態下兩個ID並不相同（其道理與上例相同）這就需要用到控件的ClientID屬性
Protected Sub ItemEdit（ByVal source As Object ByVal e As SystemWebUIWebControlsDataGridCommandEventArgs）
Dim sDateCtrl as string
sDateCtrl = grd Items （eItemItemIndex） Cells（） FindControl（txtDate） ClientID
End Sub
這裡假設ItemEdit方法是Dategrid的OnItemEdit事件處理程序同時在Datagrid的第三列包含一個名為txtDate的服務器文本框控件
引用ASPNet自動生成的Javascript程序
所謂的服務器端控件是針對開發人員的在生成的HTML源程序中並沒有服務器和客戶端之分都是標准的HTMLDHTML和Javascript它之所以能響應用戶的輸入是因為每個控件的事件處理程序最終都生成了一段腳本此腳本重新提交頁面使得Web Server有機會再次響應並作出處理通常情況下我們不必知道此腳本是什麼也不必直接調用此腳本但在有些情況下適當地調用此腳本可以簡化許多工作請看下面兩個例子
● 點Datagrid的任一位置以選中一行
Datagrid提供了一種內置的選擇按鈕當點此按鈕時選中當前行（可以設置SelectedItemStyle屬性以使當前行有不同的外觀）但用戶可能更習慣於點任意一個位置都能選中一行如果完全自己實現這個功能相當煩瑣一個好的思路是添加一個選擇按鈕但使此列隱藏當點任一行時調用此按鈕產生的Javascript腳本
Sub Item_Bound（ByVal sender As Object ByVal e As DataGridItemEventArgs ）
Dim itemType As ListItemType
itemType = CType（eItemItemType ListItemType）
If （itemType <> ListItemTypeHeader） And _
（itemType <> ListItemTypeFooter） And _
（itemType <> ListItemTypeSeparator） Then
Dim oSelect As LinkButton = CType（eItemCells（）Controls（） LinkButton）
eItemAttributes（onclick） = Page GetPostBackClientHyperlink （oSelect ）
End Sub
這裡假設選擇按鈕位於第列eItem代表了一行從生成的HTML上看就是在每個<tr>裡增加了一個onclick事件PageGetPostBackClientHyperLink方法返回頁面中LinkButton控件產生的客戶端腳本其中第一個參數是Linkbutton控件第二個參數是傳遞給此控件的參數通常為空如果不是LinkButton控件有一個類似的函數GetPostBackClientEvent讀者可以參考MSDN
● 服務器產生的腳本與手工添加的腳本沖突
服務器控件的服務器事件一般對應到客戶端控件的相應事件如Dropdownlist的SelectedIndexChanged事件對應HTML <Select>的onchange事件如果你要手工增加一個onchange事件則會在客戶端產生兩個onchange浏覽器就會忽略掉一個比如用戶希望每當改變了Dropdownlist中的選項就保存到數據庫（雖然不是很常見但確實有這種需要）但同時還希望提醒用戶是否確實要做保存顯然保存的代碼應該放在SelectedIndexChanged事件中而提醒的工作應該手工加一段onchange事件結果就是兩個onchange只能執行一個正確的方法應該是添加一個不可見的保存按鈕在手工增加的onchange事件中調用此按鈕生成的程序
Page_Load方法如下
Dim sCmd as string
sCmd=PageGetPostBackClientHyperlink（btnUpdate ）
If not pageisPostback then
DropdownlistAttributesadd（onchangeConfirmUpdate（ & sCmd & ））
End if
ConfirmUpdate函數如下
<Script language=javascript>
function ConfirmUpdate（cmd）{
if confirm（Are you sure to update？）
eval（cmd）
}
</Script>
這裡利用了Javascript eval函數來調用一個字符串中包含的命令需注意的是包含命令的字符串不能用單引號括起來因為自動生成的腳本中包括單引號所以這裡用兩個雙引號表示字符串本身的雙引號
三結束語
以上簡單討論了在ASPNet中插入Javascript的幾種情況合理地在服務器程序中插入客戶端的Javascript腳本可以提高程序的運行效率並提供更友好的用戶界面
From:http://tw.wingwit.com/Article/program/net/201311/11989.html
