使用 JavaScript 代码动态填充控件 (VB)

作者 ：Christian Wenz

下载 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() 完全相同。

单击该按钮将从服务器检索日期，格式为 (单击以查看全尺寸图像)

上一页下一页