通过用户控件和 JavaScript 使用 DynamicPopulate (C#)

  • 项目

作者 ：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.cs.asmx) ，它以以下三种格式之一检索当前日期：

<%@ WebService Language="C#" Class="DynamicPopulate" %>
using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Script.Services;
[ScriptService]
public class DynamicPopulate : System.Web.Services.WebService
{
 [WebMethod]
 public string getDate(string contextKey)
 {
 string myDate = "";
 switch (contextKey)
 {
 case "format1":
 myDate = String.Format("{0:MM}-{0:dd}-{0:yyyy}", DateTime.Now);
 break;
 case "format2":
 myDate = String.Format("{0:dd}.{0:MM}.{0:yyyy}", DateTime.Now);
 break;
 case "format3":
 myDate = String.Format("{0:yyyy}/{0:MM}/{0:dd}", DateTime.Now);
 break;
 }
 return myDate;
 }
}

在下一步中， (文件) .ascx 创建新的用户控件，在第一行中用以下声明表示：

<%@ Control Language="C#" ClassName="DynamicPopulate2" %>

元素 <label> 将用于显示来自服务器的数据。

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

此外，在用户控制文件中，我们将使用三个单选按钮，每个按钮表示 Web 服务支持的三种可能日期格式之一。 当用户单击其中一个单选按钮时，浏览器将执行如下所示的 JavaScript 代码：

$find("mcd1_dpe1").populate(this.value)

此代码访问 DynamicPopulateExtender (不必担心奇怪的 ID，稍后将在) 中介绍这一点，并使用数据触发动态填充。 在当前单选按钮的上下文中，this.value引用其值为 ，format2或format3完全是 Web 方法所需的值format1。

用户控件中唯 DynamicPopulateExtender 一缺少的是将单选按钮链接到 Web 服务的控件。

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

同样，你可能会注意到 控件中使用的奇怪 ID： mcd1$myDate 而不是 myDate。 以前，JavaScript 代码用于 mcd1_dpe1 访问 而不是 DynamicPopulateExtenderdpe1。在用户控件中使用 DynamicPopulateExtender 时，此命名策略是一项特殊要求。 此外，必须以特定方式嵌入用户控件，使其一切正常工作。 创建新的 ASP.NET 页，并为刚刚实现的用户控件注册标记前缀：

<%@ Register TagPrefix="uc1" TagName="myCustomDate" Src="~/DynamicPopulate2.cs.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 服务，并按所需格式显示当前日期。

单选按钮驻留在用户控件中

单选按钮驻留在用户控件中 (单击以查看全尺寸图像)

上一页下一页