最終更新日 2006 年 3 月 15 日
.gif)
サンプル コードのダウンロード
(aspnettips_ClientCallback2.msi, 258 KB)
※このサンプルをお使いいただくためには、Visual Studio 2005 が必要です。
ページをリロードせずにサーバーとやり取りする方法については、ページをリロードせずにサーバーとやり取りする方法で紹介しました。ここで紹介したクライアント・コールバックは、パラメータとして 1つの文字列をサーバーからクライアントへ戻すものでした。
しかし、例えばデータベースのキーをサーバーへ投げ、該当するレコードの複数のフィールド値を取得したい場合には、どうすればよいでしょうか。そこで、今回は、クライアント・コールバックの機能を使い、複数の値をクライアントへ渡す方法を紹介します。
サンプル フォームの準備
まず、項目を選択すると、コールバックするリスト ボックスを用意します。次に項目が選択されると対応する画像を表示するイメージ コントロールと、画像の名称を表示するテキスト ボックスを用意します（リスト1、リスト2、および図1）。
したがって、今回は、画像のパスと画像の名称の 2つの値をコールバック値として受け取る必要があります。
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="ClientCallback.aspx.vb" Inherits="_ClientCallback" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head runat="server">
<title>Sample Page</title>
<script type="text/javascript">
function ChangeImage()
{
var lb = document.MyForm.ListImage;
var imageNo = lb.options[lb.selectedIndex].value
CallServer(imageNo, "");
}
function ReceiveServerData(rcvValue)
{
}
</script>
</head>
<body>
<form id="MyForm" runat="server">
<table border="1">
<tr>
<td>
画像番号
</td>
<td>
<select size="4" name="ListImage" onchange="ChangeImage();">
<option value="1">画像１</option>
<option value="2">画像２</option>
<option value="3">画像３</option>
</select>
</td>
</tr>
<tr>
<td>
イメージ
</td>
<td>
<asp:Image ID="Image1" runat="server" ImageUrl="dummy.gif" />
</td>
</tr>
<tr>
<td>
名称
</td>
<td>
<asp:TextBox ID="TextImageName" Runat="server"></asp:TextBox>
</td>
</tr>
</table>
</form>
</body>
</html> |
リスト1．ClientCallback.aspx
Partial Class _ClientCallback
Inherits System.Web.UI.Page
Implements System.Web.UI.ICallbackEventHandler
Private returnValue As String
Public Sub RaiseCallbackEvent(ByVal eventArgument As String) Implements System.Web.UI.ICallbackEventHandler.RaiseCallbackEvent
End Sub
Public Function GetCallbackResult() As String Implements System.Web.UI.ICallbackEventHandler.GetCallbackResult
Return returnValue
End Function
Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim cbReference As String
cbReference = Page.ClientScript.GetCallbackEventReference(Me, "arg", "ReceiveServerData", "context")
Dim callbackScript As String = ""
callbackScript &= "function CallServer(arg, context) { " & cbReference & "} ;"
Page.ClientScript.RegisterClientScriptBlock(Me.GetType(), "CallServer", callbackScript, True)
End Sub
End Class |
リスト2．ClientCallback.aspx.vb
.gif)
図
1. ClientCallback.aspx
のデザイナ画面
サーバー コールバック メソッドで複数の値を結合する
リスト2 のコードでは、RaiseCallbackEvent に処理を実装していないので、ここでコールバック値を作成しましょう。今回は、画像のパス以外に、画像の名称も戻す必要がありますが、クライアントに戻せるコールバック値は 1つの文字列のみです。そこで、改行コードを値の仕切りとして使い、複数の値を結合した文字列を作成してクライアントに戻すことにします（リスト3）。
Public Sub RaiseCallbackEvent(ByVal eventArgument As String) Implements System.Web.UI.ICallbackEventHandler.RaiseCallbackEvent
Dim strName As String = ""
Dim strFile As String = "dummy.gif"
Select Case eventArgument
Case 1
strName = "円形"
strFile = "円.gif"
Case 2
strName = "三角形"
strFile = "三角.gif"
Case 3
strName = "四角形"
strFile = "四角.gif"
End Select
' 改行コードを区切りにして複数パラメータを渡す
returnValue = strName
returnValue += vbCrLf ' 改行コード
returnValue += strFile
End Sub |
リスト3．ClientCallback.aspx.vb に追加するコード
クライアント コールバック メソッドで複数の値を分離する
リスト1 のコードでは、ReceiveServerData に処理を実装していないので、ここで受け取ったコールバック値を複数の値に分離します（リスト4）。分離した値は、結合した順番に格納された文字列の配列になります。もし、パラメータとして数値を受け取りたい場合には、ここで型変換の処理を行う必要があります。
<script type="text/javascript">
function ReceiveServerData(rcvValue)
{
rcvValues = rcvValue.split(unescape("%0D%0A"));
document.MyForm.TextImageName.value = rcvValues[0];
document.MyForm.Image1.src = rcvValues[1];
}
</script> |
リスト4．ClientCallback.aspx に追加するコード
完成した ClientCallback.aspx と ClientCallback.aspx.vb は、リスト5 およびリスト6 になり、実行結果は図2 のようになります。
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="ClientCallback.aspx.vb" Inherits="_ClientCallback" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head runat="server">
<title>Sample Page</title>
<script type="text/javascript">
function ChangeImage()
{
var lb = document.MyForm.ListImage;
var imageNo = lb.options[lb.selectedIndex].value
CallServer(imageNo, "");
}
function ReceiveServerData(rcvValue)
{
rcvValues = rcvValue.split(unescape("%0D%0A"));
document.MyForm.TextImageName.value = rcvValues[0];
document.MyForm.Image1.src = rcvValues[1];
}
</script>
</head>
<body>
<form id="MyForm" runat="server">
<table border="1">
<tr>
<td>
画像番号
</td>
<td>
<select size="4" name="ListImage" onchange="ChangeImage();">
<option value="1">画像１</option>
<option value="2">画像２</option>
<option value="3">画像３</option>
</select>
</td>
</tr>
<tr>
<td>
イメージ
</td>
<td>
<asp:Image ID="Image1" runat="server" ImageUrl="dummy.gif" />
</td>
</tr>
<tr>
<td>
名称
</td>
<td>
<asp:TextBox ID="TextImageName" Runat="server"></asp:TextBox>
</td>
</tr>
</table>
</form>
</body>
</html> |
リスト5．ClientCallback.aspx
Partial Class _ClientCallback
Inherits System.Web.UI.Page
Implements System.Web.UI.ICallbackEventHandler
Private returnValue As String
Public Sub RaiseCallbackEvent(ByVal eventArgument As String) Implements System.Web.UI.ICallbackEventHandler.RaiseCallbackEvent
Dim strName As String = ""
Dim strFile As String = "dummy.gif"
Select Case eventArgument
Case 1
strName = "円形"
strFile = "円.gif"
Case 2
strName = "三角形"
strFile = "三角.gif"
Case 3
strName = "四角形"
strFile = "四角.gif"
End Select
' 改行コードを区切りにして複数パラメータを渡す
returnValue += strName
returnValue += vbCrLf ' 改行コード
returnValue += strFile
End Sub
Public Function GetCallbackResult() As String Implements System.Web.UI.ICallbackEventHandler.GetCallbackResult
Return returnValue
End Function
Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim cbReference As String
cbReference = Page.ClientScript.GetCallbackEventReference(Me, "arg", "ReceiveServerData", "context")
Dim callbackScript As String = ""
callbackScript &= "function CallServer(arg, context) { " & cbReference & "} ;"
Page.ClientScript.RegisterClientScriptBlock(Me.GetType(), "CallServer", callbackScript, True)
End Sub
End Class |
リスト6．ClientCallback.aspx.vb
.gif)
図
2. ClientCallback.aspx
の実行結果