摘要尽管从技术角度讲ASPNET 服务器控件的所有功能都可以在服务器端执行但通常情况下通过添加客户端脚本可以大大增强服务器控件的可用性本文将探讨服务器控件发送客户端脚本的两种方法还将构建两个使用这些技术的服务器控件PopupGreeting一个在首次加载的 Web 页面上显示带有特定消息的客户端模式对话框的服务器控件ConfirmButton一个增强的 Button Web 控件如果用户点击此按钮则在发回 Web 窗体前向用户显示一个 JavaScript confirm() 的对话框
简介
尽管从技术角度讲Microsoft? ASPNET 服务器控件的所有功能都可以在服务器端执行但通常情况下通过添加客户端脚本可以大大增强服务器控件的可用性例如ASPNET 验证 Web 控件可以在服务器端执行所有的验证检查但是对于高版本浏览器验证 Web 控件也会发送客户端脚本以在客户端进行验证这就是说这些浏览器的用户可以获得响应效果更好的动态体验
在开发 ASPNET 服务器控件时您不妨问问自己如何才能通过使用客户端脚本来增强可用性一旦找到可行的方案其他要做的就是增强服务器控件的功能以使其发送合适的客户端脚本
ASPNET 服务器控件可以发送两种客户端脚本
◆ 客户端脚本块
◆ 客户端 HTML 属性
客户端脚本块通常是用 JavaScript 编写的其中通常包含在发生特定的客户端事件时执行的函数客户端 HTML 属性提供将客户端事件与客户端脚本联系在一起的方法例如以下的 HTML 页面中包含了客户端脚本块脚本块中包含了名为 doClick() 的函数该页面同时还包含一个按钮（通过 ＜input＞ HTML 元素创建）这个按钮的 onclick 属性与 doClick() 函数绑定也就是说只要用户单击该按钮就开始执行 doClick() 函数中的客户端代码在本示例中将显示一个弹出式对话框（图 ）
＜html＞
＜body＞
＜form＞
＜script language=JavaScript＞
＜!
function doClick() {
alert(You clicked me!);
}
// ＞
＜/script＞
＜input type=button onclick=doClick() value=Click Me! /＞
＜/form＞
＜/body＞
＜/html＞
图是单击Click Me!按钮时 HTML 页面的屏幕快照
图 单击Click Me!按钮时显示的弹出式对话框
对于以上 HTML 页面中的客户端脚本有几点值得注意首先客户端脚本块包含在 HTML 注释（＜! 和 ＞）中之所以这样是因为如果不将脚本块放入 HTML 注释中那些不能识别脚本的旧式浏览器就会显示 ＜script＞ 块的内容此外还要注意脚本块中 HTML 注释的结束标记前有一个 JavaScript 注释即 //这是因为旧版本的 Netscape 在遇到 ＞ 时会抛出 JavaScript 分析异常因此必须将其注释掉幸运的是现代的浏览器已不需要这一额外操作所以在为 Intranet 或其他由浏览器控制的环境开发 Web 页面时您就不必采取此类预防措施了
如果您对客户端脚本不是很熟悉alert(string) 函数的作用就是显示一个模式弹出式对话框对话框中包含的消息由 string 参数指定所有 HTML 元素都有若干个可以绑定一段客户端 JavaScript 代码的客户端属性（例如onclickonmouseoveronmouseoutonfocus 和 onblur 等等）例如在上面的 HTML 页面中＜input＞ 元素的 onclick 属性绑定到 doClick() 函数因此在单击该按钮时将执行 doClick() 函数有关 JavaScript 事件及其关联的 HTML 属性的列表请参阅 Introduction to Dynamic HTML 一文有关客户端 JavaScript 的详细信息请参阅 HTML and Dynamic HTML 一文
在本文中我们将学习如何在 ASPNET 服务器控件中发送客户端脚本块和 HTML 元素属性我们首先讨论如何使用 SystemWebUIPage 类中的两个方法来向 ASPNET Web 页面添加客户端脚本块这两个方法是 RegisterStartupScript() 和 RegisterClientScriptBlock()掌握这一知识后我们将构建一个简单的服务器控件让这个控件在每次加载页面时显示一个客户端弹出式对话框之后我们再来了解如何将 HTML 属性添加到 ASPNET 服务器控件的 HTML 元素最后我们将归纳所有知识实际构建一个 ConfirmButton Web 控件当单击这个控件时将向用户提示一个对话框询问用户是否要继续
使用 RegisterStartupScript() 和 RegisterClientScriptBlock() 添加客户端脚本块
SystemWebUIPage 类包含的两个方法可以将客户端脚本代码发送到由 ASPNET Web 页面提供的 HTML 中
RegisterStartupScript(key script)
RegisterClientScriptBlock(key script)
这两个方法都接受两个字符串作为输入第二个参数 script 是要插入到页面中的客户端脚本包括 ＜script＞ 的起始标记和终止标记第一个参数 key 是插入的客户端脚本的唯一标识符
这两个方法唯一的不同之处在于从何处发送脚本块RegisterClientScriptBlock() 在 Web 窗体的开始处（紧接着 ＜form runat=server＞ 标识之后）发送脚本块而 RegisterStartupScript() 在 Web 窗体的结尾处（在 ＜/form＞ 标识之前）发送脚本块
为什么会有两种不同的方法来发送客户端脚本？要更好地了解这一点我们必须首先了解客户端脚本可以分为两类一类是在加载页面后立即运行的代码一类是在发生某些客户端事件时才运行的代码前者的常见示例是将焦点设置到文本框的客户端代码例如当您访问 Google 时在页面加载后就会执行一小段客户端代码以自动将焦点设置到搜索文本框
以下是后一类代码（为响应客户端事件而运行的代码）的示例具体而言在该示例中单击按钮时将显示一个弹出式对话框
＜html＞
＜body＞
＜form＞
＜script language=JavaScript＞
＜!
function displayPopup() {
alert(Hello world);
}
// ＞
＜/script＞
＜input type=button value=Click Me! onclick=displayPopup() /＞
＜/form＞
＜/body＞
＜/html＞
在这段代码中＜input＞ 标记中的 onclick=displayPopup() 用于指明在单击按钮时JavaScript 函数 displayPopup() 应该运行
RegisterStartupScript() 方法可用于添加要在加载页面后运行的脚本块通过这种方法添加的脚本块位于 Web 窗体的结尾处因为必须在脚本运行前定义脚本要修改的 HTML 元素也就是说如果您要使用客户端脚本将焦点设置到文本框必须确保文本框的 HTML 标记位于设置该文本框的焦点的脚本之前例如下面的 HTML 将显示一个文本框并将焦点设置到该文本框
＜input type=text id=myTextBox /＞
＜script language=JavaScript＞
＜!
documentgetElementById(myTextBox)focus();
// ＞
＜/script＞
相反以下 HTML 不会将焦点设置到文本框因为文本框是在脚本块之后定义的
＜script language=JavaScript＞
＜!
documentgetElementById(myTextBox)focus();
// ＞
＜/script＞
＜input type=text id=myTextBox /＞
因此RegisterStartupScript() 方法将 ＜script＞ 块置于 Web 窗体的结尾处以保证在执行客户端脚本之前已声明 Web 窗体中的所有 HTML 元素
RegisterClientScriptBlock() 方法用于为响应客户端事件而执行的脚本代码通过此方法发送的脚本块位于 Web 页面的开始处因为这种方法不要求将脚本块置于所有 HTML 元素之后
探讨IsStartupScriptRegistered() 和 IsClientScriptBlockRegistered()
除RegisterStartupScript() 和 RegisterClientScriptBlock() 方法之外Page 类还包含两个在发送客户端脚本时常用的辅助方法
IsStartupScriptRegistered(key)
IsClientScriptBlockRegistered(key)
如上所述在使用 RegisterStartupScript() 或 RegisterClientScriptBlock() 插入客户端脚本块时提供了一个唯一标识脚本块的关键字这两个方法都接受一个输入（字符串 key）并返回一个布尔值以指示带有指定关键字的脚本块是否已添加到页面中具体地说如果带有特定 key 的脚本块已经注册这些方法将返回 True否则将返回 False
要了解如何使用这两个方法可以看一看 ASPNET 验证 Web 控件如 RequiredFieldValidatorRegularExpressionValidator 等等这些控件都会用到一个常用的验证 JavaScript 文件 (WebValidationjs)该文件位于 ASPNET Web 应用程序的 aspnet_client/system_web/版本号 目录中因此所有这些控件都会发送相同的脚本块这个脚本块将调用在 WebValidationjs 文件中定义的相应的 JavaScript 函数以启动客户端的验证过程要完成这个过程这些控件会使用 Page 类的 RegisterClientScriptBlock() 方法并使用关键字 ValidatorIncludeScript
接下来要考虑的是如果一个 ASPNET Web 页面中包含多个验证 Web 控件会出现什么情况呢？所有这些 Web 控件都要使用相同的关键字发送相同的脚本块如果使用这个关键字调用两次 RegisterClientScriptBlock() 或 RegisterStartupScript() 方法则第二次调用会被认为是复制脚本块而被忽略因此即使一个 Web 页面上有多个验证控件也只是发送一个公共脚本块的实例但是请注意除第一个控件之外的其他所有验证 Web 控件都会构建要发送的公共客户端脚本而这只是在浪费时间
这时就应该使用 IsClientScriptBlock() 和 IsStartupScript() 方法这样一来验证 Web 控件就不会先花时间构建要发送的客户端代码而是先检查是否已经存在使用关键字 ValidatorIncludeScript 注册的脚本如果存在控件就会放弃构建客户端脚本块因为脚本块已经由页面上的其他验证控件构建了
因此每次构建客户端脚本时应该首先调用 IsClientScriptBlock() 或 IsStartupScript() 方法以确定是否需要生成客户端脚本在下面一节我们将看到一些示例在这些示例中IsClientScriptBlock()IsStartupScript() 方法先后与 RegisterClientScriptBlock() 和 RegisterStartupScript() 方法结合使用
从 ASPNET 服务器控件发送客户端脚本块
请记住RegisterStartupScript() 和 RegisterClientScriptBlock() 方法是 SystemWebUIPage 类的方法幸运的是可以容易地从 ASPNET 服务器控件调用这两个方法因为 SystemWebUIControl 类（所有 ASPNET 服务器控件都直接或间接地从这个类导出）有一个包含对 Page 实例的引用的 Page 属性而这个 Page 实例包含服务器控件因此要从 ASPNET 服务器控件添加客户端脚本块您只需使用下面的语法
thisPageRegisterClientScriptBlock(key script);
通常添加客户端脚本块这个任务会使用 OnPreRender() 方法来处理这个方法在控件生命周期的预呈现阶段执行
让我们创建一个只显示客户端弹出式对话框的 ASPNET 服务器控件此示例将说明构建一个发送客户端脚本的控件是很容易的
首先在 Microsoft? Visual Studio? NET 中创建一个新的 Web Control Library（Web 控件库）项目这将创建一个只有一个类的新项目这个类从 SystemWebUIWebControlsWebControl 导出但是我们希望这个类从 SystemWebUIControl 类导出为什么呢？因为 WebControl 类用于支持显示为 HTML 元素的服务器控件而 Control 类则用于不会显示为 HTML 元素的服务器控件
大多数内置的 ASPNET 服务器控件都会发送一个 HTML 元素例如TextBox Web 控件发送一个 ＜input＞ 元素其类型属性设置为 textDataGrid Web 控件发送一个 ＜table＞ 元素为每条要显示的记录发送 ＜tr＞ 元素为每个字段发送 ＜td＞ 列但是不是所有的控件都需要发送 HTML 元素例如Literal 控件只是按原样输出它的 Text 属性而不将这个属性放在 HTML 元素中同样Repeater 也不将其输出放在 HTML 元素中那些显示为 HTML 元素的服务器控件如 TextBoxButtonDataGrid 等等是从 SystemWebUIWebControlsWebControl 类导出的而那些不产生 HTML 元素的控件如 LiteralRepeater 等是从 SystemWebUIControl 类导出的
既然我们要创建的服务器控件不可见（它只是发送一个显示弹出式控件的客户端脚本块）这个控件最好从 SystemWebUIControl 导出而不是从 SystemWebUIWebControlsWebControl 导出
这个控件只需要两个属性
PopupMessage表示要在弹出式对话框中显示的消息的字符串
Enabled表示是否启用控件的布尔值如果启用控件则显示弹出式对话框否则不显示（必须添加一个 Enabled 属性是因为导出该控件的 Control 类不包括 Enabled 属性此属性只是隐含地由那些从 WebControl 导出的控件使用）
除了这两种属性之外我们需要覆盖 OnPreRender() 方法在这里我们需要调用 RegisterStartupScript()并传递控件唯一的关键字和恰当的客户端脚本以显示弹出式对话框这个类的完整代码如下所示
using System;
using SystemWebUI;
using SystemWebUIWebControls;
using SystemComponentModel;
namespace ClientSideScript
{
/// ＜summary＞
/// WebCustomControl 的摘要描述
/// ＜/summary＞
[DefaultProperty(Text)
ToolboxData(＜{}:PopupGreeting runat=server＞＜/{}:PopupGreeting＞)]
public class PopupGreeting : SystemWebUIControl
{
[Bindable(true)
Category(Appearance)
DefaultValue()]
public string PopupMessage
{
get
{
// 检查 ViewState 中是否存在该项目
object popupMessage = thisViewState[PopupMessage];
if (popupMessage != null)
return thisViewState[PopupMessage]ToString();
else
return Welcome to my Web site!;
}
set
{
// 指定 ViewState 变量
ViewState[PopupMessage] = value;
}
}
[Bindable(true)
Category(Appearance)
DefaultValue()]
public bool Enabled
{
get
{
// 检查 ViewState 中是否存在该项目
object enabled = thisViewState[Enabled];
if (enabled != null)
return (bool) thisViewState[Enabled];
else
return true;
}
set
{
// 指定 ViewState 变量
ViewState[Enabled] = value;
}
}
protected override void OnPreRender(EventArgs e)
{
baseOnPreRender(e);
string scriptKey = intoPopupMessage: + thisUniqueID;
if (!PageIsStartupScriptRegistered(scriptKey) && thisEnabled &&
!PageIsPostBack)
{
string scriptBlock =
@＜script language=JavaScript＞
＜!
alert(%%POPUP_MESSAGE%%);
// ＞
＜/script＞;
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 的属性
图 PopupGreeting 服务器控件已添加到 ASPNET Web 窗体页面
发送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
{
/// ＜summary＞
/// ConfirmButton 的摘要描述
/// ＜/summary＞
[DefaultProperty(Text)
ToolboxData(＜{}:ConfirmButton runat=server＞＜/{}:ConfirmButton＞)]
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(%%POPUP_MESSAGE%%);;
script = scriptReplace(%%POPUP_MESSAGE%%
thisPopupMessageReplace(\ \\\));
writerAddAttribute(HtmlTextWriterAttributeOnclick script);
}
}
}
首先要注意的是ConfirmButton 类是从 Button 类导出的由于 Button 类已包含 Button Web 控件使用的所有属性和方法因此我们所做的只是添加属性和方法以在用户单击按钮时显示一个确认对话框现在我们需要一个属性即 PopupMessage它是要在确认弹出式对话框中显示的消息默认情况下这条消息是Are you sure you want to continue?（您确定要继续吗？）如果使用 ConfirmButton 来确认删除可能需要将该消息更改为This action will permanently delete the selected item Are you sure you want to do this?（此操作将永久删除所选项您确定要继续吗？）
我们只需覆盖一个方法即 AddAttributesToRender()在此方法中我们只要构建当触发 ＜input＞ 元素的 onclick 事件时要执行的客户端 JavaScript然后通过传入的 HtmlTextWriter 对象的 AddAttribute() 方法添加这段 JavaScript关于这个方法有一点要注意必须将 PopupMessage 属性值中的所有双引号实例替换为转义双引号（即 \）另外还要注意默认情况下AddAttribute() 会对第二个参数中的字符进行 HTML 编码也就是说ASPNET Web 页面中如果包含 PopupMessage 属性被设置为Do you want to continue?（要继续吗？）的 ConfirmButton该页面将发送以下 HTML 标记
＜input type=submit name=ConfirmButton
value=Click Me! id=ConfirmButton onclick=return confirm
("Do you want to continue?"); /＞
如果您不熟悉 JavaScript 的 confirm(string) 函数那么请您注意该函数只接受一个字符串参数并显示一个带有特定字符串的模式对话框该对话框中包含两个按钮确定和取消如果单击确定confirm() 函数返回 True否则返回 False请注意onclick 事件将返回 confirm() 函数调用的结果当通过单击提交按钮来提交表单时如果提交按钮的 onclick 事件返回 False则表单未被提交因此只有在用户确认后可以使用 confirm() 函数提交表单有关 confirm() 的详细信息请参阅 ASP Warrior 网站中的 Javascript Confirm Form Submission
图操作中的 ConfirmButton
ConfirmButton 在按钮的 onclick 事件处理程序中使用了内嵌的 JavaScript还可以在 ConfirmButton 的 OnPreRender() 方法的客户端脚本块中创建一个函数然后调整 onclick 属性以调用该函数
小结
在本文中我们探讨了两种通过 ASPNET 服务器控件插入客户端脚本的方法第一种方法是使用 Page 类的 RegisterStartupScript() 和 RegisterClientScriptBlock() 方法插入客户端脚本块第二种方法是向 HTML 元素的属性添加客户端脚本后者通过覆盖 Web 服务器控件的 AddAttributesToRender() 方法并使用 HtmlTextWriter 的 AddAttribute() 方法来完成
我们还在文中介绍了两个简单的服务器控件它们都利用了客户端脚本来改进其功能PopupGreeting 控件在页面首次加载时显示一个模式弹出式对话框ConfirmButton Web 控件在用户单击按钮提交表单时提示用户进行确认
您可以在自己的服务器控件中插入客户端脚本这将显着改善用户体验本文提供的两个服务器控件相对比较简单在可用性和独创性上没有什么突出之处MetaBuilderscom 中展示了很多利用从 ASPNET 服务器控件中插入客户端脚本而实现的功能这些功能会给您留下深刻印象在 MetaBuilderscom您可以找到一些服务器控件它们有的可以自动将焦点添加到文本框有的可以在两个下拉列表之间传递条目有的可以向下拉列表中添加或删除条目还有的可以在一系列下拉列表中显示父子关系的数据等等最大的好处是这些控件是免费的并包括完整的源代码
