日期:2009-02-16  浏览次数:20433 次

概要

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


关键字

服务器脚本,客户端脚本,.Net,代码后置

一.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

End Sub