コントロールに動的に入力する (C#)

  • [アーティクル]

作成者: Christian Wenz

PDF のダウンロード

ASP.NET AJAX Control Toolkit の DynamicPopulate コントロールは、Web サービス (またはページ メソッド) を呼び出し、ページを更新することなく、結果の値をページ上のターゲット コントロールに入力します。

概要

ASP.NET AJAX Control Toolkit の DynamicPopulate コントロールは、Web サービス (またはページ メソッド) を呼び出し、ページを更新することなく、結果の値をページ上のターゲット コントロールに入力します。 このチュートリアルでは、これを設定する方法を示します。

手順

まず、DynamicPopulate によって呼び出されるるようにメソッドを実装する ASP.NET Web サービスが必要です。 この Web サービス クラスには、Microsoft.Web.Script.Services 内で定義されている ScriptService 属性が必要です。そうでないと、ASP.NET AJAX では、DynamicPopulate によって必要とされる Web サービスのクライアント側 JavaScript プロキシを作成できません。

この Web メソッドは、contextKey という名前の文字列型の 1 つの引数を受け取る必要があります。DynamicPopulate コントロールでは Web サービス呼び出しごとに 1 つのコンテキスト情報を送信するためです。 次の Web サービスでは、contextKey 引数で表される形式で現在の日付を返します。

<%@ 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;
 }
}

これで、この Web サービスは DynamicPopulate.cs.asmx として保存されます。 または、getDate() メソッドを、DynamicPopulate コントロールを使用して実際の ASP.NET ページ内のページ メソッドとして実装することもできます。

次の手順では、新しい ASP.NET ファイルを作成します。 通常どおり、最初の手順では、ScriptManager を現在のページに含めて、ASP.NET AJAX ライブラリを読み込み、Control Toolkit を動作させます。

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

次に、(同じ名前の HTML コントロールや <asp:Label /> Web コントロールなどを使用して) ラベル コントロールを追加します。これには、後で Web サービス呼び出しの結果が表示されます。

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

次に、HTML ボタン (サーバーへのポストバックは必要ないため、HTML コントロールとして) を使用して動的入力がトリガーされます。

<input type="button" id="Button1" runat="server" value="Load date (m-d-y)" />

最後に、物事を結び付ける DynamicPopulateExtender コントロールが必要です。 次の属性が設定されます (明らかである ID および runat="server" とは別に)。

  • TargetControlID: Web サービス呼び出しからの結果を挿入する場所
  • ServicePath: Web サービスへのパス (ページ メソッドを使用する場合は省略)
  • ServiceMethod: Web メソッドまたはページ メソッドの名前
  • ContextKey: Web サービスに送信されるコンテキスト情報
  • PopulateTriggerControlID: Web サービス呼び出しをトリガーする要素
  • ClearContentsDuringUpdate: Web サービス呼び出し中にターゲット要素を空にするかどうか

ご覧のとおり、このコントロールにはいくつかの情報が必要ですが、すべて非常に簡単に用意できます。 現在のシナリオでの DynamicPopulateExtender コントロールのマークアップを次に示します。

<ajaxToolkit:DynamicPopulateExtender ID="dpe1" runat="server"
 ClearContentsDuringUpdate="true"
 TargetControlID="myDate" ServicePath="DynamicPopulate.cs.asmx"
 ServiceMethod="getDate"
 ContextKey="format1" PopulateTriggerControlID="Button1" />

ブラウザで ASP.NET ページを実行し、ボタンをクリックします。現在の日付が月日年の形式で表示されます。

A click on the button retrieves the date from the server

ボタンをクリックすると、サーバーから日付が取得されます (クリックしてフルサイズの画像を表示します)

次へ