ユーザー コントロールと JavaScript で DynamicPopulate を使用する (VB)

作成者: Christian Wenz

PDF のダウンロード

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.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" />

また、このユーザー コントロール ファイルでは、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.vb.asmx" ServiceMethod="getDate"/>

ここでも、コントロールで使用されている奇妙な ID (myDate の代わりに mcd1$myDate) に気が付いたかもしれません。 前に、JavaScript コードで DynamicPopulateExtender にアクセスするために dpe1 の代わりに mcd1_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 サービスを呼び出し、現在の日付が目的の形式で表示されます。

ラジオ ボタンがユーザー コントロール内に存在します (フルサイズの画像を表示するにはクリックします)

前へ