JavaScript コードを使用してコントロールに動的に入力する (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

次のステップでは、新しい ASP.NET サイトを作成し、次の ASP.NET AJAX ScriptManager コントロールから開始します。

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

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

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

次は、DynamicPopulateExtender コントロールを追加し、Web サービス情報、ターゲット コントロールを指定しますが、入力をトリガーするコントロールの名前は指定しません。これは後でカスタム JavaScript を使用して行われます。

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

次は JavaScript に取りかかります。 ASP.NET AJAX ライブラリによって定義された $find() 関数は、DynamicPopulateExtender などの ASP.NET AJAX Control Toolkit のサーバー側オブジェクトへの参照を返します。 現在のファイルで、$find("dpe") を指定すると、ページ内の 1 つの DynamicPopulateExtender への参照が返されます。 動的入力プロセスをトリガーするメソッド populate() が公開されます。 この populate() メソッドには、getDate() Web メソッドへの引数として機能するコンテキスト キーという 1 つの引数が必要です。 たとえば、$find("dpe").populate("format1") を指定すると、月、日、年の形式の現在の日付でラベルが入力されます。

サンプルの柔軟性を高めるために、ユーザーは複数の日付形式から選択できるようになりました。 それぞれについて、ラジオ ボタンが表示されます。 ユーザーがラジオ ボタンをクリックすると、JavaScript コードによって、選択した日付形式でラベルが動的に入力されます。 これらのラジオ ボタンを次に示します。

<asp:Panel ID="panel1" runat="server">
 <input type="radio" id="rb1" name="format" value="format1" runat="server"
 onclick="$find('dpe1').populate(this.value);" />m-d-y
 <input type="radio" id="rb2" name="format" value="format2" runat="server"
 onclick="$find('dpe1').populate(this.value);" />d.m.y
 <input type="radio" id="rb3" name="format" value="format3" runat="server"
 onclick="$find('dpe1').populate(this.value);" />y/m/d
</asp:Panel>

ラジオ ボタンのコンテキスト内では、JavaScript 式 this.value は現在のボタンの値を参照します。これは、getDate() メソッドで操作できる情報とまったく同じであることに注意してください。

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

前へ次へ