使用 JavaScript 代码动态填充控件 （VB）

作者 ：克里斯蒂安·温茨

下载 PDF

ASP.NET AJAX 控件工具包中的 DynamicPopulate 控件调用 Web 服务（或页面方法），并将生成的值填充到页面上的目标控件中，而无需刷新页面。 还可以使用自定义客户端 JavaScript 代码触发数据填充。

概述

DynamicPopulate ASP.NET AJAX 控件工具包中的控件调用 Web 服务（或页面方法），并将生成的值填充到页面上的目标控件中，而无需刷新页面。 还可以使用自定义客户端 JavaScript 代码触发数据填充。

步骤

首先，需要一个 ASP.NET Web 服务，它实现控件调用 DynamicPopulateExtender 的方法。 Web 服务实现的方法 getDate() 需要一个类型为字符串的参数 contextKey，因为控件 DynamicPopulate 在每次 Web 服务调用中发送一段上下文信息。 下面是以以下三种格式之一检索当前日期的代码（文件 DynamicPopulate.vb.asmx）：

<%@ WebService Language="VB" Class="DynamicPopulate" %>
Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Web.Script.Services
<ScriptService()> _
Public Class DynamicPopulate
 Inherits System.Web.Services.WebService
 <WebMethod()> _
 Public Function getDate(ByVal contextKey As String) As String
 Dim myDate As String = ""
 Select Case contextKey
 Case "format1"
 myDate = String.Format("{0:MM}-{0:dd}-{0:yyyy}", DateTime.Now)
 Case "format2"
 myDate = String.Format("{0:dd}.{0:MM}.{0:yyyy}", DateTime.Now)
 Case "format3"
 myDate = String.Format("{0:yyyy}/{0:MM}/{0:dd}", DateTime.Now)
 End Select
 Return myDate
 End Function
End Class

在下一步中，创建新的 ASP.NET 站点，并从 ASP.NET AJAX ScriptManager 控件开始：

<asp:ScriptManager ID="asm" runat="server" />

然后，添加标签控件（例如，使用同名的 HTML 控件或 <asp:Label /> Web 控件），稍后将显示 Web 服务调用的结果。

<label id="myDate" runat="server" />

接下来，包括一个 DynamicPopulateExtender 控件并提供 Web 服务信息、目标控件，但不包括触发填充的控件的名称，稍后将使用自定义 JavaScript 完成此操作！

<ajaxToolkit:DynamicPopulateExtender ID="dpe1" runat="server"
 ClearContentsDuringUpdate="true"
 TargetControlID="myDate" ServicePath="DynamicPopulate.vb.asmx"
 ServiceMethod="getDate" />

现在，进入 JavaScript 部分。 $find()该函数由 ASP.NET AJAX 库定义，返回对 ASP.NET AJAX 控件工具包（例如DynamicPopulateExtender）服务器端对象的引用。 在当前文件中， $find("dpe") 返回对页面中一个 DynamicPopulateExtender 控件的引用。 它公开一种调用 populate() 的方法，该方法触发动态填充进程。 该方法 populate() 需要一个参数：将用作 Web 方法参数的 getDate() 上下文键。 因此，例如，$find("dpe").populate("format1") 将按月-日-年的格式填充当前日期到标签中。

为了使示例更加灵活，用户现在可以在多种日期格式之间进行选择。 对于每一个，它们都会显示一个单选按钮。 用户单击单选按钮后，JavaScript 代码将使用所选日期格式动态填充标签。 下面是这些单选按钮：

<asp:Panel ID="panel1" runat="server">
 <input type="radio" id="rb1" name="format" value="format1" runat="server"
 onclick="$find('dpe1').populate(this.value);" />m-d-y
 <input type="radio" id="rb2" name="format" value="format2" runat="server"
 onclick="$find('dpe1').populate(this.value);" />d.m.y
 <input type="radio" id="rb3" name="format" value="format3" runat="server"
 onclick="$find('dpe1').populate(this.value);" />y/m/d
</asp:Panel>

请注意，在单选按钮的上下文中，JavaScript 表达式 this.value 引用当前按钮的值，该值恰好与该方法可以处理的信息 getDate() 完全相同。

单击该按钮将从服务器检索日期（按指定的格式（单击以查看全尺寸图像）