摘要:尽管 ASP.NET 在服务器上执行其大多数操作,但是某些操作在客户端进行处理可能会更好。Scott Mitchell 说明了 ASP.NET 页面和控件如何添加客户端代码。
本页内容
简介
创建基类作为添加客户端脚本的基础
从代码隐藏类添加客户端脚本
根据对用户操作的响应执行客户端代码
实现常用客户端功能
小结
相关书籍
简介
当使用动态的、基于 Web 的脚本技术时,与传统 ASP 或 PHP 类似,开发人员必须对客户端和服务器间的逻辑、暂时和物理分隔有着敏锐的理解。例如,对于触发服务器端代码执行的用户操作,使用传统 ASP 的开发人员必须明确地使用户的浏览器将请求返回到 Web 服务器。创建这样的交互可能会轻易地占用大量开发时间,并且导致不易读的代码。
Microsoft ASP.NET 通过使用 Web 窗体,有助于减轻将用户事件绑定到特定服务器端代码执行的负担,这就模糊了客户端和服务器间的界线。使用 ASP.NET 和最少的工作,开发人员就可以快速地创建如下的网页,它具有大量的交互式用户界面元素按钮、下拉列表等,而这些都基于最终用户的操作,可以选择性地运行服务器端代码。例如,利用 ASP.NET 添加下拉列表,只要选定的下拉列表项目更改则执行某些操作,您只需添加 DropDownList Web 控件、将其 AutoPostBack 属性设置为 True,然后为该下拉列表创建一个 SelectedIndexChanged 事件处理程序。如果利用传统的 ASP 完成上述任务,则会要求编写许多复杂的 HTML、客户端 javascript 和服务器端脚本代码;利用 ASP.NET,则为您提供了必要的脚本代码和服务器端事件模型。
尽管在执行客户端操作时,ASP.NET 中的 Web 窗体极大地简化了运行服务器端脚本,但是,如果误用这种功能可能会导致无法接受的性能。尽管 Web 窗体隐藏了所涉及的复杂性,每次需要执行服务器端代码时,最终用户的浏览器必须通过重新提交窗体,将请求返回到 Web 服务器。当提交窗体时,所有窗体字段(文本框、下拉列表和复选框等)必须同时返回它们的值。此外,页面的视图状态也被返回到 Web 服务器。总而言之,每次回发网页时,几千字节的数据将需要潜在地发送回 Web 服务器。于是,经常回发可能很快就会导致 Web 应用程序不可使用,尤其是对于那些仍然使用拨号连接的用户。通过将功能推到客户端可以降低经常回发的需要。
注 ASP.NET Web 窗体发出一个标题为 VIEWSTATE 的隐藏窗体字段,它包含 Web 窗体中 Web 控件已更改状态的基于 64 位编码的表示。根据出现的 Web 控件,视图状态的范围可以从几十字节到几万字节。要学习有关视图状态的更多知识,请查阅我的文章 Understanding ASP.NET View State。
利用传统的 ASP,添加数据驱动、自定义客户端脚本非常简单,但并不是非常易读。例如,要在传统的 ASP 中显示根据某个 ID 字段加载 URL 的弹出窗口,您可以使用 语法来插入 ID 字段的值,在适当的客户端脚本中进行输入。ASP.NET 允许您利用 Page 类中的各种方法,创建这种数据驱动的客户端脚本。
本文分析了向 ASP.NET 网页添加客户端脚本的技术。客户端脚本是运行在访问者浏览器中的脚本代码,如其名字所示。我们将看到如何完成常见的客户端任务,例如显示警告、确认框和弹出窗口。(客户端脚本窗体字段验证的一个主要用途可能与 ASP.NET 主题有点不相关,因为验证程序 Web 控件提供了随取随用的客户端窗体验证。)本文的重点在于插入客户端脚本的服务器端类、方法和技术;我们不会详细地分析实际的客户端脚本,因为该信息涉及了围绕 Web 的众多其他文章和站点。
返回页首
创建基类作为添加客户端脚本的基础
传统的 ASP 和 ASP.NET 之间的主要差别之一在于各自技术的编程模型。ASP 页面是原子的、程序上的脚本,解释每个页面的访问。然而,ASP.NET 完全是面向对象的编程技术。所有 ASP.NET 网页都是带有属性、方法和事件的类。所有网页直接或间接地派生自 System.Web.UI 命名空间中的 Page 类,Page 类包含了 ASP.NET 网页的基本功能。
面向对象编程的概念之一就是继承。继承使您可以创建一个扩展其他类功能的新类。(如果类 B 继承类 A,也可以说扩展了 A;类 A 被称为基类。)当使用代码隐藏模型来创建 ASP.NET 网页时,可以非常清楚地看到代码隐藏类继承了 Page 类:
Public Class WebForm1
Inherits System.Web.UI.Page
...
End Class
通过使您的代码隐藏类继承 Page 类,它自动接收在 Page 类中继承的功能,例如 Request、Response、Session 和 ViewState 对象以及常见事件,如 Init、Load、Render 等等。我们将在本文中看到,如果您需要可用于所有 ASP.NET 网页的某个常见功能,一种方法是创建派生自 Page 类并具有完成这些所需增强功能的其他方法和属性的类。然后,要使 ASP.NET 网页利用这些增强功能,我们只需更新页面代码隐藏类中的 Inherits 语句,以使用扩展 Page 类的类。
在本文中,我们将创建一个名为 ClientSidePage 的类,它派生自 Page 类并提供额外的方法以协助执行常见的客户端任务。通过让代码隐藏类继承 ClientSidePage,而不是继承 Page,添加脚本代码将会像调用方法和传送几个参数那样简单。具体说来,该类包括用于下列用途的方法:
• 显示模式客户端对话框。
• 在页面加载时将焦点设置到特定的窗体字段。
• 使用模式确定对话框来确定用户是否希望回发该窗体。
• 显示弹出窗口。
在我们深入研究 ClientSidePage 类之前,首先让我们分析一下 Page 类中的有关方法,以便将客户端脚本插入到网页中。在我们讨论这些 Page 方法后,我们将开始利用 ClientSidePage 类扩展它们的功能,并且查看如何将所有内容结合在一起以及如何在 ASP.NET 网页中使用扩展的类。
返回页首
从代码隐藏类添加客户端脚本
所有 ASP.NET 网页必须直接或间接地派生自 System.Web.UI 命名空间中的 Page 类。Page 类包含正常运行的网页所要求的方法、属性和事件的基本集合。在该类的众多方法中,一些方法旨在将客户端脚本插入到生成的 HTML 中。这些方法从代码隐藏类调用,因此可以用于发出数据驱动的客户端脚本。用于发出客户端脚本的相关 Page 类方法如下所示。
该基类派生自 System.Web.UI.Page 类,因此可以通过从代码隐藏类直接调用 Page 类的公共方法来访问它们。
注 要访问 Page 类的方法,您可以直接键入方法名,或者通过输入 MyBase.(对于 Microsoft Visual Basic .NET)、this. (对于 C#)或者 Page.(对于 C# 或 Visual Basic .NET),利用 Microsoft Visual Studio .NET 中的 IntelliSense 来实现。如果使用 Visual Basic .NET 作为选择的编程语言,请确保将 Visual Studio .NET 配置为不 隐藏高级成员,否则将无法看到这些客户端脚本方法。(要显示高级成员,请转到 Tools | Options | TextEditor | Basic,然后清除 Hide advanced members 复选框。)
RegisterClientScriptBlock(key, script)
在 Web 窗体已呈现的 <form> 元素之后,在包含于 Web 窗体中的任意 Web 控件之前,RegisterClientScriptBlock 方法会添加一个客户端脚本块。key 输入参数允许您指定与该脚本块相关联的唯一的密钥,而 script 参数包括要发出的完整的脚本代码。(这个 script 参数应该包括实际的