Asp.net與Javascript

本文結合示例講述了在ASP.net應用程式中如何利用用戶端的javascript腳本提高程式的執行效率并實作更多的功能。

一、ASP.Net與Javascript

.Net是微軟公司下一代的戰略核心，ASP.Net是.Net戰略在Web開發方面的具體實作。它繼承了ASP的簡單性和易用性，同時克服了ASP程式結構化較差，難于閱讀和了解的缺點。特别是伺服器端控件和事件驅動模式的引入，使得Web應用程式的開發更接近于過去桌面程式的開發。

在各種各樣介紹ASP.Net的文章和書籍中，都把重點放在了伺服器控件和.Net Framework SDK上，因為這是ASP.Net中最新和最具革命性的改進；與此相反，在過去的Web開發中占據重要地位的用戶端腳本Javascript(也包括VBScript)則鮮有提及，似乎有了伺服器端程式，已經不需要用戶端腳本了。但是，伺服器端的程式畢竟需要一次浏覽器與Web伺服器的互動，對于ASP.Net來說，就是一次頁面的送出，需要來回傳送大量的資料，而很多工作，比如輸入驗證或者删除确認等，完全可以用Javascript來實作。是以，探讨在ASP.Net中如何使用Javascript仍然很有必要。

二、Javascript的應用示例

1．為頁面上的某個伺服器控件添加Javascript事件

伺服器控件最終生成的仍然是普通的HTML,比如<asp:textbox>生成input text。表單中的每個HTML控件都有它自己的Javascript事件，比如Textbox有onchange事件，Button有onclick事件，Listbox有onchange事件等。要想為伺服器控件添加用戶端的事件，需要用到Attributes屬性。Attributes屬性是所有的伺服器控件都有的一個屬性，它用來為最終生成的HTML添加自定義的一些标記。假設Web Form上有一個儲存按鈕btnSave,希望在使用者點此按鈕時提示使用者是否确實要儲存(比如一旦儲存就無法恢複等)，則應在Page_Load事件中添加如下代碼：

if not page.isPostBack() then

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

end if

要注意的是‘return’，這是不可省的，否則即使使用者點了取消，資料仍然會儲存。

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

假設Datagrid的每一行有一個删除按鈕，希望在使用者點此按鈕時提示使用者是否确實要删除此條記錄，以防使用者點錯了行，或僅僅是無意中點了删除按鈕。

無論這個删除按鈕是什麼名字，都不能象上個例子那樣直接引用，因為每一行都有這樣一個按鈕，它們是Datagrid中的子控件。在這種情況下，需要用到Datagrid的OnItemDataBound事件。OnItemDataBound事件發生在Datagrid的每一行資料綁定到Datagrid之後（即一行激發一次）。首先在Datagrid的聲明中添加如下代碼：

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

…Columns definition here

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

3．引用編輯狀态下的Datagrid中的控件

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

如果是普通的伺服器文本框控件，它的ID與生成的HTML輸入框的ID是相同的；但是在Datagrid的編輯狀态下，兩個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

這裡假設ItemEdit方法是Dategrid的OnItemEdit事件處理程式，同時在Datagrid的第三列包含一個名為txtDate的伺服器文本框控件。

4．引用ASP.Net自動生成的Javascript程式

所謂的“伺服器端控件”是針對開發人員的，在生成的HTML源程式中并沒有伺服器和用戶端之分，都是标準的HTML,DHTML和Javascript。它之是以能響應使用者的輸入是因為每個控件的事件處理程式最終都生成了一段腳本，此腳本重新送出頁面使得Web Server有機會再次響應并作出處理。通常情況下我們不必知道此腳本是什麼也不必直接調用此腳本，但在有些情況下，适當地調用此腳本可以簡化許多工作。請看下面兩個例子。

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

Datagrid提供了一種内置的選擇按鈕,當點此按鈕時選中目前行（可以設定SelectedItemStyle屬性以使目前行有不同的外觀）。但使用者可能更習慣于點任意一個位置都能選中一行，如果完全自己實作這個功能相當煩瑣。一個好的思路是添加一個選擇按鈕，但使此列隐藏，當點任一行時調用此按鈕産生的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, "")

這裡假設選擇按鈕位于第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方法如下：

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函數來調用一個字元串中包含的指令。需注意的是包含指令的字元串不能用單引号括起來，因為自動生成的腳本中包括單引号，是以這裡用兩個雙引号表示字元串本身的雙引号。

三、結束語