使用客户端脚本进行 ASP.NET 网页编程

使用客户端脚本进行 ASP.NET 网页编程

您可以在 ASP.NET 网页中包括客户端脚本，以实现操作网页外观并且要求快速响应时间的操作。本节提供的主题讨论客户端脚本以及如何将客户端脚本添加到 ASP.NET 网页中。

本节内容

ASP.NET 网页中的客户端脚本
使用客户端脚本的 ASP.NET Web 服务器控件 如何：向 ASP.NET Web 服务器控件添加客户端脚本事件 如何：向 ASP.NET 网页动态添加客户端脚本 在 ASP.NET 网页中不经过回发而实现客户端回调

ASP.NET 网页中的客户端脚本

ASP.NET 是基于服务器的技术，因此不会直接与浏览器进行交互。例如，不存在从浏览器接受键盘输入、响应鼠标事件或执行其他涉及用户与浏览器间交互任务的 ASP.NET 方法。ASP.NET 可以在页面发送后获取这类操作的结果，但无法直接响应浏览器操作。

这些类型的浏览器交互任务可通过使用以 ECMAScript（JavaScript 或 JScript）编写的客户端脚本来得到最好的处理。在浏览器中运行的客户端脚本可以立即响应用户的操作。例如，可以使用客户端脚本创建“翻转”效果，以便在用户将鼠标指针停在某个按钮或菜单项上时更改该按钮或菜单项。同样，可以使用客户端脚本执行以下三项操作：一是逐字符检查文本框中的键盘输入；二是动态更改页面外观；三是执行主要面向用户界面 (UI) 的任何其他任务和要求立即响应的任务。

ASP.NET 服务器控件和客户端脚本

一些 ASP.NET 服务器控件要依赖于客户端脚本来正常工作。例如，LinkButton 控件需要客户端脚本来支持其回发行为。在呈现页面时，ASP.NET Web 服务器控件所需的客户端脚本会自动添加到相应页面中。为这些控件生成的客户端脚本与您创建的任何客户端脚本无关。

有关更多信息，请参见使用客户端脚本的 ASP.NET Web 服务器控件。

将您的客户端脚本包括在 ASP.NET 页中

由于 ASP.NET 网页终究只是网页，因此，您可以添加将自己的客户端脚本添加到 ASP.NET 页中。由于在 ASP.NET 页中提供了对客户端脚本的支持，因此，请求相应页面的浏览器也支持客户端脚本。例如，如果您的 ASP.NET 网页在 Microsoft Internet Explorer 或 Mozilla 中运行，您可以向以下页面添加客户端脚本，该页使用动态 HTML 操纵其中的所有元素。如果页面在移动电话或其他设备上的浏览器中运行，对客户端脚本的支持程度就会因浏览器的不同而有所不同。

您的页面可以采用任何 HTML（或其他标记）页所采用的方式来包括客户端脚本。就像在任何 HTML 页上一样，可以向 ASP.NET 页中添加 script 块，以操作页面中的元素。可以使用客户端脚本来编写客户端事件（如页面的 onload 事件）的事件处理程序。在浏览器中运行 ASP.NET 页时，页面上的标记元素在客户端脚本中是可寻址的，并可引发 HTML 页中所有的客户端事件。

在 ASP.NET 网页中使用客户端脚本与在 HTML 页中使用客户端脚本有些不同，其不同之处体现在以下几个方面：

向 ASP.NET 服务器控件添加客户端脚本事件。

从客户端脚本引用服务器控件。

向动态页添加客户端脚本。

引发服务器控件的客户端单击事件。

在客户端脚本和服务器代码间共享信息。

不通过回发从客户端脚本调用服务器代码。

向 ASP.NET 服务器控件添加客户端脚本事件

ASP.NET 控件在页面中呈现为元素（控件呈现的确切元素取决于页面的标记语言，是 HTML、XHTML 还是其他语言）。因此，可以像使用页面上的任何元素一样，将客户端脚本事件处理添加到控件中。但是，在有些情况下，必须知道控件输出的呈现方式，以及控件为其自身保留的属性。

以声明方式添加客户端事件处理程序

