作者 :克里斯蒂安·温茨
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
在下一步中,创建一个新的用户控件(.ascx 文件),由以下声明在其第一行中表示:
<%@ Control Language="C#" ClassName="DynamicPopulate2" %>
<
label
>元素将用于显示来自服务器的数据。
<label id="myDate" runat="server" />
此外,在用户控制文件中,我们将使用三个单选按钮,每个按钮表示 Web 服务支持的三种可能日期格式之一。 当用户单击其中一个单选按钮时,浏览器将执行如下所示的 JavaScript 代码:
$find("mcd1_dpe1").populate(this.value)
此代码访问DynamicPopulateExtender(无需担心奇怪的 ID,这会在后面介绍),并动态填充数据。 在当前单选按钮的上下文中,this.value 表示其值为 format1、format2 或 format3,正是 Web 方法所期望的内容。
用户控件中唯一缺少的内容是将单选按钮链接到 Web 服务的 DynamicPopulateExtender 控件。
<ajaxToolkit:DynamicPopulateExtender ID="dpe1" runat="server"
ClearContentsDuringUpdate="true"
TargetControlID="mcd1$myDate"
ServicePath="DynamicPopulate.vb.asmx" ServiceMethod="getDate"/>
同样,你可能会注意到控件中使用的奇怪 ID: mcd1$myDate 而不是 myDate。 以前,JavaScript 代码使用 mcd1_dpe1 来访问 DynamicPopulateExtender,而不是使用 dpe1。在用户控件中使用DynamicPopulateExtender时,此命名策略是一个特殊要求。 此外,必须以特定方式嵌入用户控件才能使其全部正常工作。 创建新的 ASP.NET 页,并为刚刚实现的用户控件注册标记前缀:
<%@ Register TagPrefix="uc1" TagName="myCustomDate" Src="~/DynamicPopulate2.vb.ascx"%>
然后,在新页面上包括 ASP.NET AJAX ScriptManager 控件:
<asp:ScriptManager ID="asm" runat="server" />
最后,将用户控件添加到页面。 你只需设置其 ID 属性( runat="server"当然),但还必须将其设置为特定名称: mcd1 因为这是用户控件中使用的前缀,以使用 JavaScript 访问它。
<div>
<uc1:myCustomDate ID="mcd1" runat="server" />
</div>
就是这样! 页面的行为按预期方式运行:用户单击其中一个单选按钮,工具包中的控件调用 Web 服务,并按所需格式显示当前日期。
单选按钮驻留在用户控件中(单击以查看全尺寸图像)