ユーザー コントロールと JavaScript で DynamicPopulate を使用する (C#)
作成者: Christian Wenz
ASP.NET AJAX Control Toolkit の DynamicPopulate コントロールは、Web サービス (またはページ メソッド) を呼び出し、ページを更新することなく、結果の値をページ上のターゲット コントロールに入力します。 カスタムのクライアント側 JavaScript コードを使用して設定をトリガーすることもできます。 ただし、このエクステンダーがユーザー コントロールに存在する場合は、特別な注意が必要です。
概要
ASP.NET AJAX Control Toolkit の DynamicPopulate コントロールは、Web サービス (またはページ メソッド) を呼び出し、ページを更新することなく、結果の値をページ上のターゲット コントロールに入力します。 カスタムのクライアント側 JavaScript コードを使用して設定をトリガーすることもできます。 ただし、このエクステンダーがユーザー コントロールに存在する場合は、特別な注意が必要です。
手順
まず、DynamicPopulateExtender コントロールによって呼び出されるるようにメソッドを実装する ASP.NET Web サービスが必要です。 この Web サービスは、DynamicPopulate コントロールが Web サービス呼び出しごとに 1 つのコンテキスト情報を送信するため、contextKey という名前の文字列型の 1 つの引数を受け取るメソッド getDate() を実装します。 現在の日付を 3 つの形式のいずれかで取得するコード (ファイル 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" />
また、このユーザー コントロール ファイルでは、3 つのラジオ ボタンを使用します。各ボタンは、Web サービスでサポートされている 3 つの日付形式のいずれかを表します。 ユーザーがいずれかのラジオ ボタンをクリックすると、ブラウザーは次のような 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.cs.asmx" ServiceMethod="getDate"/>
ここでも、コントロールで使用されている奇妙な ID (myDate の代わりに mcd1$myDate) に気が付いたかもしれません。 前に、JavaScript コードで DynamicPopulateExtender にアクセスするために dpe1 の代わりに mcd1_dpe1 が使用されていました。この名前付け方法は、ユーザー コントロール内で 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 サービスを呼び出し、現在の日付が目的の形式で表示されます。
ラジオ ボタンがユーザー コントロール内に存在します (フルサイズの画像を表示するにはクリックします)