在 ASP.NET 服务器控件的标记中，可以使用属性 (attribute) 来设置属性 (property) 值。例如，若要设置

<asp:textbox id="TextBox1" runat="server" text="Sample Text" />

如果您在标记中包括了一个没有映射到控件属性 (property) 的属性 (attribute)，则在服务器处理过程中，ASP.NET 便会忽略该属性 (attribute)，并按控件生成的标记的原样将其传递给浏览器。例如，TextBox 控件不具有名为 onkeyup 的属性。因此，如果在 TextBox 控件的标记中包括 onkeyup 属性，该属性便会被传递给浏览器。此行为允许您在标记中声明事件绑定，从而向服务器控件添加事件绑定。例如，当用户在文本框中按下任意键时，TextBox 控件的以下标记便会使文本框显示名为 spanCounter 的 span 元素中的当前文本长度：

<asp:textbox id="TextBox1" runat="server" text="Sample Text" onkeyup="spanCounter.innerText=this.value.length;" />

或者，事件也可以调用在页面其他位置的客户端脚本中定义的方法：

<asp:textbox id="TextBox1" runat="server" text="Sample Text" onkeyup="DisplayCount(this);" />

请注意，服务器代码所用的语言（Visual Basic 或 C#）不会影响客户端脚本，因为客户端脚本始终都是用 ECMAScript 编写。

有关详细信息，请参见如何：向 ASP.NET Web 服务器控件添加客户端脚本事件。

在服务器代码中添加属性

除了以声明的方式向控件添加传递属性外，还可以使用服务器代码以编程的方式添加属性。如果要添加的属性值为动态值，这种方式将很有用处。有关详细信息，请参见如何：在 ASP.NET 网页中设置控件的 HTML 属性。

在客户端脚本中标识服务器控件

在呈现 ASP.NET 服务器控件时，该控件的 ClientID 属性 (property) 作为结果元素的 id 属性 (attribute) 和 name 属性 (attribute) 呈现于页面上。（ClientID 属性是从您所设置的 ID 属性中自动生成的。）例如，您可能会创建以下 ASP.NET 服务器控件：

<asp:textbox id="TextBox1" runat="server" text="Sample Text" />

ClientID 属性被设置为 TextBox1，在基于 HTML 的浏览器中，其结果元素与以下所示类似：

<input name="TextBox1" type="text" value="Sample Text" id="TextBox1" />

注意
form 元素只呈现 ID 属性，而不呈现 name 属性。

因此，可以使用这些属性在客户端脚本中引用服务器控件。通常，必须在客户端脚本中用完全限定引用来引用控件；如果控件是页面中 form 元素的子控件，则一般使用下面的代码示例所示的语法在客户端脚本中引用控件。

document.forms[0].TextBox1.value = "New value";

第二个示例假定页面上的 form 元素已将其自身的 id 属性设置为 form1。

引用服务器控件所需的确切语法取决于您所使用的控件，以及其是否为另一控件的子控件。如果不确定如何引用控件，则请运行页面，查看其源文件，然后确定该控件的呈现方式，这可能会有所帮助。

引用在其他控件内部呈现的控件

有些控件将子控件呈现在页面中。这些控件中包括数据列表控件（如

在这些情况下，子控件可能不具有唯一的 ID，这可能是因为子控件是在某个模板中定义的，该模板会为每个数据行（数据列表控件）生成新的控件实例，也可能是因为可以从外部源（用户控件和 Web 部件控件）将父控件添加到页面中。因此，这些父控件是命名容器（即它们实现 INamingContainer）。命名容器可保证其子控件在页面上拥有唯一的 ID。

例如，您可能在 DataList 控件中创建了一个 ItemTemplate 属性，并添加了一个 ID 被设置为 checkEnabled 的 CheckBox 控件。这样，在呈现 DataList 控件时，就会为每个数据项呈现一个新的 checkEnabled 控件。呈现的页面中不能包含名为 checkEnabled 的元素的多个实例，这样 DataList 控件就可以为其每个子控件创建唯一的标识。

命名容器子控件的唯一标识通过呈现两个属性的方式来生成。对于每个子控件：

