概要 本文结合示例讲述了在应用程序中如何利用客户端的Javascript脚本提高程序的执行效率并实现更多的功能
一ASPNet与Javascript
Net是微软公司下一代的战略核心ASPNet是Net战略在Web开发方面的具体实现它继承了ASP的简单性和易用性同时克服了ASP程序结构化较差难于阅读和理解的缺点特别是服务器端控件和事件驱动模式的引入使得Web应用程序的开发更接近于过去桌面程序的开发
在各种各样介绍ASPNet的文章和书籍中都把重点放在了服务器控件和Net Framework SDK上因为这是ASPNet中最新和最具革命性的改进与此相反在过去的Web开发中占据重要地位的客户端脚本Javascript（也包括VBScript）则鲜有提及似乎有了服务器端程序已经不需要客户端脚本了但是服务器端的程序毕竟需要一次浏览器与Web服务器的交互对于ASPNet来说就是一次页面的提交需要来回传送大量的数据而很多工作比如输入验证或者删除确认等完全可以用Javascript来实现因此探讨在ASPNet中如何使用Javascript仍然很有必要
二Javascript的应用示例
为页面上的某个服务器控件添加Javascript事件
服务器控件最终生成的仍然是普通的HTML比如<asptextbox>生成input text表单中的每个HTML控件都有它自己的Javascript事件比如Textbox有onchange事件Button有onclick事件Listbox有onchange事件等要想为服务器控件添加客户端的事件需要用到Attributes属性Attributes属性是所有的服务器控件都有的一个属性它用来为最终生成的HTML添加自定义的一些标记假设Web Form上有一个保存按钮btnSave希望在用户点此按钮时提示用户是否确实要保存（比如一旦保存就无法恢复等）则应在Page_Load事件中添加如下代码
if not pageisPostBack（） then
btnSaveAttributesAdd（onclickJavascriptreturn confirm（Are you sure to save？））
end if
要注意的是return这是不可省的否则即使用户点了取消数据仍然会保存
为Datagrid中的每一行添加Javascript事件
假设Datagrid的每一行有一个删除按钮希望在用户点此按钮时提示用户是否确实要删除此条记录以防用户点错了行或仅仅是无意中点了删除按钮
无论这个删除按钮是什么名字都不能象上个例子那样直接引用因为每一行都有这样一个按钮它们是Datagrid中的子控件在这种情况下需要用到Datagrid的OnItemDataBound事件OnItemDataBound事件发生在Datagrid的每一行数据绑定到Datagrid之后（即一行激发一次）首先在Datagrid的声明中添加如下代码
<aspdatagrid id=grd runat=server OnItemDataBound = ItemDataBound >
…Columns definition here
</aspdatagrid> 此处说明OnItemDataBound事件发生时调用ItemDataBound方法在代码后置文件中添加此方法的定义
Sub ItemDataBound（ByVal sender As Object ByVal e As DataGridItemEventArgs）
If eItemItemType <> ListItemTypeHeader And eItemItemType <> ListItemTypeFooter Then
Dim oDeleteButton As LinkButton = eItemCells（）Controls（）
oDeleteButtonAttributes（onclick） = javascriptreturn Confirm （Are you sure you want to delete & DataBinderEval（eItemDataItem m_sName） & ？）
End If
End Sub
由于Datagrid的标题行和脚注行也会激发此事件所以首先判断激发此事件的行不是标题行和脚注行这里假设Delete按钮位于Datagrid的第列（第一列是）且Datagrid的Datasource中包含名为m_sName的列
引用编辑状态下的Datagrid中的控件
Datagrid的内置编辑功能使得当记录的字段较少时的一种编辑方法用户不必进入一个单独的页面编辑记录而是直接点编辑按钮就可以使当前行进入编辑模式而另一方面有一些Javascript程序需要引用控件的名称比如很多程序在需要用户输入日期时都提供一个日期控件以保证日期格式的合法性当用户点控件图标时弹出一个新窗口供用户选择日期此时需要把显示日期的文本框的ID提供给新窗口以便当用户选择日期后值可以回填到文本框中
如果是普通的服务器文本框控件它的ID与生成的HTML输入框的ID是相同的但是在Datagrid的编辑状态下两个ID并不相同（其道理与上例相同）这就需要用到控件的ClientID属性
Protected Sub ItemEdit（ByVal source As Object ByVal e As SystemWebUIWebControlsDataGridCommandEventArgs）
Dim sDateCtrl as string
sDateCtrl = grd Items （eItemItemIndex） Cells（） FindControl（txtDate） ClientID
End Sub
这里假设ItemEdit方法是Dategrid的OnItemEdit事件处理程序同时在Datagrid的第三列包含一个名为txtDate的服务器文本框控件
引用ASPNet自动生成的Javascript程序
所谓的服务器端控件是针对开发人员的在生成的HTML源程序中并没有服务器和客户端之分都是标准的HTMLDHTML和Javascript它之所以能响应用户的输入是因为每个控件的事件处理程序最终都生成了一段脚本此脚本重新提交页面使得Web Server有机会再次响应并作出处理通常情况下我们不必知道此脚本是什么也不必直接调用此脚本但在有些情况下适当地调用此脚本可以简化许多工作请看下面两个例子
● 点Datagrid的任一位置以选中一行
Datagrid提供了一种内置的选择按钮当点此按钮时选中当前行（可以设置SelectedItemStyle属性以使当前行有不同的外观）但用户可能更习惯于点任意一个位置都能选中一行如果完全自己实现这个功能相当烦琐一个好的思路是添加一个选择按钮但使此列隐藏当点任一行时调用此按钮产生的Javascript脚本
Sub Item_Bound（ByVal sender As Object ByVal e As DataGridItemEventArgs ）
Dim itemType As ListItemType
itemType = CType（eItemItemType ListItemType）
If （itemType <> ListItemTypeHeader） And _
（itemType <> ListItemTypeFooter） And _
（itemType <> ListItemTypeSeparator） Then
Dim oSelect As LinkButton = CType（eItemCells（）Controls（） LinkButton）
eItemAttributes（onclick） = Page GetPostBackClientHyperlink （oSelect ）
End Sub
这里假设选择按钮位于第列eItem代表了一行从生成的HTML上看就是在每个<tr>里增加了一个onclick事件PageGetPostBackClientHyperLink方法返回页面中LinkButton控件产生的客户端脚本其中第一个参数是Linkbutton控件第二个参数是传递给此控件的参数通常为空如果不是LinkButton控件有一个类似的函数GetPostBackClientEvent读者可以参考MSDN
● 服务器产生的脚本与手工添加的脚本沖突
服务器控件的服务器事件一般对应到客户端控件的相应事件如Dropdownlist的SelectedIndexChanged事件对应HTML <Select>的onchange事件如果你要手工增加一个onchange事件则会在客户端产生两个onchange浏览器就会忽略掉一个比如用户希望每当改变了Dropdownlist中的选项就保存到数据库（虽然不是很常见但确实有这种需要）但同时还希望提醒用户是否确实要做保存显然保存的代码应该放在SelectedIndexChanged事件中而提醒的工作应该手工加一段onchange事件结果就是两个onchange只能执行一个正确的方法应该是添加一个不可见的保存按钮在手工增加的onchange事件中调用此按钮生成的程序
Page_Load方法如下
Dim sCmd as string
sCmd=PageGetPostBackClientHyperlink（btnUpdate ）
If not pageisPostback then
DropdownlistAttributesadd（onchangeConfirmUpdate（ & sCmd & ））
End if
ConfirmUpdate函数如下
<Script language=javascript>
function ConfirmUpdate（cmd）{
if confirm（Are you sure to update？）
eval（cmd）
}
</Script>
这里利用了Javascript eval函数来调用一个字符串中包含的命令需注意的是包含命令的字符串不能用单引号括起来因为自动生成的脚本中包括单引号所以这里用两个双引号表示字符串本身的双引号
三结束语
以上简单讨论了在ASPNet中插入Javascript的几种情况合理地在服务器程序中插入客户端的Javascript脚本可以提高程序的运行效率并提供更友好的用户界面
