發(fā)布時(shí)間：2006.08.01 16:18 來(lái)源：designxf 作者：
戴澤峰
概要
一、ASP.Net與Javascript
微軟 服務(wù)器 端控件和事件驅動(dòng)模式的引入，使得Web應用程序的開(kāi)發(fā)更接近于過(guò)去桌面程序的開(kāi)發(fā)。
服務(wù)器 服務(wù)器 服務(wù)器 端的程序畢竟需要一次 瀏覽器 服務(wù)器 的交互，對于A(yíng)SP.Net來(lái)說(shuō)，就是一次頁(yè)面的提交，需要來(lái)回傳送大量的數據，而很多工作，比如輸入驗證或者刪除確認等，完全可以用Javascript來(lái)實(shí)現。因此，探討在A(yíng)SP.Net中如何使用Javascript仍然很有必要。
二、Javascript的應用示例
服務(wù)器 控件添加Javascript事件
服務(wù)器 服務(wù)器 服務(wù)器 控件都有的一個(gè)屬性，它用來(lái)為最終生成的HTML添加自定義的一些標記。假設Web Form上有一個(gè)保存按鈕btnSave,希望在用戶(hù)點(diǎn)此按鈕時(shí)提示用戶(hù)是否確實(shí)要保存(比如一旦保存就無(wú)法恢復等)，則應在Page_Load事件中添加如下代碼：
if not page.isPostBack() then
btnSave.Attributes.Add(“onclick”,”Javascript:return confirm(‘Are you sure to save?’);”)
end if
要注意的是‘return’，這是不可省的，否則即使用戶(hù)點(diǎn)了取消，數據仍然會(huì )保存。
2．為Datagrid中的每一行添加Javascript事件
假設Datagrid的每一行有一個(gè)刪除按鈕，希望在用戶(hù)點(diǎn)此按鈕時(shí)提示用戶(hù)是否確實(shí)要刪除此條記錄，以防用戶(hù)點(diǎn)錯了行，或僅僅是無(wú)意中點(diǎn)了刪除按鈕。
無(wú)論這個(gè)刪除按鈕是什么名字，都不能象上個(gè)例子那樣直接引用，因為每一行都有這樣一個(gè)按鈕，它們是Datagrid中的子控件。在這種情況下，需要用到Datagrid的OnItemDataBound事件。OnItemDataBound事件發(fā)生在Datagrid的每一行數據綁定到Datagrid之后（即一行激發(fā)一次）。首先在Datagrid的聲明中添加如下代碼：
<asp:datagrid id=grd1 runat=server OnItemDataBound = ItemDataBound >
…Columns definition here
</asp:datagrid> 此處說(shuō)明OnItemDataBound事件發(fā)生時(shí)調用ItemDataBound方法，在代碼后置文件中添加此方法的定義：
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.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的標題行和腳注行也會(huì )激發(fā)此事件，所以首先判斷激發(fā)此事件的行不是標題行和腳注行。這里假設Delete按鈕位于Datagrid的第6列（第一列是0），且Datagrid的Datasource中包含名為”m_sName”的列
3．引用編輯狀態(tài)下的Datagrid中的控件
Datagrid的內置編輯功能使得當記錄的字段較少時(shí)的一種編輯方法。用戶(hù)不必進(jìn)入一個(gè)單獨的頁(yè)面編輯記錄，而是直接點(diǎn)編輯按鈕就可以使當前行進(jìn)入編輯模式。而另一方面，有一些Javascript程序需要引用控件的名稱(chēng)。比如，很多程序在需要用戶(hù)輸入日期時(shí)都提供一個(gè)日期控件以保證日期格式的合法性，當用戶(hù)點(diǎn)控件圖標時(shí)彈出一個(gè)新窗口供用戶(hù)選擇日期。此時(shí)需要把顯示日期的文本框的ID提供給新窗口，以便當用戶(hù)選擇日期后值可以回填到文本框中。
服務(wù)器 文本框控件，它的ID與生成的HTML輸入框的ID是相同的；但是在Datagrid的編輯狀態(tài)下，兩個(gè)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). FindControl(txtDate) . ClientID
End Sub
服務(wù)器 文本框控件。
4．引用ASP.Net自動(dòng)生成的Javascript程序
服務(wù)器 服務(wù)器 和客戶(hù)端之分，都是標準的HTML,DHTML和Javascript。它之所以能響應用戶(hù)的輸入是因為每個(gè)控件的事件處理程序最終都生成了一段腳本，此腳本重新提交頁(yè)面使得Web Server有機會(huì )再次響應并作出處理。通常情況下我們不必知道此腳本是什么也不必直接調用此腳本，但在有些情況下，適當地調用此腳本可以簡(jiǎn)化許多工作。請看下面兩個(gè)例子。
● 點(diǎn)Datagrid的任一位置以選中一行
Datagrid提供了一種內置的選擇按鈕,當點(diǎn)此按鈕時(shí)選中當前行（可以設置SelectedItemStyle屬性以使當前行有不同的外觀(guān)）。但用戶(hù)可能更習慣于點(diǎn)任意一個(gè)位置都能選中一行，如果完全自己實(shí)現這個(gè)功能相當煩瑣。一個(gè)好的思路是添加一個(gè)選擇按鈕，但使此列隱藏，當點(diǎn)任一行時(shí)調用此按鈕產(chǎn)生的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 <> ListItemType.Footer) And _
(itemType <> ListItemType.Separator) Then
Dim oSelect As LinkButton = CType(e.Item.Cells(5).Controls(0), LinkButton)
e.Item.Attributes(onclick) = Page. GetPostBackClientHyperlink (oSelect, )
End Sub
這里假設選擇按鈕位于第6列。e.Item代表了一行，從生成的HTML上看就是在每個(gè)<tr>里增加了一個(gè)onclick事件。Page.GetPostBackClientHyperLink方法返回頁(yè)面中LinkButton控件產(chǎn)生的客戶(hù)端腳本，其中第一個(gè)參數是Linkbutton控件,第二個(gè)參數是傳遞給此控件的參數，通常為空。如果不是LinkButton控件，有一個(gè)類(lèi)似的函數GetPostBackClientEvent，讀者可以參考MSDN。
服務(wù)器 產(chǎn)生的腳本與手工添加的腳本沖突
服務(wù)器 服務(wù)器 事件一般對應到客戶(hù)端控件的相應事件，如Dropdownlist的SelectedIndexChanged事件對應HTML <Select>的onchange事件。如果你要手工增加一個(gè)onchange事件，則會(huì )在客戶(hù)端產(chǎn)生兩個(gè)onchange, 瀏覽器 就會(huì )忽略掉一個(gè)。比如用戶(hù)希望每當改變了Dropdownlist中的選項就保存到數據庫（雖然不是很常見(jiàn)，但確實(shí)有這種需要），但同時(shí)還希望提醒用戶(hù)是否確實(shí)要做保存。顯然，保存的代碼應該放在SelectedIndexChanged事件中，而提醒的工作應該手工加一段onchange事件。結果就是兩個(gè)onchange只能執行一個(gè)。正確的方法應該是添加一個(gè)不可見(jiàn)的保存按鈕，在手工增加的onchange事件中調用此按鈕生成的程序。
Page_Load方法如下：
Dim sCmd as string
sCmd=Page.GetPostBackClientHyperlink(btnUpdate, )
If not page.isPostback then
Dropdownlist1.Attributes.add(onchange,ConfirmUpdate( & sCmd & ))
End if
ConfirmUpdate函數如下
<Script language=”javascript”>
function ConfirmUpdate(cmd){
if confirm(“Are you sure to update?”)
eval(cmd);
}
</Script>
這里利用了Javascript eval函數來(lái)調用一個(gè)字符串中包含的命令。需注意的是包含命令的字符串不能用單引號括起來(lái)，因為自動(dòng)生成的腳本中包括單引號，所以這里用兩個(gè)雙引號表示字符串本身的雙引號。
三、結束語(yǔ)
服務(wù)器 程序中插入客戶(hù)端的Javascript腳本，可以提高程序的運行效率并提供更友好的用戶(hù)界面。
聯(lián)系客服
