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

戴澤峰

概要

本文結(jié)合示例講述了在ASP.net應(yīng)用程序中如何利用客戶端的Javascript腳本提高程序的執(zhí)行效率并實(shí)現(xiàn)更多的功能。

一、ASP.Net與Javascript

.Net是微軟公司下一代的戰(zhàn)略核心，ASP.Net是.Net戰(zhàn)略在Web開(kāi)發(fā)方面的具體實(shí)現(xiàn)。它繼承了ASP的簡(jiǎn)單性和易用性，同時(shí)克服了ASP程序結(jié)構(gòu)化較差，難于閱讀和理解的缺點(diǎn)。特別是服務(wù)器端控件和事件驅(qū)動(dòng)模式的引入，使得Web應(yīng)用程序的開(kāi)發(fā)更接近于過(guò)去桌面程序的開(kāi)發(fā)。

在各種各樣介紹ASP.Net的文章和書籍中，都把重點(diǎn)放在了服務(wù)器控件和.Net Framework SDK上，因?yàn)檫@是ASP.Net中最新和最具革命性的改進(jìn)；與此相反，在過(guò)去的Web開(kāi)發(fā)中占據(jù)重要地位的客戶端腳本Javascript(也包括VBScript)則鮮有提及，似乎有了服務(wù)器端程序，已經(jīng)不需要客戶端腳本了。但是，服務(wù)器端的程序畢竟需要一次瀏覽器與Web服務(wù)器的交互，對(duì)于ASP.Net來(lái)說(shuō)，就是一次頁(yè)面的提交，需要來(lái)回傳送大量的數(shù)據(jù)，而很多工作，比如輸入驗(yàn)證或者刪除確認(rèn)等，完全可以用Javascript來(lái)實(shí)現(xiàn)。因此，探討在ASP.Net中如何使用Javascript仍然很有必要。

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

1．為頁(yè)面上的某個(gè)服務(wù)器控件添加Javascript事件

服務(wù)器控件最終生成的仍然是普通的HTML,比如<asp:textbox>生成input text。表單中的每個(gè)HTML控件都有它自己的Javascript事件，比如Textbox有onchange事件，Button有onclick事件，Listbox有onchange事件等。要想為服務(wù)器控件添加客戶端的事件，需要用到Attributes屬性。Attributes屬性是所有的服務(wù)器控件都有的一個(gè)屬性，它用來(lái)為最終生成的HTML添加自定義的一些標(biāo)記。假設(shè)Web Form上有一個(gè)保存按鈕btnSave,希望在用戶點(diǎn)此按鈕時(shí)提示用戶是否確實(shí)要保存(比如一旦保存就無(wú)法恢復(fù)等)，則應(yīng)在Page_Load事件中添加如下代碼：

if not page.isPostBack() then

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

end if

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

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

假設(shè)Datagrid的每一行有一個(gè)刪除按鈕，希望在用戶點(diǎn)此按鈕時(shí)提示用戶是否確實(shí)要?jiǎng)h除此條記錄，以防用戶點(diǎn)錯(cuò)了行，或僅僅是無(wú)意中點(diǎn)了刪除按鈕。

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

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

…Columns definition here

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

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

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

如果是普通的服務(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

這里假設(shè)ItemEdit方法是Dategrid的OnItemEdit事件處理程序，同時(shí)在Datagrid的第三列包含一個(gè)名為txtDate的服務(wù)器文本框控件。

4．引用ASP.Net自動(dòng)生成的Javascript程序

所謂的“服務(wù)器端控件”是針對(duì)開(kāi)發(fā)人員的，在生成的HTML源程序中并沒(méi)有服務(wù)器和客戶端之分，都是標(biāo)準(zhǔn)的HTML,DHTML和Javascript。它之所以能響應(yīng)用戶的輸入是因?yàn)槊總�(gè)控件的事件處理程序最終都生成了一段腳本，此腳本重新提交頁(yè)面使得Web Server有機(jī)會(huì)再次響應(yīng)并作出處理。通常情況下我們不必知道此腳本是什么也不必直接調(diào)用此腳本，但在有些情況下，適當(dāng)?shù)卣{(diào)用此腳本可以簡(jiǎn)化許多工作。請(qǐng)看下面兩個(gè)例子。

● 點(diǎn)Datagrid的任一位置以選中一行

Datagrid提供了一種內(nèi)置的選擇按鈕,當(dāng)點(diǎn)此按鈕時(shí)選中當(dāng)前行（可以設(shè)置SelectedItemStyle屬性以使當(dāng)前行有不同的外觀）。但用戶可能更習(xí)慣于點(diǎn)任意一個(gè)位置都能選中一行，如果完全自己實(shí)現(xiàn)這個(gè)功能相當(dāng)煩瑣。一個(gè)好的思路是添加一個(gè)選擇按鈕，但使此列隱藏，當(dāng)點(diǎn)任一行時(shí)調(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上看就是在每個(gè)<tr>里增加了一個(gè)onclick事件。Page.GetPostBackClientHyperLink方法返回頁(yè)面中LinkButton控件產(chǎn)生的客戶端腳本，其中第一個(gè)參數(shù)是Linkbutton控件,第二個(gè)參數(shù)是傳遞給此控件的參數(shù)，通常為空。如果不是LinkButton控件，有一個(gè)類似的函數(shù)GetPostBackClientEvent，讀者可以參考MSDN。

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

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

<Script language=”javascript”>

function ConfirmUpdate(cmd){

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

eval(cmd);

}

</Script>

這里利用了Javascript eval函數(shù)來(lái)調(diào)用一個(gè)字符串中包含的命令。需注意的是包含命令的字符串不能用單引號(hào)括起來(lái)，因?yàn)樽詣?dòng)生成的腳本中包括單引號(hào)，所以這里用兩個(gè)雙引號(hào)表示字符串本身的雙引號(hào)。

三、結(jié)束語(yǔ)

以上簡(jiǎn)單討論了在ASP.Net中插入Javascript的幾種情況。合理地在服務(wù)器程序中插入客戶端的Javascript腳本，可以提高程序的運(yùn)行效率并提供更友好的用戶界面。