从 ASP.NET 服务器控件插入客户端脚本

简介

尽管从技术角度讲Microsoft? ASPNET 服务器控件的所有功能都可以在服务器端执行但通常情况下通过添加客户端脚本可以大大增强服务器控件的可用性例如ASPNET 验证 Web 控件可以在服务器端执行所有的验证检查但是对于高版本浏览器验证 Web 控件也会发送客户端脚本以在客户端进行验证这就是说这些浏览器的用户可以获得响应效果更好的动态体验

在开发 ASPNET 服务器控件时您不妨问问自己如何才能通过使用客户端脚本来增强可用性一旦找到可行的方案其他要做的就是增强服务器控件的功能以使其发送合适的客户端脚本

ASPNET 服务器控件可以发送两种客户端脚本

客户端脚本块

客户端 HTML 属性

客户端脚本块通常是用 JavaScript 编写的其中通常包含在发生特定的客户端事件时执行的函数客户端 HTML 属性提供将客户端事件与客户端脚本联系在一起的方法例如以下的 HTML 页面中包含了客户端脚本块脚本块中包含了名为 doClick() 的函数该页面同时还包含一个按钮（通过HTML 元素创建）这个按钮的 onclick 属性与 doClick() 函数绑定也就是说只要用户单击该按钮就开始执行 doClick() 函数中的客户端代码在本示例中将显示一个弹出式对话框（图 ）

对于以上 HTML 页面中的客户端脚本有几点值得注意首先客户端脚本块包含在 HTML 注释（）中之所以这样是因为如果不将脚本块放入 HTML 注释中那些不能识别脚本的旧式浏览器就会显示

在这段代码中 标记中的 onclick=displayPopup() 用于指明在单击按钮时JavaScript 函数 displayPopup() 应该运行

RegisterStartupScript() 方法可用于添加要在加载页面后运行的脚本块通过这种方法添加的脚本块位于 Web 窗体的结尾处因为必须在脚本运行前定义脚本要修改的 HTML 元素也就是说如果您要使用客户端脚本将焦点设置到文本框必须确保文本框的 HTML 标记位于设置该文本框的焦点的脚本之前例如下面的 HTML 将显示一个文本框并将焦点设置到该文本框

相反以下 HTML 不会将焦点设置到文本框因为文本框是在脚本块之后定义的

因此RegisterStartupScript() 方法将 ; scriptBlock = scriptBlockReplace(%%POPUP_MESSAGE%% thisPopupMessage); PageRegisterStartupScript(scriptKey scriptBlock); } } } }

请记住下面两件事首先Enabled 和 PopupMessage 属性保存在 ViewState 中这样在回传时这些值可以始终保持一致 其次在 OnPreRender() 方法中用于脚本块的关键字是文本 intoPopupMessage: 加上控件的 UniqueID 属性如果使用一个硬编码的关键字则当页面中有多个控件时只有第一个控件能够注册其脚本块因此只显示一个弹出式对话框通过在脚本块关键字中使用 UniqueID就能保证该控件的每个实例都能获取其脚本块

在注册脚本块之前代码首先检查三个条件

没有使用同一关键字注册的脚本这当然是不可能的因为每个控件实例都应该有一个 UniqueID 属性值但是不妨先练习使用 IsStartupScriptRegistered() 方法然后再花时间创建和注册启动脚本

控件的 Enabled 属性为 True

页面没有被回传这段代码只允许弹出式对话框在第一次加载页面时显示而不是在每次回传页面时都显示我们还可以增添更为灵活的功能即为该控件添加一个布尔属性以允许用户指定是否在回传时也生成弹出式对话框

如果满足这三个条件则脚本被指定并且 PopupMessage 属性值被插入到脚本中适当的位置最后调用 Page 属性的 RegisterStartupScript() 方法传入关键字及脚本代码

PopupGreeting 代码可以从本文结尾处提供的下载中获得该下载包括名为 ClientSideControlsAndTester 的 Visual Studio NET 解决方案其中包含两个项目

ClientSideControls包含 PopupGreeting 服务器控件

ClientSideTester包括一个为测试 ClientSideControls 而设计的 ASPNET Web 应用程序

ClientSideControls 项目编译后的程序集名为 ClientSideControlsdll要在您自己的 ASPNET Web 应用程序中使用 PopupGreeting 服务器控件请将 ClientSideControlsdll 文件添加到您的 Web 应用程序的引用中然后在设计器中右键单击 Toolbox（工具箱）并选择Add/Remove Items （添加/删除项）再次选择 ClientSideControlsdll 文件这样就向 Toolbox（工具箱）中添加了名为 PopupGreeting 的新项然后您可以从 Toolbox（工具箱）将该控件拖到设计器中

