简介 尽管从技术角度讲,Microsoft? ASP.NET 服务器控件的所有功能都可以在服务器端执行,但通常情况下通过添加客户端脚本可以大大增强服务器控件的可用性。例如,ASP.NET 验证 Web 控件可以在服务器端执行所有的验证检查。但是,对于高版本浏览器,验证 Web 控件也会发送客户端脚本,以在客户端进行验证。这就是说,这些浏览器的用户可以获得响应效果更好的动态体验。
在开发 ASP.NET 服务器控件时,您不妨问问自己,如何才能通过使用客户端脚本来增强可用性。一旦找到可行的方案,其他要做的就是增强服务器控件的功能,以使其发送合适的客户端脚本。
ASP.NET 服务器控件可以发送两种客户端脚本:
客户端脚本块 客户端 HTML 属性 客户端脚本块通常是用 JavaScript 编写的,其中通常包含在发生特定的客户端事件时执行的函数。客户端 HTML 属性提供将客户端事件与客户端脚本联系在一起的方法。例如,以下的 HTML 页面中包含了客户端脚本块,脚本块中包含了名为 doClick() 的函数。该页面同时还包含一个按钮(通过 HTML 元素创建),这个按钮的 onclick 属性与 doClick() 函数绑定。也就是说,只要用户单击该按钮,就开始执行 doClick() 函数中的客户端代码。在本示例中,将显示一个弹出式对话框(图 1)。
图 1 是单击“Click Me!”按钮时 HTML 页面的屏幕快照
对于以上 HTML 页面中的客户端脚本,有几点值得注意。首先,客户端脚本块包含在 HTML 注释()中。之所以这样,是因为如果不将脚本块放入 HTML 注释中,那些不能识别脚本的旧式浏览器就会显示
RegisterStartupScript() 方法可用于添加要在加载页面后运行的脚本块。通过这种方法添加的脚本块位于 Web 窗体的结尾处,因为必须在脚本运行前定义脚本要修改的 HTML 元素。也就是说,如果您要使用客户端脚本将焦点设置到文本框,必须确保文本框的 HTML 标记位于设置该文本框的焦点的脚本之前。例如,下面的 HTML 将显示一个文本框,并将焦点设置到该文本框:
发送 ASP.NET 服务器 Web 控件的 HTML 属性 如上所述,有两种方法可以通过服务器控件发送客户端脚本:
通过使用客户端脚本块 通过 HTML 元素属性 在上一节中,我们探讨了如何使用 Page 类的 RegisterStartupScript() 和 RegisterClientScriptBlock() 方法向 ASP.NET Web 页面添加客户端脚本块。在最后这一节,我们了解如何将 HTML 元素属性添加到服务器控件的 HTML 元素。
在开始之前,请注意这种方法通常只适用于从 System.Web.UI.WebControls.WebControl 类导出的服务器控件,因为从这个类导出的控件会发送某些 HTML 元素。不发送 HTML 元素的服务器控件(如上一节中的 PopupGreeting 服务器控件),则不必写出 HTML 元素属性,因为这些控件运行时不会写出 HTML 元素。
WebControl 类包含一个将 HTML 元素属性添加到由 Web 控件发出的 HTML 元素的方法。该方法称为 AddAttributesToRender(),它只有一个输入参数,即 HtmlTextWriter 的实例。要向 Web 控件添加 HTML 属性,您可以使用 HtmlTextWriter 的以下两个方法之一:
AddAttribute() AddStyleAttribute() AddAttribute() 方法用于将 title、class、style 和 onclick 等 HTML 属性添加到 HTML 元素。AddStyleAttribute() 用于将样式设置添加到 HTML 元素,如 background-color、color 和 font-size 等。
AddAttribute() 有几个重载窗体,但在代码中,我们将使用以下窗体:AddAttribute(HtmlTextWriterAttribute, value)。第一个参数,即 HtmlTextWriterAttribute,应该是 HtmlTextWriterAttribute 枚举的成员。该枚举包含像 Align、Bgcolor、Class 和 Onclick 等项。您可以在 .NET Framework Class Library,HtmlTextWriterAttribute Enumeration 中找到完整的列表。value 输入参数用于指定分配给特定 HTML 属性的值。最后,如果您想添加一个 HtmlTextWriterAttribute 枚举中未定义的 HTML 属性,可以使用 AddAttribute() 方法的替代形式 AddAttribute(attributeName, value),其中的 attributeName 和 value 均为字符串。
为了运用该信息,我们创建一个作为确认按钮的服务器 Web 控件。确认按钮是一种提交按钮,当用户单击此按钮时,将显示一个弹出式对话框,询问用户是否确定要继续操作。用户可以单击“取消”,不提交窗体。此项功能对用于删除信息的按钮特别有用,因为最终用户(或网站管理员)可能会在无意中单击鼠标删除数据库中的条目,如果没有机会取消,将是非常令人烦恼的事。
为了减少工作量,我们从 System.Web.UI.WebControls.Button 类中导出 ConfirmButton Web 控件,因为这个类本身已完成了涉及呈现提交按钮的所有繁重工作。在导出的类中,我们只需添加一个属性,这样用户可以指定确认消息,然后覆盖按钮的 AddAttributesToRender() 方法,并添加一个属性以处理客户端事件 onclick。
首先,在 Visual Studio .NET 中创建一个新的 Web Control Library(Web 控件库)项目,或者在 ClientSideControls 项目中添加一个新的 Web Custom Control(Web 自定义控件)。ConfirmButton 类的完整源代码如下所示:
using System; using System.Web.UI; using System.Web.UI.WebControls; using System.ComponentModel; 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 = this.ViewState["PopupMessage"]; if (popupMessage != null) return this.ViewState["PopupMessage"].ToString(); else return "Are you sure you want to continue?"; } set { // 指定 ViewState 变量 ViewState["PopupMessage"] = value; } } protected override void AddAttributesToRender(HtmlTextWriter writer) { base.AddAttributesToRender(writer); string script = @"return confirm(""%%POP