RegisterStartupScript() 和 RegisterClientScriptBlock()[通俗易懂]

大家好，又见面了，我是你们的朋友全栈君。 
使用 RegisterStartupScript() 和 RegisterClientScriptBlock() 添加客户端脚本块

　　System.Web.UI.Page 类包含的两个方法可以将客户端脚本代码发送到由 ASP.NET Web 页面提供的 HTML 中：

　　这两个方法都接受两个字符串作为输入。第二个参数 script 是要插入到页面中的客户端脚本，包括 ＜script＞ 的起始标记和终止标记。第一个参数 key 是插入的客户端脚本的唯一标识符。

　　这两个方法唯一的不同之处在于从“何处”发送脚本块。RegisterClientScriptBlock() 在 Web 窗体的开始处（紧接着 ＜form runat=”server”＞ 标识之后）发送脚本块，而 RegisterStartupScript() 在 Web 窗体的结尾处（在 ＜/form＞ 标识之前）发送脚本块。

　　为什么会有两种不同的方法来发送客户端脚本？要更好地了解这一点，我们必须首先了解，客户端脚本可以分为两类：一类是在加载页面后立即运行的代码，一类是在发生某些客户端事件时才运行的代码。前者的常见示例是将焦点设置到文本框的客户端代码。例如，当您访问 Google 时，在页面加载后就会执行一小段客户端代码，以自动将焦点设置到搜索文本框。

　　以下是后一类代码（为响应客户端事件而运行的代码）的示例。具体而言，在该示例中，单击按钮时将显示一个弹出式对话框：

　　在这段代码中，＜input＞ 标记中的 οnclick=”displayPopup()” 用于指明在单击按钮时，JavaScript 函数 displayPopup() 应该运行。

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

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

　　因此，RegisterStartupScript() 方法将 ＜script＞ 块置于 Web 窗体的结尾处，以保证在执行客户端脚本之前已声明 Web 窗体中的所有 HTML 元素。

　　RegisterClientScriptBlock() 方法用于为响应客户端事件而执行的脚本代码。通过此方法发送的脚本块位于 Web 页面的开始处，因为这种方法不要求将脚本块置于所有 HTML 元素之后。

　　探讨IsStartupScriptRegistered() 和 IsClientScriptBlockRegistered()

　　除RegisterStartupScript() 和 RegisterClientScriptBlock() 方法之外，Page 类还包含两个在发送客户端脚本时常用的辅助方法：

　　如上所述，在使用 RegisterStartupScript() 或 RegisterClientScriptBlock() 插入客户端脚本块时，提供了一个唯一标识脚本块的关键字。这两个方法都接受一个输入（字符串 key），并返回一个布尔值，以指示带有指定关键字的脚本块是否已添加到页面中。具体地说，如果带有特定 key 的脚本块已经注册，这些方法将返回 True，否则将返回 False。

　　要了解如何使用这两个方法，可以看一看 ASP.NET 验证 Web 控件，如 RequiredFieldValidator、RegularExpressionValidator 等等。这些控件都会用到一个常用的验证 JavaScript 文件 (WebValidation.js)，该文件位于 ASP.NET Web 应用程序的 aspnet_client/system_web/版本号 目录中。因此，所有这些控件都会发送相同的脚本块，这个脚本块将调用在 WebValidation.js 文件中定义的相应的 JavaScript 函数，以启动客户端的验证过程。要完成这个过程，这些控件会使用 Page 类的 RegisterClientScriptBlock() 方法，并使用关键字 ValidatorIncludeScript。

　　接下来要考虑的是，如果一个 ASP.NET Web 页面中包含多个验证 Web 控件，会出现什么情况呢？所有这些 Web 控件都要使用相同的关键字发送相同的脚本块。如果使用这个关键字调用两次 RegisterClientScriptBlock() 或 RegisterStartupScript() 方法，则第二次调用会被认为是复制脚本块而被忽略。因此，即使一个 Web 页面上有多个验证控件，也只是发送一个公共脚本块的实例。但是，请注意，除第一个控件之外的其他所有验证 Web 控件都会构建要发送的公共客户端脚本，而这只是在浪费时间。

　　这时就应该使用 IsClientScriptBlock() 和 IsStartupScript() 方法。这样一来，验证 Web 控件就不会先花时间构建要发送的客户端代码，而是先检查是否已经存在使用关键字 ValidatorIncludeScript 注册的脚本。如果存在，控件就会放弃构建客户端脚本块，因为脚本块已经由页面上的其他验证控件构建了。

　　因此，每次构建客户端脚本时，应该首先调用 IsClientScriptBlock() 或 IsStartupScript() 方法，以确定是否需要生成客户端脚本。在下面一节，我们将看到一些示例，在这些示例中，IsClientScriptBlock()、IsStartupScript() 方法先后与 RegisterClientScriptBlock() 和 RegisterStartupScript() 方法结合使用。

从 ASP.NET 服务器控件发送客户端脚本块

　　请记住，RegisterStartupScript() 和 RegisterClientScriptBlock() 方法是 System.Web.UI.Page 类的方法。幸运的是，可以容易地从 ASP.NET 服务器控件调用这两个方法，因为 System.Web.UI.Control 类（所有 ASP.NET 服务器控件都直接或间接地从这个类导出）有一个包含对 Page 实例的引用的 Page 属性，而这个 Page 实例包含服务器控件。因此，要从 ASP.NET 服务器控件添加客户端脚本块，您只需使用下面的语法：

　　通常，添加客户端脚本块这个任务会使用 OnPreRender() 方法来处理，这个方法在控件生命周期的预呈现阶段执行。