控件的 UniqueID 属性 (property) 被呈现为 name 属性 (attribute)。

控件的 ClientID 属性 (property) 被呈现为 id 属性 (attribute)。

ClientID 和 UniqueID 属性都基于原始的 ID 属性，并用足够的信息进行了修改，以保证页面中结果的唯一性。ClientID（也就是所呈现元素中的 id 属性）的值可在客户端脚本中引用。

如果在浏览器中显示一个具有命名容器的页面，则可以查看该页面的源文件，从中找到唯一的 ID，这些 ID 作为命名容器子控件的 name 属性和 id 属性生成。但是，建议不要依赖于直接引用在浏览器中看到的 ID。因为用于生成子控件唯一 ID 的公式可能会发生变化。因此，应当获取子控件的 ClientID 属性值，并用该值来引用该子控件。例如，您可能会在页面中动态创建客户端脚本。如果客户端脚本引用一个子控件，则应获取该子控件的 ClientID 属性，并将其嵌入到动态脚本中。

以动态方式向页面添加客户端脚本

在许多情况下，都可以通过声明方式为页面创建客户端脚本，该脚本通常作为脚本块使用。但是，有时可能要动态地创建客户端脚本。如果脚本或脚本中的值仅取决于服务器上的可用信息，则这种方式会很有用处。例如，您可能要将客户端脚本插入到一个页面中，该页引用了一个名称 (ID) 未知的服务器控件，此控件的名称 (ID) 只有在运行应用程序时才能知道。

还可以插入一个引用文件的客户端脚本 include 语句。如果将客户端脚本保存在 .js 文件而不是页面本身，这一方法将很有用；如果应用程序和不直接支持脚本的浏览器一起使用，这一方法特别有用。

通过调用

为所有方法提供一个脚本块所关联的类型，并为该脚本块分配一个键。如果页面和任何控件（自定义控件或用户控件）都向同一页面添加脚本块，则提供类型有助于避免发生冲突。使用键有助于避免重复；当调用一种方法来添加脚本时，如果页面中已存在一个与要添加的脚本具有相同键和相同类型的脚本，则不会再次添加该脚本。

您所提供的类型和键有助于避免不必要的重复，因此，一般情况下不需要显式确定脚本块是否已存在。但是，如果在应用程序中检查现有脚本块能够起到帮助作用，则可以调用下列方法：

IsClientScriptBlockRegistered

IsClientScriptIncludeRegistered

IsOnSubmitStatementRegistered

IsStartupScriptRegistered

引发服务器控件的客户端单击事件

如本主题前面所述，通过向控件的标记添加 onclick 属性，可以将客户端的单击事件添加到大多数的 ASP.NET 服务器控件中。但是，有些控件保留了 onclick 属性，用于定义与服务器事件的绑定。这些控件包括

可以通过两种方式为单击事件添加客户端脚本处理程序：

将控件的 OnClientClick 属性设置为要执行的脚本。这样，在呈现按钮控件时，OnClientClick 值将变成 onclick 属性。

通过调用控件的 Attributes 集合的 Add 方法，用编程的方式添加 onclick 属性。

下面的代码示例显示引发客户端和服务器 Click 两种事件的 Button 控件：

<asp:button id="Button1" runat="server" OnClientClick="return confirm('Ok to post?')" onclick="Button1_Click" Text="Click!" />

在客户端脚本和服务器代码间共享信息

通常，客户端脚本和服务器代码不能直接通信。例如，在回发事件期间，客户端脚本函数不能直接向服务器代码传递值。

注意
如果实现客户端回调，客户端脚本便可以直接调用服务器代码。有关详细信息，请参见在 ASP.NET 网页中不经过回发而实现客户端回调。

但是，可以让客户端脚本和服务器代码间接进行交互。其中一种方法就是向页面添加

还可以使用 Cookie 在服务器代码和客户端代码间共享值。有关在服务器代码中写入和读取 Cookie 的详细信息，请参见如何：编写 Cookie 和如何：读取 Cookie。

不通过回发从客户端脚本调用服务器代码

