从ASP.NET服务器控件插入客户端脚本资源-CSDN文库

150 浏览量 2021-02-22 13:32:37 上传评论收藏 235KB PDF 举报

资源详情

资源评论

资源推荐

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

适用于：

Microsoft® ASP.NET

前提条件：前提条件：本文假设读者熟悉 ASP.NET。

难度：难度： 2

摘要：摘要：尽管从技术角度讲，ASP.NET 服务器控件的所有功能都可以在服务器端执行，但通常情况下通过

添加客户端脚本可以大大增强服务器控件的可用性。本文将探讨服务器控件发送客户端脚本的两种方法，

还将构建两个使用这些技术的服务器控件：PopupGreeting，一个在首次加载的 Web 页面上显示带有特定消

息的客户端模式对话框的服务器控件；ConfirmButton，一个增强的 Button Web 控件，如果用户点击此按

钮，则在发回 Web 窗体前向用户显示一个 JavaScript confirm() 的对话框。（本文包含一些指向英文站点的

链接。）

下载 InjectingClientSideScript.msi。

简介

使用 RegisterStartupScript() 和 RegisterClientScriptBlock() 添加客户端脚本块

探讨 IsStartupScriptRegistered() 和 IsClientScriptBlockRegistered()

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

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

小结

简介

尽管从技术角度讲，Microsoft® ASP.NET 服务器控件的所有功能都可以在服务器端执行，但通常情况下

通过添加客户端脚本可以大大增强服务器控件的可用性。例如，ASP.NET 验证 Web 控件可以在服务器端

执行所有的验证检查。但是，对于高版本浏览器，验证 Web 控件也会发送客户端脚本，以在客户端进行

验证。这就是说，这些浏览器的用户可以获得响应效果更好的动态体验。

在开发 ASP.NET 服务器控件时，您不妨问问自己，如何才能通过使用客户端脚本来增强可用性。一旦找

到可行的方案，其他要做的就是增强服务器控件的功能，以使其发送合适的客户端脚本。

ASP.NET 服务器控件可以发送两种客户端脚本：

客户端脚本块

客户端 HTML 属性

客户端脚本块通常是用 JavaScript 编写的，其中通常包含在发生特定的客户端事件时执行的函数。客户端

HTML 属性提供将客户端事件与客户端脚本联系在一起的方法。例如，以下的 HTML 页面中包含了客户端

脚本块，脚本块中包含了名为 doClick() 的函数。该页面同时还包含一个按钮（通过 <input> HTML 元素创

建），这个按钮的 onclick 属性与 doClick() 函数绑定。也就是说，只要用户单击该按钮，就开始执行 doClick()

函数中的客户端代码。在本示例中，将显示一个弹出式对话框（图 1）。

<html>

<body>

<form>

<!--

function doClick() {

alert("You clicked me!");

}

// -->

</script>

</form>

</body>

</html>

图 1 是单击“Click Me!”按钮时 HTML 页面的屏幕快照。

图图 1：单击：单击“Click Me!”按钮时显示的弹出式对话框按钮时显示的弹出式对话框

对于以上 HTML 页面中的客户端脚本，有几点值得注意。首先，客户端脚本块包含在 HTML 注释（<!-- 和

-->）中。之所以这样，是因为如果不将脚本块放入 HTML 注释中，那些不能识别脚本的旧式浏览器就会显

示 <script> 块的内容。此外，还要注意，脚本块中 HTML 注释的结束标记前有一个 JavaScript 注释，即

//。这是因为旧版本的 Netscape 在遇到 --> 时，会抛出 JavaScript 分析异常，因此必须将其注释掉。幸运

的是，现代的浏览器已不需要这一额外操作，所以在为 Intranet 或其他由浏览器控制的环境开发 Web 页

面时，您就不必采取此类预防措施了。

如果您对客户端脚本不是很熟悉，alert(string) 函数的作用就是显示一个模式弹出式对话框，对话框中包含

的消息由 string 参数指定。所有 HTML 元素都有若干个可以绑定一段客户端 JavaScript 代码的客户端属性

（例如，onclick、onmouseover、onmouseout、onfocus 和 onblur 等等）。例如，在上面的 HTML 页面

中，<input> 元素的 onclick 属性绑定到 doClick() 函数，因此在单击该按钮时将执行 doClick() 函数。有关

JavaScript 事件及其关联的 HTML 属性的列表，请参阅 Introduction to Dynamic HTML 一文。有关客户端

JavaScript 的详细信息，请参阅 HTML and Dynamic HTML 一文。

在本文中，我们将学习如何在 ASP.NET 服务器控件中发送客户端脚本块和 HTML 元素属性。我们首先讨

论如何使用 System.Web.UI.Page 类中的两个方法来向 ASP.NET Web 页面添加客户端脚本块，这两个方法是

RegisterStartupScript() 和 RegisterClientScriptBlock()。掌握这一知识后，我们将构建一个简单的服务器控件，让

这个控件在每次加载页面时显示一个客户端弹出式对话框。之后，我们再来了解如何将 HTML 属性添加到

ASP.NET 服务器控件的 HTML 元素。最后，我们将归纳所有知识，实际构建一个 ConfirmButton Web 控

件，当单击这个控件时，将向用户提示一个对话框，询问用户是否要继续。

使用 RegisterStartupScript() 和 RegisterClientScriptBlock() 添加客户端脚本块

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

