372
在ASP.Net中應用Javascript
概要
本文結合示例講述了在ASP.net應用程序中如何利用客戶端的Javascript腳本提高程序的執行效率並實現更多的功能。
一、ASP.Net與Javascript
.Net是微軟公司下一代的戰略核心，ASP.Net是.Net戰略在Web開發方麵的具體實現。它繼承了ASP的簡單性和易用性，同時克服了ASP程序結構化較差，難於閱讀和理解的缺點。特別是服務器端控件和事件驅動模式的引入，使得Web應用程序的開發更接近於過去桌麵程序的開發。
在各種各樣介紹ASP.Net的文章和書籍中，都把重點放在了服務器控件和.NetFrameworkSDK上，因為這是ASP.Net中最新和最具革命性的改進；與此相反，在過去的Web開發中占據重要地位的客戶端腳本Javascript(也包括VBScript)則鮮有提及，似乎有了服務器端程序，已經不需要客戶端腳本了。但是，服務器端的程序畢竟需要一次瀏覽器與Web服務器的交互，對於ASP.Net來說，就是一次頁麵的提交，需要來回傳送大量的數據，而很多工作，比如輸入驗證或者刪除確認等，完全可以用Javascript來實現。因此，探討在ASP.Net中如何使用Javascript仍然很有必要。
二、Javascript的應用示例
1．為頁麵上的某個服務器控件添加Javascript事件
服務器控件最終生成的仍然是普通的HTML,比如<asp:textbox>生成inputtext。表單中的每個HTML控件都有它自己的Javascript事件，比如Textbox有onchange事件，Button有onclick事件，Listbox有onchange事件等。要想為服務器控件添加客戶端的事件，需要用到Attributes屬性。Attributes屬性是所有的服務器控件都有的一個屬性，它用來為最終生成的HTML添加自定義的一些標記。假設WebForm上有一個保存按鈕btnSave,希望在用戶點此按鈕時提示用戶是否確實要保存(比如一旦保存就無法恢複等)，則應在Page_Load事件中添加如下代碼：
ifnotpage.isPostBack()then
btnSave.Attributes.Add(“onclick”,”Javascript:returnconfirm(‘Areyousuretosave?’);”)
endif
要注意的是‘return’，這是不可省的，否則即使用戶點了取消，數據仍然會保存。
2．為Datagrid中的每一行添加Javascript事件
假設Datagrid的每一行有一個刪除按鈕，希望在用戶點此按鈕時提示用戶是否確實要刪除此條記錄，以防用戶點錯了行，或僅僅是無意中點了刪除按鈕。
無論這個刪除按鈕是什麼名字，都不能象上個例子那樣直接引用，因為每一行都有這樣一個按鈕，它們是Datagrid中的子控件。在這種情況下，需要用到Datagrid的OnItemDataBound事件。OnItemDataBound事件發生在Datagrid的每一行數據綁定到Datagrid之後（即一行激發一次）。首先在Datagrid的聲明中添加如下代碼：
<asp:datagridrunat="server"OnItemDataBound="ItemDataBound">
…Columnsdefinitionhere
</asp:datagrid>此處說明OnItemDataBound事件發生時調用ItemDataBound方法，在代碼後置文件中添加此方法的定義：
SubItemDataBound(ByValsenderAsObject,ByValeAsDataGridItemEventArgs)
Ife.Item.ItemType<>ListItemType.HeaderAnde.Item.ItemType<>ListItemType.FooterThen
DimoDeleteButtonAsLinkButton=e.Item.Cells(5).Controls(0)
oDeleteButton.Attributes("onclick")="javascript:returnConfirm('Areyousureyouwanttodelete"&DataBinder.Eval(e.Item.DataItem,"m_sName")&"?')"
EndIf
EndSub
由於Datagrid的標題行和腳注行也會激發此事件，所以首先判斷激發此事件的行不是標題行和腳注行。這裏假設Delete按鈕位於Datagrid的第6列（第一列是0），且Datagrid的Datasource中包含名為”m_sName”的列
3．引用編輯狀態下的Datagrid中的控件
Datagrid的內置編輯功能使得當記錄的字段較少時的一種編輯方法。用戶不必進入一個單獨的頁麵編輯記錄，而是直接點編輯按鈕就可以使當前行進入編輯模式。而另一方麵，有一些Javascript程序需要引用控件的名稱。比如，很多程序在需要用戶輸入日期時都提供一個日期控件以保證日期格式的合法性，當用戶點控件圖標時彈出一個新窗口供用戶選擇日期。此時需要把顯示日期的文本框的ID提供給新窗口，以便當用戶選擇日期後值可以回填到文本框中。
如果是普通的服務器文本框控件，它的ID與生成的HTML輸入框的ID是相同的；但是在Datagrid的編輯狀態下，兩個ID並不相同（其道理與上例相同），這就需要用到控件的ClientID屬性。
ProtectedSubItemEdit(ByValsourceAsObject,ByValeAsSystem.Web.UI.WebControls.DataGridCommandEventArgs)
DimsDateCtrlasstring
sDateCtrl=grd1.Items(e.Item.ItemIndex).Cells(2).FindControl("txtDate").ClientID
EndSub
這裏假設ItemEdit方法是Dategrid的OnItemEdit事件處理程序，同時在Datagrid的第三列包含一個名為txtDate的服務器文本框控件。
4．引用ASP.Net自動生成的Javascript程序
所謂的“服務器端控件”是針對開發人員的，在生成的HTML源程序中並沒有服務器和客戶端之分，都是標準的HTML,DHTML和Javascript。它之所以能響應用戶的輸入是因為每個控件的事件處理程序最終都生成了一段腳本，此腳本重新提交頁麵使得WebServer有機會再次響應並作出處理。通常情況下我們不必知道此腳本是什麼也不必直接調用此腳本，但在有些情況下，適當地調用此腳本可以簡化許多工作。請看下麵兩個例子。
●點Datagrid的任一位置以選中一行
Datagrid提供了一種內置的選擇按鈕,當點此按鈕時選中當前行（可以設置SelectedItemStyle屬性以使當前行有不同的外觀）。但用戶可能更習慣於點任意一個位置都能選中一行，如果完全自己實現這個功能相當煩瑣。一個好的思路是添加一個選擇按鈕，但使此列隱藏，當點任一行時調用此按鈕產生的Javascript腳本。
SubItem_Bound(ByValsenderAsObject,ByValeAsDataGridItemEventArgs)
DimitemTypeAsListItemType
itemType=CType(e.Item.ItemType,ListItemType)
If(itemType<>ListItemType.Header)And_
(itemType<>ListItemType.Footer)And_
(itemType<>ListItemType.Separator)Then
DimoSelectAsLinkButton=CType(e.Item.Cells(5).Controls(0),LinkButton)
e.Item.Attributes("onclick")=Page.GetPostBackClientHyperlink(oSelect,"")
EndSub
這裏假設選擇按鈕位於第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方法如下：
DimsCmdasstring
sCmd=Page.GetPostBackClientHyperlink(btnUpdate,"")
Ifnotpage.isPostbackthen
Dropdownlist1.Attributes.add("onchange","ConfirmUpdate("""&sCmd&""")")
Endif
ConfirmUpdate函數如下
<Scriptlanguage=”javascript”>
functionConfirmUpdate(cmd){
ifconfirm(“Areyousuretoupdate?”)
eval(cmd);
}
</Script>
這裏利用了Javascripteval函數來調用一個字符串中包含的命令。需注意的是包含命令的字符串不能用單引號括起來，因為自動生成的腳本中包括單引號，所以這裏用兩個雙引號表示字符串本身的雙引號。
三、結束語
以上簡單討論了在ASP.Net中插入Javascript的幾種情況。合理地在服務器程序中插入客戶端的Javascript腳本，可以提高程序的運行效率並提供更友好的用戶界麵。
最後更新：2017-04-02 00:06:35