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

一、asp.net與javascript

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

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

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

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

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

if not page.ispostback() then

btnsave.attributes.add(“onclick”,”javascript:return confirm(‘a(chǎn)re 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ò)了行，或僅僅是無意中點(diǎn)了刪除按鈕。

無論這個(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> 此處說明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ú)的頁面編輯記錄，而是直接點(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ì)開發(fā)人員的，在生成的html源程序中并沒有服務(wù)器和客戶端之分，都是標(biāo)準(zhǔn)的html,dhtml和javascript。它之所以能響應(yīng)用戶的輸入是因?yàn)槊總€(gè)控件的事件處理程序最終都生成了一段腳本，此腳本重新提交頁面使得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方法返回頁面中l(wèi)inkbutton控件產(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ù)庫（雖然不是很常見，但確實(shí)有這種需要），但同時(shí)還希望提醒用戶是否確實(shí)要做保存。顯然，保存的代碼應(yīng)該放在selectedindexchanged事件中，而提醒的工作應(yīng)該手工加一段onchange事件。結(jié)果就是兩個(gè)onchange只能執(zhí)行一個(gè)。正確的方法應(yīng)該是添加一個(gè)不可見的保存按鈕，在手工增加的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ù)來調(diào)用一個(gè)字符串中包含的命令。需注意的是包含命令的字符串不能用單引號(hào)括起來，因?yàn)樽詣?dòng)生成的腳本中包括單引號(hào)，所以這里用兩個(gè)雙引號(hào)表示字符串本身的雙引號(hào)。

三、結(jié)束語

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

商業(yè)源碼熱門下載www.html.org.cn