在 ASP.NET 网页的一般序列中，运行服务器代码的每个用户操作都要求回发。但是，您也可以编写实现客户端回调的代码。在此方案中，客户端脚本不执行完整的回发周期，就向服务器发送请求以执行页面。该页面可运行一个方法，并将该方法得到的结果返回到浏览器中的客户端函数。如果希望在获取服务器信息的同时保留客户端状态（如局部变量），则客户端回调十分有用。
有关详细信息，请参见

使用客户端脚本的 ASP.NET Web 服务器控件

有些 ASP.NET 服务器控件依赖于客户端脚本进行正常工作。此外，ASP.NET 页的某些功能也依赖于客户端脚本。了解 ASP.NET 控件和页如何使用客户端脚本将有助于了解浏览器对客户端脚本不同程度的支持对网页的影响。

元素列表

下表列出使用客户端脚本的控件或控件属性以及客户端脚本提供的功能。

控件	客户端脚本功能
Page, HtmlForm, Panel	下列属性需要客户端脚本： DefaultFocus DefaultButton MaintainScrollPositionOnPostback
LinkButton、ImageButton 和 HtmlButton 注意 不包括 Button Web 服务器控件或 HtmlInputButton 和 HtmlInputImage 控件，这些控件不需要客户端脚本。	客户端脚本用于支持回发事件。
Calendar	此控件使用 LinkButton 控件实现日、周和月导航；LinkButton 控件使用客户端脚本处理回发事件。如果使用 Calendar 控件只是为了显示一个月份，而不进行选择或导航，则该控件不需要客户端脚本。
DetailsView	如果该控件包含配置为 LinkButton 控件（以实现编辑、分页等）的按钮，则那些功能需要客户端脚本。 客户端脚本可用于分页（如果关联的数据源控件支持此功能）。 如果 EnablePagingCallbacks 属性为 true，则客户端脚本将用于管理回调。
GridView	如果该控件包含配置为 LinkButton 控件（以实现编辑、分页等）的按钮，则那些功能需要客户端脚本。 客户端脚本可用于排序和分页（如果关联的数据源控件支持此功能）。 如果 EnableSortingAndPagingCallbacks 属性为 true，则客户端脚本将用于管理回调。
Label	AssociatedControlID 属性与 AccessKey 属性结合使用，可生成响应键盘快捷键以将焦点设置在适当控件上的客户端脚本。如果没有设置这些属性，则此控件不需要客户端脚本。
Menu	客户端脚本用于打开和关闭菜单项、显示弹出面板及控制用户将鼠标指针放在菜单项上时的显示方式。
TreeView	客户端脚本用于打开和关闭节点。客户端脚本还用于将 TreeView 控件配置为即需填充节点。 可对 TreeView 控件禁用客户端脚本，在这种情况下将在回发之后在服务器代码中执行选择行为。但是，由于节点本身呈现为使用客户端脚本执行回发的链接，因此如果浏览器不支持客户端脚本，则 TreeView 将无法执行回发。
AutoPostBack 属性设置为 true 的任何 Web 服务器控件。	非按钮控件的 AutoPostBack 属性行为均使用客户端脚本实现。
Web 部件控件	客户端脚本用于支持拖放行为、向区域添加 Web 部件控件、谓词以及导入和导出功能。
验证程序控件： CompareValidator CustomValidator RangeValidator RegularExpressionValidator RequiredFieldValidator ValidationSummary	客户端脚本用于提供即时验证反馈。如果客户端不支持脚本，验证将只在服务器上运行。
将焦点设置到控件的任何方法或属性，如控件的 Focus 方法和页的 SetFocus 方法。	客户端脚本用于将焦点设置到指定控件。

这些控件和成员所需的客户端脚本将自动生成并作为页的一部分来发送。它能兼容支持 ECMAScript (JScript、JavaScript) 的所有浏览器类型，即它不依赖于动态 HTML (DHTML) 的高级脚本功能。Web 部件控件集例外，它需要 Microsoft Internet Explorer 5.5 版或更高版本才能实现全部功能。

注意
有些验证功能可以利用 DHTML（如果它在浏览器中可用），但 DHMTL 不是必需的。

