在ASP.Net中应用Javascript-优快云博客

概要

本文结合示例讲述了在ASP.net应用程序中如何利用客户端的Javascript脚本提高程序的执行效率并实现更多的功能。

一、ASP.Net与Javascript

.Net是微软公司下一代的战略核心，ASP.Net是.Net战略在Web开发方面的具体实现。它继承了ASP的简单性和易用性，同时克服了ASP程序结构化较差，难于阅读和理解的缺点。特别是服务器端控件和事件驱动模式的引入，使得Web应用程序的开发更接近于过去桌面程序的开发。

在各种各样介绍ASP.Net的文章和书籍中，都把重点放在了服务器控件和.NetFrameworkSDK上，因为这是ASP.Net中最新和最具革命性的改进；与此相反，在过去的Web开发中占据重要地位的客户端脚本Javascript(也包括VBScript)则鲜有提及，似乎有了服务器端程序，已经不需要客户端脚本了。但是，服务器端的程序毕竟需要一次浏览器与Web服务器的交互，对于ASP.Net来说，就是一次页面的提交，需要来回传送大量的数据，而很多工作，比如输入验证或者删除确认等，完全可以用Javascript来实现。因此，探讨在ASP.Net中如何使用Javascript仍然很有必要。

二、Javascript的应用示例

1．为页面上的某个服务器控件添加Javascript事件

服务器控件最终生成的仍然是普通的HTML,比如<asp:textbox>生成inputtext。表单中的每个HTML控件都有它自己的Javascript事件，比如Textbox有onchange事件，Button有onclick事件，Listbox有onchange事件等。要想为服务器控件添加客户端的事件，需要用到Attributes属性。Attributes属性是所有的服务器控件都有的一个属性，它用来为最终生成的HTML添加自定义的一些标记。假设WebForm上有一个保存按钮btnSave,希望在用户点此按钮时提示用户是否确实要保存(比如一旦保存就无法恢复等)，则应在Page_Load事件中添加如下代码：

ifnotpage.isPostBack()then

btnSave.Attributes.Add(“onclick”,”Javascript:returnconfirm(‘Areyousuretosave?’);”)

endif

要注意的是‘return’，这是不可省的，否则即使用户点了取消，数据仍然会保存。

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

假设Datagrid的每一行有一个删除按钮，希望在用户点此按钮时提示用户是否确实要删除此条记录，以防用户点错了行，或仅仅是无意中点了删除按钮。

无论这个删除按钮是什么名字，都不能象上个例子那样直接引用，因为每一行都有这样一个按钮，它们是Datagrid中的子控件。在这种情况下，需要用到Datagrid的OnItemDataBound事件。OnItemDataBound事件发生在Datagrid的每一行数据绑定到Datagrid之后（即一行激发一次）。首先在Datagrid的声明中添加如下代码：

<asp:datagridid="grd1"runat="server"OnItemDataBound="ItemDataBound">

…Columnsdefinitionhere

</asp:datagrid>此处说明OnItemDataBound事件发生时调用ItemDataBound方法，在代码后置文件中添加此方法的定义：

SubItemDataBound(ByValsenderAsObject,ByValeAsDataGridItemEventArgs)

Ife.Item.ItemType<>ListItemType.HeaderAnde.Item.ItemType<>ListItemType.FooterThen

DimoDeleteButtonAsLinkButton=e.Item.Cells(5).Controls(0)

oDeleteButton.Attributes("onclick")="javascript:returnConfirm('Areyousureyouwanttodelete"&DataBinder.Eval(e.Item.DataItem,"m_sName")&"?')"

EndIf

EndSub

由于Datagrid的标题行和脚注行也会激发此事件，所以首先判断激发此事件的行不是标题行和脚注行。这里假设Delete按钮位于Datagrid的第6列（第一列是0），且Datagrid的Datasource中包含名为”m_sName”的列

3．引用编辑状态下的Datagrid中的控件

Datagrid的内置编辑功能使得当记录的字段较少时的一种编辑方法。用户不必进入一个单独的页面编辑记录，而是直接点编辑按钮就可以使当前行进入编辑模式。而另一方面，有一些Javascript程序需要引用控件的名称。比如，很多程序在需要用户输入日期时都提供一个日期控件以保证日期格式的合法性，当用户点控件图标时弹出一个新窗口供用户选择日期。此时需要把显示日期的文本框的ID提供给新窗口，以便当用户选择日期后值可以回填到文本框中。

如果是普通的服务器文本框控件，它的ID与生成的HTML输入框的ID是相同的；但是在Datagrid的编辑状态下，两个ID并不相同（其道理与上例相同），这就需要用到控件的ClientID属性。

ProtectedSubItemEdit(ByValsourceAsObject,ByValeAsSystem.Web.UI.WebControls.DataGridCommandEventArgs)

DimsDateCtrlasstring

sDateCtrl=grd1.Items(e.Item.ItemIndex).Cells(2).FindControl("txtDate").ClientID

EndSub

这里假设ItemEdit方法是Dategrid的OnItemEdit事件处理程序，同时在Datagrid的第三列包含一个名为txtDate的服务器文本框控件。

4．引用ASP.Net自动生成的Javascript程序

所谓的“服务器端控件”是针对开发人员的，在生成的HTML源程序中并没有服务器和客户端之分，都是标准的HTML,DHTML和Javascript。它之所以能响应用户的输入是因为每个控件的事件处理程序最终都生成了一段脚本，此脚本重新提交页面使得WebServer有机会再次响应并作出处理。通常情况下我们不必知道此脚本是什么也不必直接调用此脚本，但在有些情况下，适当地调用此脚本可以简化许多工作。请看下面两个例子。

●点Datagrid的任一位置以选中一行

Datagrid提供了一种内置的选择按钮,当点此按钮时选中当前行（可以设置SelectedItemStyle属性以使当前行有不同的外观）。但用户可能更习惯于点任意一个位置都能选中一行，如果完全自己实现这个功能相当烦琐。一个好的思路是添加一个选择按钮，但使此列隐藏，当点任一行时调用此按钮产生的Javascript脚本。

SubItem_Bound(ByValsenderAsObject,ByValeAsDataGridItemEventArgs)

DimitemTypeAsListItemType

itemType=CType(e.Item.ItemType,ListItemType)

If(itemType<>ListItemType.Header)And_

(itemType<>ListItemType.Footer)And_

(itemType<>ListItemType.Separator)Then

DimoSelectAsLinkButton=CType(e.Item.Cells(5).Controls(0),LinkButton)

e.Item.Attributes("onclick")=Page.GetPostBackClientHyperlink(oSelect,"")

EndSub

这里假设选择按钮位于第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方法如下：

DimsCmdasstring

sCmd=Page.GetPostBackClientHyperlink(btnUpdate,"")

Ifnotpage.isPostbackthen

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

Endif

ConfirmUpdate函数如下

<Scriptlanguage=”javascript”>

functionConfirmUpdate(cmd){

ifconfirm(“Areyousuretoupdate?”)

eval(cmd);

}