在ASP.Net中應(yīng)用javascript

趨明 2012-03-15

展開全文

發(fā)布時間：2006.08.01 16:18 來源：designxf 作者：

戴澤峰

概要

一,、ASP.Net與Javascript

微軟服務(wù)器端控件和事件驅(qū)動模式的引入，使得Web應(yīng)用程序的開發(fā)更接近于過去桌面程序的開發(fā),。

服務(wù)器服務(wù)器服務(wù)器端的程序畢竟需要一次瀏覽器服務(wù)器的交互,，對于ASP.Net來說，就是一次頁面的提交,，需要來回傳送大量的數(shù)據(jù),，而很多工作，比如輸入驗證或者刪除確認等,，完全可以用Javascript來實現(xiàn),。因此,，探討在ASP.Net中如何使用Javascript仍然很有必要。

二,、Javascript的應(yīng)用示例

服務(wù)器控件添加Javascript事件

服務(wù)器服務(wù)器服務(wù)器控件都有的一個屬性,，它用來為最終生成的HTML添加自定義的一些標記。假設(shè)Web Form上有一個保存按鈕btnSave,希望在用戶點此按鈕時提示用戶是否確實要保存(比如一旦保存就無法恢復等),，則應(yīng)在Page_Load事件中添加如下代碼：

if not page.isPostBack() then

btnSave.Attributes.Add(“onclick”,”Javascript:return confirm(‘Are you sure to save?’);”)

end if

要注意的是‘return’,，這是不可省的，否則即使用戶點了取消,，數(shù)據(jù)仍然會保存,。

2．為Datagrid中的每一行添加Javascript事件

假設(shè)Datagrid的每一行有一個刪除按鈕，希望在用戶點此按鈕時提示用戶是否確實要刪除此條記錄,，以防用戶點錯了行,，或僅僅是無意中點了刪除按鈕。

無論這個刪除按鈕是什么名字,，都不能象上個例子那樣直接引用,，因為每一行都有這樣一個按鈕，它們是Datagrid中的子控件,。在這種情況下,，需要用到Datagrid的OnItemDataBound事件。OnItemDataBound事件發(fā)生在Datagrid的每一行數(shù)據(jù)綁定到Datagrid之后（即一行激發(fā)一次）,。首先在Datagrid的聲明中添加如下代碼：

<asp:datagrid id=grd1 runat=server OnItemDataBound = ItemDataBound >

…Columns definition here

</asp:datagrid> 此處說明OnItemDataBound事件發(fā)生時調(diào)用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的標題行和腳注行也會激發(fā)此事件，所以首先判斷激發(fā)此事件的行不是標題行和腳注行,。這里假設(shè)Delete按鈕位于Datagrid的第6列（第一列是0）,，且Datagrid的Datasource中包含名為”m_sName”的列

3．引用編輯狀態(tài)下的Datagrid中的控件

Datagrid的內(nèi)置編輯功能使得當記錄的字段較少時的一種編輯方法。用戶不必進入一個單獨的頁面編輯記錄,，而是直接點編輯按鈕就可以使當前行進入編輯模式,。而另一方面，有一些Javascript程序需要引用控件的名稱,。比如,，很多程序在需要用戶輸入日期時都提供一個日期控件以保證日期格式的合法性，當用戶點控件圖標時彈出一個新窗口供用戶選擇日期,。此時需要把顯示日期的文本框的ID提供給新窗口,，以便當用戶選擇日期后值可以回填到文本框中。

服務(wù)器文本框控件,，它的ID與生成的HTML輸入框的ID是相同的；但是在Datagrid的編輯狀態(tài)下,，兩個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自動生成的Javascript程序

服務(wù)器服務(wù)器和客戶端之分,，都是標準的HTML,DHTML和Javascript,。它之所以能響應(yīng)用戶的輸入是因為每個控件的事件處理程序最終都生成了一段腳本，此腳本重新提交頁面使得Web Server有機會再次響應(yīng)并作出處理,。通常情況下我們不必知道此腳本是什么也不必直接調(diào)用此腳本,，但在有些情況下，適當?shù)卣{(diào)用此腳本可以簡化許多工作,。請看下面兩個例子,。

● 點Datagrid的任一位置以選中一行

Datagrid提供了一種內(nèi)置的選擇按鈕,當點此按鈕時選中當前行（可以設(shè)置SelectedItemStyle屬性以使當前行有不同的外觀）。但用戶可能更習慣于點任意一個位置都能選中一行,，如果完全自己實現(xiàn)這個功能相當煩瑣,。一個好的思路是添加一個選擇按鈕，但使此列隱藏,，當點任一行時調(diào)用此按鈕產(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

這里假設(shè)選擇按鈕位于第6列。e.Item代表了一行,，從生成的HTML上看就是在每個<tr>里增加了一個onclick事件,。Page.GetPostBackClientHyperLink方法返回頁面中LinkButton控件產(chǎn)生的客戶端腳本，其中第一個參數(shù)是Linkbutton控件,第二個參數(shù)是傳遞給此控件的參數(shù),，通常為空,。如果不是LinkButton控件，有一個類似的函數(shù)GetPostBackClientEvent,，讀者可以參考MSDN,。

服務(wù)器產(chǎn)生的腳本與手工添加的腳本沖突

服務(wù)器服務(wù)器事件一般對應(yīng)到客戶端控件的相應(yīng)事件，如Dropdownlist的SelectedIndexChanged事件對應(yīng)HTML <Select>的onchange事件,。如果你要手工增加一個onchange事件,，則會在客戶端產(chǎn)生兩個onchange, 瀏覽器就會忽略掉一個。比如用戶希望每當改變了Dropdownlist中的選項就保存到數(shù)據(jù)庫（雖然不是很常見,，但確實有這種需要）,，但同時還希望提醒用戶是否確實要做保存。顯然,，保存的代碼應(yīng)該放在SelectedIndexChanged事件中,，而提醒的工作應(yīng)該手工加一段onchange事件。結(jié)果就是兩個onchange只能執(zhí)行一個,。正確的方法應(yīng)該是添加一個不可見的保存按鈕,，在手工增加的onchange事件中調(diào)用此按鈕生成的程序。

Page_Load方法如下：

Dim sCmd as string

sCmd=Page.GetPostBackClientHyperlink(btnUpdate, )

If not page.isPostback then

Dropdownlist1.Attributes.add(onchange,ConfirmUpdate( & sCmd & ))

End if

ConfirmUpdate函數(shù)如下

function ConfirmUpdate(cmd){

if confirm(“Are you sure to update?”)

eval(cmd);

}

</Script>