用户有时会在浏览器中禁用脚本来作为一项安全措施。如果已禁用，则客户端脚本提供的功能将无法实现。这将完全禁用部分控件，例如 LinkButton 控件，并将禁用 AutoPostBack 属性的功能。验证只受到部分影响；仍可在服务器上执行验证，但用户将无法获得客户端验证的即时性和性能。

如何：向 ASP.NET Web 服务器控件添加客户端脚本事件

可以像对 HTML 元素那样，以声明方式向 ASP.NET 网页上的控件添加客户端脚本。或者，如果事件或代码依赖仅在运行时可用的信息，可以通过编程方式向 ASP.NET Web 服务器控件添加客户端脚本事件。

注意
可以在客户端脚本中通过 ID 引用控件。有关更多信息，请参见 ASP.NET 网页中的客户端脚本。

向按钮添加客户端脚本 onclick 事件需要一个专门过程，本主题后面的内容会对此进行介绍。

注意
对客户端脚本的支持取决于浏览器。例如，Internet Explorer、Mozilla 和移动设备浏览器可能会对客户端脚本提供不同类型的支持。

以声明方式向 ASP.NET 服务器控件添加客户端事件处理程序

在控件的标记中添加事件属性，例如，onmouseover 或 onkeyup。针对属性值添加要执行的客户端脚本。

注意
始终都要在属性中的客户端脚本之后添加一个分号 (;)。这是必需的，这样就可以在 ASP.NET 生成控件的客户端脚本（例如，如果控件的 AutoPostBack 属性设置为 true）时首先运行此代码。

控件标记中任何不与控件属性 (property) 对应的属性 (attribute)/值对都会按原样传递给浏览器。

下面的代码示例演示一个包含客户端脚本的 ASP.NET 网页，当用户将鼠标移到按钮上方时，此脚本就会更改该按钮的文本颜色。

Visual Basic


复制代码