HTML 中：

RegisterStartupScript(key, script)

RegisterClientScriptBlock(key, script)

这两个方法都接受两个字符串作为输入。第二个参数 script 是要插入到页面中的客户端脚本，包括 <script>

的起始标记和终止标记。第一个参数 key 是插入的客户端脚本的唯一标识符。

这两个方法唯一的不同之处在于从“何处”发送脚本块。RegisterClientScriptBlock() 在 Web 窗体的开始处（紧接

着 <form runat="server"> 标识之后）发送脚本块，而 RegisterStartupScript() 在 Web 窗体的结尾处（在 </form> 标

识之前）发送脚本块。

为什么会有两种不同的方法来发送客户端脚本？要更好地了解这一点，我们必须首先了解，客户端脚本可

以分为两类：一类是在加载页面后立即运行的代码，一类是在发生某些客户端事件时才运行的代码。前者

的常见示例是将焦点设置到文本框的客户端代码。例如，当您访问 Google 时，在页面加载后就会执行一

小段客户端代码，以自动将焦点设置到搜索文本框。

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

示一个弹出式对话框：

<html>

<body>

<form>

<!--

function displayPopup() {

alert("Hello, world.");

}

// -->

</script>

</form>

</body>

</html>

在这段代码中，<input> 标记中的 onclick="displayPopup()" 用于指明在单击按钮时，JavaScript 函数

displayPopup() 应该运行。

RegisterStartupScript() 方法可用于添加要在加载页面后运行的脚本块。通过这种方法添加的脚本块位于 Web

窗体的结尾处，因为必须在脚本运行前定义脚本要修改的 HTML 元素。也就是说，如果您要使用客户端脚

本将焦点设置到文本框，必须确保文本框的 HTML 标记位于设置该文本框的焦点的脚本之前。例如，下面

的 HTML 将显示一个文本框，并将焦点设置到该文本框：

<!--

document.getElementById("myTextBox").focus();

// -->

</script>

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

<!--

document.getElementById("myTextBox").focus();

// -->

</script>

因此，RegisterStartupScript() 方法将 <script> 块置于 Web 窗体的结尾处，以保证在执行客户端脚本之前已声

明 Web 窗体中的所有 HTML 元素。

RegisterClientScriptBlock() 方法用于为响应客户端事件而执行的脚本代码。通过此方法发送的脚本块位于 Web

页面的开始处，因为这种方法不要求将脚本块置于所有 HTML 元素之后。

探讨 IsStartupScriptRegistered() 和 IsClientScriptBlockRegistered()

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

辅助方法：

IsStartupScriptRegistered(key)

IsClientScriptBlockRegistered(key)

如上所述，在使用 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 服务器控件添加客户端脚本块，您只需使用下面的语法：

this.Page.RegisterClientScriptBlock(key, script);

通常，添加客户端脚本块这个任务会使用 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()，并

传递控件唯一的关键字和恰当的客户端脚本以显示弹出式对话框。这个类的完整代码如下所示：

using System;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.ComponentModel;

namespace ClientSideScript

{

/// <summary>

/// WebCustomControl1 的摘要描述。

/// </summary>

[DefaultProperty("Text"),

ToolboxData("<{0}:PopupGreeting runat=server></{0}:PopupGreeting>")]

public class PopupGreeting : System.Web.UI.Control

{

[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 "Welcome to my Web site!";

}

set

{

// 指定 ViewState 变量

ViewState["PopupMessage"] = value;

}

剩余15页未读，继续阅读

评论收藏

内容反馈

weixin_38513794

粉丝: 1
资源: 947

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

评论0

最新资源

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

评论0

ASP.NET 控件的使用

在ASP.NET 2.0中操作数据：在编辑和插入界面里添加验证控件

在ASP.NET 2.0中操作数据：在编辑和插入界面里添加验证控件(源码)

在ASP.NET 2.0中操作数据之四十七：用SqlDataSource控件插入、更新、删除数据

ASP.NET常见问题集锦.zip

2.ASP.NET.2.0.高级编程(第4版) [1/7]

asp.net教学讲义

ASP.NET.4揭秘

ASP.NET2.0高级编程(第4版)1/6

ASP.NET 2.0/3.5中直接操作Gridview控件插入新记录

ASP.NET4高级程序设计第4版 带目录PDF 分卷压缩包 part1

asp.net专家疑难解答200问

ASP.NET4高级程序设计(第4版) 3/3

asp.net专家疑难解答200问源码

DotNetTextBox3.5.0多功能在线文本编辑器

DotNetTextBox所见即所得编辑器控件 v3.3.1

DotNetTextBox V6.0.10 商业版 下载 (已知最新)

商用版本文本编辑器DotNetTextBoxV6.0.8Source 源码

ReportMachine

Qt 5实现串口调试助手 （源工程文件、0积分下载）

【SystemVerilog】路科验证V2学习笔记（全600页）.pdf

AutoSAR标准协议4.2.2

光伏-储能并网系统仿真.rar

NPPJSONViewer.zip

GD32替换STM32注意事项.pdf

最新资源

ASP.NET4高级程序设计第4版带目录PDF 分卷压缩包 part1

DotNetTextBox V6.0.10 商业版下载 (已知最新)

Qt 5实现串口调试助手（源工程文件、0积分下载）