图 显示了 PopupGreeting 控件添加到 Toolbox（工具箱）并添加到设计器后Visual Studio NET 的屏幕快照Toolbox（工具箱）中的 PopupGreeting 控件用红色线圈出设计器中的 PopupGreeting 输出用蓝色线圈出在屏幕快照右侧的Properties（属性）窗格中可以查看 PopupGreeting 的属性

发送 ASPNET 服务器 Web 控件的 HTML 属性

如上所述有两种方法可以通过服务器控件发送客户端脚本

通过使用客户端脚本块

通过 HTML 元素属性

在上一节中我们探讨了如何使用 Page 类的 RegisterStartupScript() 和 RegisterClientScriptBlock() 方法向 ASPNET Web 页面添加客户端脚本块在最后这一节我们了解如何将 HTML 元素属性添加到服务器控件的 HTML 元素

在开始之前请注意这种方法通常只适用于从 SystemWebUIWebControlsWebControl 类导出的服务器控件因为从这个类导出的控件会发送某些 HTML 元素不发送 HTML 元素的服务器控件（如上一节中的 PopupGreeting 服务器控件）则不必写出 HTML 元素属性因为这些控件运行时不会写出 HTML 元素

WebControl 类包含一个将 HTML 元素属性添加到由 Web 控件发出的 HTML 元素的方法该方法称为 AddAttributesToRender()它只有一个输入参数即 HtmlTextWriter 的实例要向 Web 控件添加 HTML 属性您可以使用 HtmlTextWriter 的以下两个方法之一

AddAttribute()

AddStyleAttribute()

AddAttribute() 方法用于将 titleclassstyle 和 onclick 等 HTML 属性添加到 HTML 元素AddStyleAttribute() 用于将样式设置添加到 HTML 元素如 backgroundcolorcolor 和 fontsize 等

AddAttribute() 有几个重载窗体但在代码中我们将使用以下窗体AddAttribute(HtmlTextWriterAttribute value)第一个参数即 HtmlTextWriterAttribute应该是 HtmlTextWriterAttribute 枚举的成员该枚举包含像 AlignBgcolorClass 和 Onclick 等项您可以在 NET Framework Class LibraryHtmlTextWriterAttribute Enumeration 中找到完整的列表value 输入参数用于指定分配给特定 HTML 属性的值最后如果您想添加一个 HtmlTextWriterAttribute 枚举中未定义的 HTML 属性可以使用 AddAttribute() 方法的替代形式 AddAttribute(attributeName value)其中的 attributeName 和 value 均为字符串

为了运用该信息我们创建一个作为确认按钮的服务器 Web 控件确认按钮是一种提交按钮当用户单击此按钮时将显示一个弹出式对话框询问用户是否确定要继续操作用户可以单击取消不提交窗体此项功能对用于删除信息的按钮特别有用因为最终用户（或网站管理员）可能会在无意中单击鼠标删除数据库中的条目如果没有机会取消将是非常令人烦恼的事

为了减少工作量我们从 SystemWebUIWebControlsButton 类中导出 ConfirmButton Web 控件因为这个类本身已完成了涉及呈现提交按钮的所有繁重工作在导出的类中我们只需添加一个属性这样用户可以指定确认消息然后覆盖按钮的 AddAttributesToRender() 方法并添加一个属性以处理客户端事件 onclick

首先在 Visual Studio NET 中创建一个新的 Web Control Library（Web 控件库）项目或者在 ClientSideControls 项目中添加一个新的 Web Custom Control（Web 自定义控件）ConfirmButton 类的完整源代码如下所示

using System; using SystemWebUI; using SystemWebUIWebControls; using SystemComponentModel; namespace ClientSideControls { ////// ConfirmButton 的摘要描述 ///[DefaultProperty(Text) ToolboxData(<{0}:ConfirmButton runat=server>)] public class ConfirmButton : Button { [Bindable(true) Category(Appearance) DefaultValue()] public string PopupMessage { get { // 检查 ViewState 中是否存在该项目 object popupMessage = thisViewState[PopupMessage]; if (popupMessage != null) return thisViewState[PopupMessage]ToString(); else return Are you sure you want to continue?; } set { // 指定 ViewState 变量 ViewState[PopupMessage] = value; } } protected override void AddAttributesToRender(HtmlTextWriter writer) { baseAddAttributesToRender(writer); string script = @return confirm(%%POP