<%@ Page Language="VB"%>
<html>
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
var previousColor;
function MakeRed()
{
previousColor = window.event.srcElement.style.color;
window.event.srcElement.style.color = "#FF0000";
}
function RestoreColor()
{
window.event.srcElement.style.color = previousColor;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:button id="Button1" runat="server"
text="Button1"
onmouseover="MakeRed();"onmouseout="RestoreColor();" />
</form>
</body>
</html>

C#


复制代码

<%@ Page Language="C#" %>
<html>
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
var previousColor;
function MakeRed()
{
previousColor = window.event.srcElement.style.color;
window.event.srcElement.style.color = "#FF0000";
}
function RestoreColor()
{
window.event.srcElement.style.color = previousColor;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:button id="Button1" runat="server"
text="Button1"
onmouseover="MakeRed();"onmouseout="RestoreColor();" />
</form>
</body>
</html>

以编程方式向 ASP.NET 控件添加客户端事件处理程序

在页面的 Init 或 Load 事件中调用控件的 Attributes 集合的 Add 方法。

下面的代码示例演示如何向 TextBox 控件添加客户端脚本。该客户端脚本显示 TextBox 控件中的文本长度。该脚本假定页面包含一个名为 spanCounter 的 span 元素。

Visual Basic


复制代码

Protected Page_Load(ByVal sender As Object, _
ByVal e As System.EventArgs)
Dim displayControlName As String = "spanCounter"
TextBox1.Attributes.Add("onkeyup", _
displayControlName & ".innerText=this.value.length;")
End Sub

C#


复制代码

protected void Page_Load(object sender, EventArgs e)
{
String displayControlName = "spanCounter";
TextBox1.Attributes.Add("onkeyup", displayControlName +
".innerText=this.value.length;");
}

向按钮控件添加客户端 Onclick 事件

在按钮控件（Button、LinkButton 和 ImageButton 控件）中，将 OnClientClick 属性设置为要执行的客户端脚本。

下面的代码示例演示如何向 Button 控件添加客户端脚本 Click 事件。

Visual Basic


复制代码

<%@ Page Language="VB" %>
<script runat="server">
Sub Button1_Click(ByVal sender As Object, _
ByVal e As System.EventArgs)
Label1.Text = "Server click handler called."
End Sub
</script>

<body>
<form id="form1" runat="server">
<asp:Button ID="Button1" Runat="server"
OnClick="Button1_Click"
OnClientClick="return confirm('Ready to submit.')"
Text="Test Client Click" />
<br />
<asp:Label ID="Label1" Runat="server" text="" />
</form>
</body>
</html>

C#


复制代码

<%@ Page Language="C#" %>
<script runat="server">
protected void Button1_Click(Object sender, EventArgs e)
{
Label1.Text = "Server click handler called.";
}
</script>

<html  >
<body>
<form id="form1" runat="server">
<asp:Button ID="Button1" Runat="server"
OnClick="Button1_Click"
OnClientClick="return confirm('Ready to submit.')"
Text="Test Client Click" />
<br />
<asp:Label ID="Label1" Runat="server" text="" />
</form>
</body>
</html>

安全

客户端脚本可以在客户端计算机上执行潜在的恶意功能。对于写入某一页面的脚本一定要非常小心，特别是在为响应用户输入生成或更改该脚本的情况下。有关更多信息，请参见脚本侵入概述。

如何：向 ASP.NET 网页动态添加客户端脚本

使用服务器代码可以向页中添加客户端脚本。当客户端脚本的内容依赖于直到运行时才可用的信息时，使用服务器代码创建客户端脚本很有用。当您希望客户端脚本在下列情况下执行时，向页动态添加客户端脚本也很有用：

当页已完成加载时

当用户提交页时

注意
还可以向各个控件添加客户端事件，如 onmouseover 和 onkeyup。有关详细信息，请参见如何：向 ASP.NET Web 服务器控件添加客户端脚本事件。

向 ASP.NET 网页动态添加客户端脚本

在服务器代码中，调用下表中列出的一种方法。

方法	说明
RegisterClientScriptBlock	向页的顶部添加一个脚本块。以字符串形式创建脚本，然后将其传递给方法，方法再将脚本添加到页中。可以使用此方法将任何脚本插入到页中。请注意，脚本可能在所有元素完成之前呈现到页中；因此，您可能无法从脚本中引用页上的所有元素。
RegisterClientScriptInclude	与 RegisterClientScriptBlock 方法类似，但此方法将添加引用外部 .js 文件的脚本块。包含文件在任何其他动态添加的脚本之前添加；因此，您可能无法引用页上的某些元素。
RegisterStartupScript	向页中添加一个脚本块，该脚本块在页完成加载后引发页的 onload 事件之前执行。该脚本通常不创建为事件处理程序或函数；它通常只包含要执行一次的语句。
RegisterOnSubmitStatement	添加响应页的 onsubmit 事件而执行的脚本。该脚本在提交页之前执行，允许您取消提交。

下面的代码示例演示如何向页中添加在用户单击按钮（该按钮将页回发至服务器）时执行的客户端脚本。客户端脚本将显示弹出窗口，请求用户确认回发。

Visual Basic


复制代码

Protected Sub Page_Load(ByVal sender As Object, _
ByVal e As System.EventArgs)
Dim scriptText As String
scriptText = "return confirm('Do you want to submit the page?')"
ClientScript.RegisterOnSubmitStatement(Me.GetType(), _
"ConfirmSubmit", scriptText)
End Sub

C#


复制代码

protected void Page_Load(Object sender, EventArgs e)
{
String scriptText =
"return confirm('Do you want to submit the page?')";
ClientScript.RegisterOnSubmitStatement(this.GetType(),
"ConfirmSubmit", scriptText);
}

请参见

任务

如何：向 ASP.NET Web 服务器控件添加客户端脚本事件

在 ASP.NET 网页中不经过回发而实现客户端回调

在 ASP.NET 网页的默认模型中，用户会与页交互，单击按钮或执行导致回发的一些其他操作。此时将重新创建页及其控件，并在服务器上运行页代码，且新版本的页被呈现到浏览器。但是，在有些情况下，需要从客户端运行服务器代码，而不执行回发。如果页中的客户端脚本维护一些状态信息（例如，局部变量值），那么发送页和获取页的新副本就会损坏该状态。此外，页回发会导致处理开销，这会降低性能，且会让用户不得不等待处理并重新创建页。

若要避免丢失客户端状态并且不导致服务器往返的处理开销，可以对 ASP.NET 网页编码，使其能执行客户端回调。在客户端回调中，客户端脚本函数会向 ASP.NET 网页发送一个请求。该网页运行其正常生命周期的修改版本 — 初始化页并创建其控件和其他成员，然后调用特别标记的方法。该方法执行代码中编写的处理过程，然后向浏览器返回可由另一客户端脚本函数读取的值。在此过程中，该页一直驻留在浏览器中。

有几个 Web 服务器控件使用客户端回调。例如，TreeView 控件使用客户端回调实现其即需填充功能。有关更多信息，请参见 TreeView Web 服务器控件概述。

客户端回调组件

创建实现客户端回调的 ASP.NET 页与创建任何 ASP.NET 页类似，但也有如下这些区别。页的服务器代码必须：

实现 ICallbackEventHandler 接口。可以向任何 ASP.NET 网页添加此接口声明。

包括一个实现 RaiseCallbackEvent 接口的方法。此方法将被调用以执行从服务器发出的回调。

此外，该页还必须包含执行以下操作的三个客户端脚本函数：

一个函数调用帮助器方法，该方法执行对服务器的实际请求。在此函数中，可以首先执行自定义逻辑以准备事件参数，然后可以将一个字符串作为参数发送到服务器端回调事件处理程序。

另一个函数由处理回调事件的服务器代码的结果调用并接收该结果，同时接受表示该结果的字符串。该函数称为客户端回调函数。

第三个函数是执行对服务器的实际请求的 Helper 函数，当在服务器代码中使用 GetCallbackEventReference 方法生成对此函数的引用时，由 ASP.NET 自动生成该函数。

客户端回调及回发都是对起始页的请求，因此在 Web 服务器日志中将客户端回调及回发记录为页请求。

在服务器代码中实现合适的接口

若要从客户端成功运行服务器代码而不执行回发，则必须在服务器代码中实现适当的接口。

声明 ICallbackEventHandler 接口

可以将 ICallbackEventHandler 接口作为页的类声明的一部分进行声明。如果创建代码隐藏页，则可以通过使用如下语法声明该接口。

Visual Basic


复制代码

Partial Class CallBack_DB_aspx
Inherits System.Web.UI.Page
Implements System.Web.UI.ICallbackEventHandler

C#


复制代码

public partial class CallBack_DB_aspx :
System.Web.UI.Page, System.Web.UI.ICallbackEventHandler

如果正在处理单文件页或用户控件，则可以通过在页中使用 @ Implements 指令来添加声明，如下面的代码示例所示：

Visual Basic


复制代码

<%@ Page Language="VB" %>
<%@ Implements Interface="System.Web.UI.ICallbackEventHandler" %>

C#


复制代码

<%@ Page Language="C#" %>
<%@ Implements Interface="System.Web.UI.ICallbackEventHandler" %>

注意
接口名区分大小写。

创建服务器回调方法

在服务器代码中，必须创建一个实现 RaiseCallbackEvent 方法的方法和一个实现 GetCallbackResult 方法的方法。RaiseCallbackEvent 方法接受单个字符串参数，而不是通常用于事件处理程序的常见的两个参数。该方法的部分内容可能与下面的代码示例类似。

Visual Basic


复制代码

Public Sub RaiseCallbackEvent(ByVal eventArgument As String) _
Implements System.Web.UI.ICallbackEventHandler.RaiseCallbackEvent
Return eventArgument & " new value"
End Sub

C#


复制代码

public void RaiseCallbackEvent(String eventArgument)
{
return eventArgument + " new value";
}

GetCallbackResult 不接受参数并返回一个字符串。该方法的部分内容可能与下面的代码示例类似：

Visual Basic


复制代码

Public Function GetCallbackResult() As String Implements _
System.Web.UI.ICallbackEventHandler.GetCallbackResult
Return aStringValue
End Function

C#


复制代码

public string GetCallbackResult()
{
return aStringValue;
}

创建客户端脚本函数

必须向页中添加客户端脚本函数以执行两个功能：向服务器页发送回调和接收结果。这两个客户端脚本函数都是用 ECMAScript (JavaScript) 编写。

发送回调

发送回调的函数在服务器代码中生成。实际回调由任何页都可使用的、实现 ICallbackEventHandler 接口的库函数执行。通过调用页的 GetCallbackEventReference 方法可以获取对库函数的引用，该方法可通过页 ClientScript 属性进行访问。然后动态生成一个客户端函数，该函数包含对来自 GetCallbackEventReference 方法的返回值的调用。向该方法传递以下内容：对页的一个引用（在 C# 中为 this，在 Visual Basic 中为 Me）、传递数据时所依据的参数名称、将接收回调数据的客户端脚本函数的名称，以及传递所需的任何上下文的参数。

生成函数之后，通过调用 RegisterClientScriptBlock 方法将其插入到页中。

下面的代码示例演示如何动态创建一个名为 CallServer 的函数，该函数又调用回调。

Visual Basic


复制代码

Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) _
Handles Me.Load
Dim cm As ClientScriptManager = Page.ClientScript
Dim cbReference As String
cbReference = cm.GetCallbackEventReference(Me, "arg", _
"ReceiveServerData", "")
Dim callbackScript As String = ""
callbackScript &= "function CallServer(arg, context)" & _
"{" & cbReference & "; }"
cm.RegisterClientScriptBlock(Me.GetType(), _
"CallServer", callbackScript, True)End Sub

C#


复制代码

void Page_Load(object sender, EventArgs e)
{
ClientScriptManager cm = Page.ClientScript;
String cbReference = cm.GetCallbackEventReference(this, "arg",
"ReceiveServerData", "");
String callbackScript = "function CallServer(arg, context) {" +
cbReference + "; }";
cm.RegisterClientScriptBlock(this.GetType(),
"CallServer", callbackScript, true);
}

由正在生成的函数接受的参数名称应与传递给 GetCallbackEventReference 方法的值的名称相匹配。

下面的代码示例演示一些可用于调用回调并处理其返回值的标记：

Visual Basic


复制代码

<input type="button" value="Callback"
onclick="CallServer(1, alert('Callback'))"/>
<br />
<span id="Message"></span>

C#


复制代码

<input type="button" value="Callback"
onclick="CallServer(1, alert('Callback'))"/>
<br />
<span id="Message"></span>

接收回调

可以编写在页中静态接收回调的客户端函数。该函数的名称必须与在 GetCallbackEventReference 方法调用中传递的名称相匹配。接收函数接受两个字符串值：一个用于返回值，另一个（可选）用于从服务器传回的上下文值。

该函数可能与下面的代码示例类似：

<script type="text/javascript">
function ReceiveServerData(arg, context)
{
Message.innerText = 'Processed callback.';
}
</script>

请参见

参考

ClientScriptManager

在 ASP.NET 网页中不经过回发而实现客户端回调。HiddenField 控件。然后，在客户端脚本中，按隐藏字段的 ID 引用该字段；在服务器代码中，将值存储在任何一个代码块中，然后在另一个代码块中读取存储的值。若要从服务器代码向客户端脚本传递信息，可以使用 RegisterHiddenField 方法以编程的方式创建一个隐藏字段。使用此方法可以指定字段的 ID 和值，这样便可以在页面中以客户端脚本可读取的方式存储动态值。 Button、LinkButton 和 ImageButton 控件。在这些控件中，不能以声明方式使用 onclick 属性来向控件添加客户端脚本处理程序。ClientScriptManager 类的方法（如 RegisterClientScriptBlock 和 RegisterStartupScript），可以将客户端脚本或客户端脚本 include 语句插入页面中。有关详细信息，请参见如何：向 ASP.NET 网页动态添加客户端脚本。GridView、DetailsView、FormView、DataList 和 Repeater 控件）、用户控件和 Web 部件控件。 TextBox 控件的 Text 属性，可以创建类似以下的标记：