DoboWiki
Top
> .NETプログラミング研究/79 をテンプレートにして作成
.NETプログラミング研究/79 をテンプレートにして作成
開始行:
#title(ASP.NETでAjaxを使用したWebアプリケーションを作成す...
#navi(.NETプログラミング研究)
#contents
*ASP.NETでAjaxを使用したWebアプリケーションを作成する 2 [...
前号では.NETの機能を一切使用せず、自分でJavaScriptを書く...
**ICallbackEventHandlerインターフェイスを実装することによ...
.NET Framework 2.0からは、ICallbackEventHandlerインターフ...
なおこの方法は、「クライアント コールバック」と呼ばれ、MS...
補足:以前「[[ASP.NET Web ページでポストバックせずにクラ...
***コード [#g8f5b109]
早速ですが、まず具体的なコードを示し、コードの説明は後に...
まずメインのページとなるASPXファイルは、次のようにします...
#code(vbnet){{
<%@ Page Language="VB" %>
<%@ Implements Interface="System.Web.UI.ICallbackEventHan...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional...
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
Protected Sub Page_Load(ByVal sender As Object, ByVal...
'callbackServer関数を作成する
Dim callbackReference As String = _
Page.ClientScript.GetCallbackEventReference( _
Me, "arg", "receiveServerData", "", "call...
Dim callbackScript As String = _
"function callbackServer(arg, context) {" + _
callbackReference + "; }"
'callbackServer関数のJavaScriptブロックをページに...
Page.ClientScript.RegisterClientScriptBlock( _
Me.GetType(), "callbackServer", callbackScrip...
End Sub
Dim callbackResult As String
'クライアントから呼び出されるメソッド
Sub RaiseCallbackEvent(ByVal eventArgument As String) _
Implements System.Web.UI.ICallbackEventHandler.Ra...
Dim fee As Integer = Me.GetYoupackFee(Integer.Par...
Me.callbackResult = fee.ToString()
End Sub
'結果を返す
Function GetCallbackResult() As String _
Implements System.Web.UI.ICallbackEventHandler.Ge...
Return Me.callbackResult
End Function
Public Function GetYoupackFee(ByVal packSize As Integ...
If packSize <= 60 Then
Return 600
ElseIf packSize <= 80 Then
Return 800
ElseIf packSize <= 100 Then
Return 1000
ElseIf packSize <= 120 Then
Return 1200
ElseIf packSize <= 140 Then
Return 1400
ElseIf packSize <= 160 Then
Return 1600
ElseIf packSize <= 170 Then
Return 1700
Else
Return -1
End If
End Function
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>ゆうパック送料検索</title>
<script type="text/javascript" src="callback.js"></sc...
</head>
<body>
<h1>ゆうパック送料検索</h1>
<p>同一都道府県内への配達、重量30kgまで</p>
<form id="form1" runat="server">
<div>
<asp:Label
ID="Label1"
runat="server"
Text="荷物の大きさ(縦・横・高さの合計): "
AssociatedControlID="PackageSizeList"></asp:L...
<asp:DropDownList
ID="PackageSizeList"
runat="server">
<asp:ListItem Value="0">(選択してください)<...
<asp:ListItem Value="60">60cmまで</asp:ListIt...
<asp:ListItem Value="80">80cmまで</asp:ListIt...
<asp:ListItem Value="100">100cmまで</asp:List...
<asp:ListItem Value="120">120cmまで</asp:List...
<asp:ListItem Value="140">140cmまで</asp:List...
<asp:ListItem Value="160">160cmまで</asp:List...
<asp:ListItem Value="170">170cmまで</asp:List...
</asp:DropDownList>
<br />
<asp:Label ID="ResultLabel" runat="server"></asp:...
</div>
</form>
</body>
</html>
}}
#code(csharp){{
<%@ Page Language="C#" %>
<%@ Implements Interface="System.Web.UI.ICallbackEventHan...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional...
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
//callbackServer関数を作成する
string callbackReference =
Page.ClientScript.GetCallbackEventReference(
this, "arg", "receiveServerData", "", "callba...
string callbackScript = "function callbackServer(...
callbackReference + "; }";
//callbackServer関数のJavaScriptブロックをページ...
Page.ClientScript.RegisterClientScriptBlock(
this.GetType(), "callbackServer", callbackScr...
}
#region ICallbackEventHandler メンバ
string callbackResult;
//クライアントから呼び出されるメソッド
void ICallbackEventHandler.RaiseCallbackEvent(string ...
{
int fee = this.GetYoupackFee(int.Parse(eventArgum...
this.callbackResult = fee.ToString();
}
//結果を返す
string ICallbackEventHandler.GetCallbackResult()
{
return this.callbackResult;
}
public int GetYoupackFee(int packSize)
{
if (packSize <= 60)
return 600;
else if (packSize <= 80)
return 800;
else if (packSize <= 100)
return 1000;
else if (packSize <= 120)
return 1200;
else if (packSize <= 140)
return 1400;
else if (packSize <= 160)
return 1600;
else if (packSize <= 170)
return 1700;
else
return -1;
}
#endregion
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>ゆうパック送料検索</title>
<script type="text/javascript" src="callback.js"></sc...
</head>
<body>
<h1>ゆうパック送料検索</h1>
<p>同一都道府県内への配達、重量30kgまで</p>
<form id="form1" runat="server">
<div>
<asp:Label
ID="Label1"
runat="server"
Text="荷物の大きさ(縦・横・高さの合計): "
AssociatedControlID="PackageSizeList"></asp:L...
<asp:DropDownList
ID="PackageSizeList"
runat="server">
<asp:ListItem Value="0">(選択してください)<...
<asp:ListItem Value="60">60cmまで</asp:ListIt...
<asp:ListItem Value="80">80cmまで</asp:ListIt...
<asp:ListItem Value="100">100cmまで</asp:List...
<asp:ListItem Value="120">120cmまで</asp:List...
<asp:ListItem Value="140">140cmまで</asp:List...
<asp:ListItem Value="160">160cmまで</asp:List...
<asp:ListItem Value="170">170cmまで</asp:List...
</asp:DropDownList>
<br />
<asp:Label ID="ResultLabel" runat="server"></asp:...
</div>
</form>
</body>
</html>
}}
JavaScriptは外部ファイル"callback.js"に記述しています。"c...
#code(javascript){{
var msgElement, listElement;
//onloadイベントハンドラを追加
if (window.addEventListener)
{
window.addEventListener("load", onLoad, false);
}
else if (window.attachEvent)
{
window.attachEvent("onload", onLoad);
}
else
{
window.onload = onLoad;
}
//onloadイベントハンドラ
function onLoad()
{
msgElement = document.getElementById("ResultLabel");
listElement = document.getElementById("PackageSizeLis...
if (window.addEventListener)
{
listElement.addEventListener("change", onChange, ...
}
else if (window.attachEvent)
{
listElement.attachEvent("onchange", onChange);
}
else
{
listElement.onchange = onChange;
}
}
//リストのonchangeイベントハンドラ
function onChange()
{
if (listElement.value == "0")
{
msgElement.innerHTML = "";
return;
}
msgElement.innerHTML = "読み込み中...";
//サーバーのメソッドを呼び出す
callbackServer(listElement.value, "");
}
//サーバーが返したデータを取得するイベントハンドラ
function receiveServerData(arg, context)
{
msgElement.innerHTML = "料金は " + arg + "円";
}
//サーバーでエラーが発生した時に結果を取得するイベントハ...
function callbackError(arg, context)
{
msgElement.innerHTML = "エラーが発生しました";
}
}}
***JavaScriptのコードの説明 [#ge0c5feb]
まずは、JavaScriptのコードの説明をします。前回のJavaScrip...
まず、XMLHttpRequestを使用してサーバーと通信を行う部分が...
補足:実は、callbackServer関数にパラメータを全く指定しな...
callbackServer関数を呼び出した後、サーバーからデータが正...
サーバーがエラーを返した時(例えばこの例では、サーバーに...
なお、ここで登場したcallbackServer、receiveServerData、ca...
***ICallbackEventHandlerインターフェイスの実装 [#u796a99e]
次に、ASPXファイルのコードについて説明します。
まず、ページクラスにICallbackEventHandlerインターフェイス...
#code(vbnet){{
Partial Class _Default
Inherits System.Web.UI.Page
Implements System.Web.UI.ICallbackEventHandler
'(省略)
End Class
}}
#code(csharp){{
partial class _Default : System.Web.UI.Page, ICallbackEve...
{
//(省略)
}
}}
補足:ICallbackEventHandlerインターフェイスはユーザーコン...
ICallbackEventHandlerインターフェイスのメンバには、RaiseC...
返す結果は、必ず文字列(String型)です。もし複数の値を返...
***GetCallbackEventReferenceメソッド [#t43915de]
最後に、Page_Loadメソッド内の説明をします。ここで、callba...
まず、ClientScriptManagerオブジェクトのGetCallbackEventRe...
GetCallbackEventReferenceメソッドの1番目のパラメータには...
3番目のパラメータには、サーバーから返された結果を受け取る...
同様に、5番目のパラメータには、サーバーで発生したエラーを...
2番目のパラメータには、サーバーのRaiseCallbackEventメソッ...
この2番目のパラメータは、必ずしも"arg"とする必要はありま...
4番目のパラメータには、コンテクストとするデータを指定しま...
このようにしておけば、例えば複数の箇所からcallbackServer...
また、receiveServerData関数やcallbackError関数に渡したい...
最後の6番目のパラメータには、非同期的に実行するか否かを指...
上記のコードでは、GetCallbackEventReferenceメソッドは次の...
#pre{{
WebForm_DoCallback('__Page',arg,receiveServerData,context...
}}
GetCallbackEventReferenceメソッドを呼び出した後は、このメ...
#pre{{
function callbackServer(arg, context) {
WebForm_DoCallback('__Page',arg,receiveServerData,"contex...
}
}}
最後にこれをRegisterClientScriptBlockメソッドを使って、ペ...
#pre{{
<script type="text/javascript">
<!--
function callbackServer(arg, context) {
WebForm_DoCallback('__Page',arg,receiveServerData,"contex...
}// -->
</script>
}}
これで、callbackServer関数を呼び出せるようになりました。
補足:callbackServer関数以外に、srcが"/AjaxWebSite/WebRes...
なおこのような「クライアントコールバック」において、サー...
クライアントがPOSTするデータには、"__CALLBACKID"や"__CALL...
サーバーが返す値には、GetCallbackResultメソッドが返す文字...
**参考 [#s2bc10b2]
-[[An Introduction to AJAX Techniques and Frameworks for ...
-[[ページをリロードせずにサーバーとやり取りする方法>http:...
-[[クライアント・コールバックで複数の値をクライアントへ渡...
-[[クライアント・コールバックでデータベースの値を表示する...
**コメント [#def6338e]
#comment
//これより下は編集しないでください
#pageinfo([[:Category/.NET]] [[:Category/ASP.NET]],2007-1...
終了行:
#title(ASP.NETでAjaxを使用したWebアプリケーションを作成す...
#navi(.NETプログラミング研究)
#contents
*ASP.NETでAjaxを使用したWebアプリケーションを作成する 2 [...
前号では.NETの機能を一切使用せず、自分でJavaScriptを書く...
**ICallbackEventHandlerインターフェイスを実装することによ...
.NET Framework 2.0からは、ICallbackEventHandlerインターフ...
なおこの方法は、「クライアント コールバック」と呼ばれ、MS...
補足:以前「[[ASP.NET Web ページでポストバックせずにクラ...
***コード [#g8f5b109]
早速ですが、まず具体的なコードを示し、コードの説明は後に...
まずメインのページとなるASPXファイルは、次のようにします...
#code(vbnet){{
<%@ Page Language="VB" %>
<%@ Implements Interface="System.Web.UI.ICallbackEventHan...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional...
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
Protected Sub Page_Load(ByVal sender As Object, ByVal...
'callbackServer関数を作成する
Dim callbackReference As String = _
Page.ClientScript.GetCallbackEventReference( _
Me, "arg", "receiveServerData", "", "call...
Dim callbackScript As String = _
"function callbackServer(arg, context) {" + _
callbackReference + "; }"
'callbackServer関数のJavaScriptブロックをページに...
Page.ClientScript.RegisterClientScriptBlock( _
Me.GetType(), "callbackServer", callbackScrip...
End Sub
Dim callbackResult As String
'クライアントから呼び出されるメソッド
Sub RaiseCallbackEvent(ByVal eventArgument As String) _
Implements System.Web.UI.ICallbackEventHandler.Ra...
Dim fee As Integer = Me.GetYoupackFee(Integer.Par...
Me.callbackResult = fee.ToString()
End Sub
'結果を返す
Function GetCallbackResult() As String _
Implements System.Web.UI.ICallbackEventHandler.Ge...
Return Me.callbackResult
End Function
Public Function GetYoupackFee(ByVal packSize As Integ...
If packSize <= 60 Then
Return 600
ElseIf packSize <= 80 Then
Return 800
ElseIf packSize <= 100 Then
Return 1000
ElseIf packSize <= 120 Then
Return 1200
ElseIf packSize <= 140 Then
Return 1400
ElseIf packSize <= 160 Then
Return 1600
ElseIf packSize <= 170 Then
Return 1700
Else
Return -1
End If
End Function
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>ゆうパック送料検索</title>
<script type="text/javascript" src="callback.js"></sc...
</head>
<body>
<h1>ゆうパック送料検索</h1>
<p>同一都道府県内への配達、重量30kgまで</p>
<form id="form1" runat="server">
<div>
<asp:Label
ID="Label1"
runat="server"
Text="荷物の大きさ(縦・横・高さの合計): "
AssociatedControlID="PackageSizeList"></asp:L...
<asp:DropDownList
ID="PackageSizeList"
runat="server">
<asp:ListItem Value="0">(選択してください)<...
<asp:ListItem Value="60">60cmまで</asp:ListIt...
<asp:ListItem Value="80">80cmまで</asp:ListIt...
<asp:ListItem Value="100">100cmまで</asp:List...
<asp:ListItem Value="120">120cmまで</asp:List...
<asp:ListItem Value="140">140cmまで</asp:List...
<asp:ListItem Value="160">160cmまで</asp:List...
<asp:ListItem Value="170">170cmまで</asp:List...
</asp:DropDownList>
<br />
<asp:Label ID="ResultLabel" runat="server"></asp:...
</div>
</form>
</body>
</html>
}}
#code(csharp){{
<%@ Page Language="C#" %>
<%@ Implements Interface="System.Web.UI.ICallbackEventHan...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional...
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
//callbackServer関数を作成する
string callbackReference =
Page.ClientScript.GetCallbackEventReference(
this, "arg", "receiveServerData", "", "callba...
string callbackScript = "function callbackServer(...
callbackReference + "; }";
//callbackServer関数のJavaScriptブロックをページ...
Page.ClientScript.RegisterClientScriptBlock(
this.GetType(), "callbackServer", callbackScr...
}
#region ICallbackEventHandler メンバ
string callbackResult;
//クライアントから呼び出されるメソッド
void ICallbackEventHandler.RaiseCallbackEvent(string ...
{
int fee = this.GetYoupackFee(int.Parse(eventArgum...
this.callbackResult = fee.ToString();
}
//結果を返す
string ICallbackEventHandler.GetCallbackResult()
{
return this.callbackResult;
}
public int GetYoupackFee(int packSize)
{
if (packSize <= 60)
return 600;
else if (packSize <= 80)
return 800;
else if (packSize <= 100)
return 1000;
else if (packSize <= 120)
return 1200;
else if (packSize <= 140)
return 1400;
else if (packSize <= 160)
return 1600;
else if (packSize <= 170)
return 1700;
else
return -1;
}
#endregion
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>ゆうパック送料検索</title>
<script type="text/javascript" src="callback.js"></sc...
</head>
<body>
<h1>ゆうパック送料検索</h1>
<p>同一都道府県内への配達、重量30kgまで</p>
<form id="form1" runat="server">
<div>
<asp:Label
ID="Label1"
runat="server"
Text="荷物の大きさ(縦・横・高さの合計): "
AssociatedControlID="PackageSizeList"></asp:L...
<asp:DropDownList
ID="PackageSizeList"
runat="server">
<asp:ListItem Value="0">(選択してください)<...
<asp:ListItem Value="60">60cmまで</asp:ListIt...
<asp:ListItem Value="80">80cmまで</asp:ListIt...
<asp:ListItem Value="100">100cmまで</asp:List...
<asp:ListItem Value="120">120cmまで</asp:List...
<asp:ListItem Value="140">140cmまで</asp:List...
<asp:ListItem Value="160">160cmまで</asp:List...
<asp:ListItem Value="170">170cmまで</asp:List...
</asp:DropDownList>
<br />
<asp:Label ID="ResultLabel" runat="server"></asp:...
</div>
</form>
</body>
</html>
}}
JavaScriptは外部ファイル"callback.js"に記述しています。"c...
#code(javascript){{
var msgElement, listElement;
//onloadイベントハンドラを追加
if (window.addEventListener)
{
window.addEventListener("load", onLoad, false);
}
else if (window.attachEvent)
{
window.attachEvent("onload", onLoad);
}
else
{
window.onload = onLoad;
}
//onloadイベントハンドラ
function onLoad()
{
msgElement = document.getElementById("ResultLabel");
listElement = document.getElementById("PackageSizeLis...
if (window.addEventListener)
{
listElement.addEventListener("change", onChange, ...
}
else if (window.attachEvent)
{
listElement.attachEvent("onchange", onChange);
}
else
{
listElement.onchange = onChange;
}
}
//リストのonchangeイベントハンドラ
function onChange()
{
if (listElement.value == "0")
{
msgElement.innerHTML = "";
return;
}
msgElement.innerHTML = "読み込み中...";
//サーバーのメソッドを呼び出す
callbackServer(listElement.value, "");
}
//サーバーが返したデータを取得するイベントハンドラ
function receiveServerData(arg, context)
{
msgElement.innerHTML = "料金は " + arg + "円";
}
//サーバーでエラーが発生した時に結果を取得するイベントハ...
function callbackError(arg, context)
{
msgElement.innerHTML = "エラーが発生しました";
}
}}
***JavaScriptのコードの説明 [#ge0c5feb]
まずは、JavaScriptのコードの説明をします。前回のJavaScrip...
まず、XMLHttpRequestを使用してサーバーと通信を行う部分が...
補足:実は、callbackServer関数にパラメータを全く指定しな...
callbackServer関数を呼び出した後、サーバーからデータが正...
サーバーがエラーを返した時(例えばこの例では、サーバーに...
なお、ここで登場したcallbackServer、receiveServerData、ca...
***ICallbackEventHandlerインターフェイスの実装 [#u796a99e]
次に、ASPXファイルのコードについて説明します。
まず、ページクラスにICallbackEventHandlerインターフェイス...
#code(vbnet){{
Partial Class _Default
Inherits System.Web.UI.Page
Implements System.Web.UI.ICallbackEventHandler
'(省略)
End Class
}}
#code(csharp){{
partial class _Default : System.Web.UI.Page, ICallbackEve...
{
//(省略)
}
}}
補足:ICallbackEventHandlerインターフェイスはユーザーコン...
ICallbackEventHandlerインターフェイスのメンバには、RaiseC...
返す結果は、必ず文字列(String型)です。もし複数の値を返...
***GetCallbackEventReferenceメソッド [#t43915de]
最後に、Page_Loadメソッド内の説明をします。ここで、callba...
まず、ClientScriptManagerオブジェクトのGetCallbackEventRe...
GetCallbackEventReferenceメソッドの1番目のパラメータには...
3番目のパラメータには、サーバーから返された結果を受け取る...
同様に、5番目のパラメータには、サーバーで発生したエラーを...
2番目のパラメータには、サーバーのRaiseCallbackEventメソッ...
この2番目のパラメータは、必ずしも"arg"とする必要はありま...
4番目のパラメータには、コンテクストとするデータを指定しま...
このようにしておけば、例えば複数の箇所からcallbackServer...
また、receiveServerData関数やcallbackError関数に渡したい...
最後の6番目のパラメータには、非同期的に実行するか否かを指...
上記のコードでは、GetCallbackEventReferenceメソッドは次の...
#pre{{
WebForm_DoCallback('__Page',arg,receiveServerData,context...
}}
GetCallbackEventReferenceメソッドを呼び出した後は、このメ...
#pre{{
function callbackServer(arg, context) {
WebForm_DoCallback('__Page',arg,receiveServerData,"contex...
}
}}
最後にこれをRegisterClientScriptBlockメソッドを使って、ペ...
#pre{{
<script type="text/javascript">
<!--
function callbackServer(arg, context) {
WebForm_DoCallback('__Page',arg,receiveServerData,"contex...
}// -->
</script>
}}
これで、callbackServer関数を呼び出せるようになりました。
補足:callbackServer関数以外に、srcが"/AjaxWebSite/WebRes...
なおこのような「クライアントコールバック」において、サー...
クライアントがPOSTするデータには、"__CALLBACKID"や"__CALL...
サーバーが返す値には、GetCallbackResultメソッドが返す文字...
**参考 [#s2bc10b2]
-[[An Introduction to AJAX Techniques and Frameworks for ...
-[[ページをリロードせずにサーバーとやり取りする方法>http:...
-[[クライアント・コールバックで複数の値をクライアントへ渡...
-[[クライアント・コールバックでデータベースの値を表示する...
**コメント [#def6338e]
#comment
//これより下は編集しないでください
#pageinfo([[:Category/.NET]] [[:Category/ASP.NET]],2007-1...
ページ名:
▲
▼
[
トップ
] [
新規
|
子ページ作成
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]