　　让我们创建一个只显示客户端弹出式对话框的 ASP.NET 服务器控件。此示例将说明构建一个发送客户端脚本的控件是很容易的。

　　首先，在 Microsoft? Visual Studio? .NET 中创建一个新的 Web Control Library（Web 控件库）项目。这将创建一个只有一个类的新项目，这个类从 System.Web.UI.WebControls.WebControl 导出。但是，我们希望这个类从 System.Web.UI.Control 类导出。为什么呢？因为 WebControl 类用于支持显示为 HTML 元素的服务器控件，而 Control 类则用于不会显示为 HTML 元素的服务器控件。

　　大多数内置的 ASP.NET 服务器控件都会发送一个 HTML 元素。例如，TextBox Web 控件发送一个 ＜input＞ 元素，其类型属性设置为 text；DataGrid Web 控件发送一个 ＜table＞ 元素，为每条要显示的记录发送 ＜tr＞ 元素，为每个字段发送 ＜td＞ 列。但是，不是所有的控件都需要发送 HTML 元素。例如，Literal 控件只是按原样输出它的 Text 属性，而不将这个属性放在 HTML 元素中。同样，Repeater 也不将其输出放在 HTML 元素中。那些显示为 HTML 元素的服务器控件，如 TextBox、Button、DataGrid 等等，是从 System.Web.UI.WebControls.WebControl 类导出的，而那些不产生 HTML 元素的控件，如 Literal、Repeater 等，是从 System.Web.UI.Control 类导出的。

　　既然我们要创建的服务器控件不可见（它只是发送一个显示弹出式控件的客户端脚本块），这个控件最好从 System.Web.UI.Control 导出，而不是从 System.Web.UI.WebControls.WebControl 导出。

　　这个控件只需要两个属性：

　　PopupMessage – 表示要在弹出式对话框中显示的消息的字符串。

　　Enabled – 表示是否启用控件的布尔值。如果启用控件，则显示弹出式对话框，否则不显示。（必须添加一个 Enabled 属性，是因为导出该控件的 Control 类不包括 Enabled 属性，此属性只是隐含地由那些从 WebControl 导出的控件使用。）

　　除了这两种属性之外，我们需要覆盖 OnPreRender() 方法。在这里，我们需要调用 RegisterStartupScript()，并传递控件唯一的关键字和恰当的客户端脚本以显示弹出式对话框。这个类的完整代码如下所示：

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

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

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

　　控件的 Enabled 属性为 True。

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

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

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

　　ClientSideControls，包含 PopupGreeting 服务器控件

　　ClientSideTester，包括一个为测试 ClientSideControls 而设计的 ASP.NET Web 应用程序
ClientSideControls 项目编译后的程序集名为 ClientSideControls.dll。要在您自己的 ASP.NET Web 应用程序中使用 PopupGreeting 服务器控件，请将 ClientSideControls.dll 文件添加到您的 Web 应用程序的引用中。然后，在设计器中，右键单击 Toolbox（工具箱）并选择“Add/Remove Items . . .”（添加/删除项），再次选择 ClientSideControls.dll 文件。这样就向 Toolbox（工具箱）中添加了名为 PopupGreeting 的新项。然后，您可以从 Toolbox（工具箱）将该控件拖到设计器中。

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

图 2：PopupGreeting 服务器控件已添加到 ASP.NET Web 窗体页面

发送ASP.NET服务器Web控件的HTML属性

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

　　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 类的完整源代码如下所示：

　　首先要注意的是，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 编码。也就是说，ASP.NET Web 页面中如果包含 PopupMessage 属性被设置为“Do you want to continue?”（要继续吗？）的 ConfirmButton，该页面将发送以下 HTML 标记：

＜input type=”submit” name=”ConfirmButton1″
value=”Click Me!” id=”ConfirmButton1″ οnclick=”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。

图3：操作中的 ConfirmButton

　　ConfirmButton 在按钮的 onclick 事件处理程序中使用了内嵌的 JavaScript，还可以在 ConfirmButton 的 OnPreRender() 方法的客户端脚本块中创建一个函数，然后调整 onclick 属性以调用该函数。

　　小结

　　在本文中，我们探讨了两种通过 ASP.NET 服务器控件插入客户端脚本的方法。第一种方法是使用 Page 类的 RegisterStartupScript() 和 RegisterClientScriptBlock() 方法插入客户端脚本块。第二种方法是向 HTML 元素的属性添加客户端脚本。后者通过覆盖 Web 服务器控件的 AddAttributesToRender() 方法，并使用 HtmlTextWriter 的 AddAttribute() 方法来完成。

　　我们还在文中介绍了两个简单的服务器控件，它们都利用了客户端脚本来改进其功能。PopupGreeting 控件在页面首次加载时显示一个模式弹出式对话框，ConfirmButton Web 控件在用户单击按钮提交表单时，提示用户进行确认。

　　您可以在自己的服务器控件中插入客户端脚本，这将显著改善用户体验。本文提供的两个服务器控件相对比较简单，在可用性和独创性上没有什么突出之处。MetaBuilders.com 中展示了很多利用从 ASP.NET 服务器控件中插入客户端脚本而实现的功能，这些功能会给您留下深刻印象。在 MetaBuilders.com，您可以找到一些服务器控件，它们有的可以自动将焦点添加到文本框，有的可以在两个下拉列表之间传递条目，有的可以向下拉列表中添加或删除条目，还有的可以在一系列下拉列表中显示父子关系的数据，等等。最大的好处是，这些控件是免费的，并包括完整的源代码。