───────┐ │橋 │
│ │ │
お店 │ │・・・ │
│ │・・・ │
───────┴───┤・・・ │
デッキ │・・・ │
行列１ ・・・・・・ │行列２│
・・・・・・・・・・・・ │ │
───────────┘ └───────────────
道 こだか！
─────────────────────────────────
（ちなみにこの絵を書くのに10分近く掛っています。何をやってるのだか・・・崩れている人、ごめんなさい）
ウォッチャーのこだかとしては、写真を是非撮りたいと思っています。
さて、MicrosoftONでAJAXの話をする為に、色々準備をしていたのですが、
ASP.NET AJAXの情報は比較的多くある割に、XML-Scriptの情報が少ないように感じましたので、今日はXML-Scriptで非同期にWebServiceを呼ぶサンプルを掲載します。
実行すると、現在時刻をStringで返すWebServiceを呼び表示します。それだけのサンプルです。
比較の為、JavaScriptでの呼び出しも同じページに含めています。
（弊社松崎のブログもご確認下さい：http://blogs.msdn.com/tsmatsuz/archive/2007/03/12/xml-script-futures-ctp.aspx）
手順
1 VisualStudio2005を起動して[ファイル]→[新規作成]→[Webサイト]より[ASP.NET AJAX CTP-Enabled WebSite]を選択し新規のWebサイトを作成します。
2 Default.aspxのソースビューに下記を貼り付けます。
3 [Webサイト]→[新しい項目の追加]より[Webサービス]を選択しファイル名を[DateTimeService.asmx]とします。
4 DateTimeService.csに下記のWebサービスを貼り付けます。
これでビルドができるはずです。
(ここまでやるなら、サンプルのプロジェクトをそのままホストすればよかったですね・・・)
JavaScriptでそのまま書くと、"Button2_onclick","function OnComplete"辺りの記述になります。
一方XML-Scriptの同じ部分は <script type="text/xml-script">以下です。
この例だけで一概には言えませんが、XML-Scriptで書くと記述自体は多くなりますが、見た目に分かり易くなりますね。
もちろん、クライアントサイドで、Microsoft AJAX Libraryの組み込みコンポーネントが使用できるのも魅力です。
この例ではLabelコントロールを使用していますが、当然対応するHTMLタグは無いので、spanとして記述をしておきます。
ただクライアントサイドでの実装は、デバッグが面倒なのと、現状では情報が少ないので、ライブラリのソースの追跡は避けて通れません。
この辺りのハードルを下げることが、エバンジェリストの役目だと思います。
Default.aspx------------------------------------------------------------------------------------------------------
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<script language="javascript" type="text/javascript">
// <!CDATA[
function Button2_onclick() {
retVal = DateTimeService.GetTime(OnComplete);
}
function OnComplete(value) {
var projectElement1 = $find("lblJavaScript1");
projectElement1.set_text("JAVA-Scriptでの更新です");
projectElement1.get_element().style.backgroundColor="F00000";
var projectElement2 = $find("lblJavaScript2");
projectElement2.set_text(value);
}
// ]]>
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewScript.js" />
</Scripts>
<Services>
<asp:ServiceReference Path="DateTimeService.asmx" />
</Services>
</asp:ScriptManager>
<div>
<input id="Button1" type="button" value="XML-Script" />
<h1><span id="lblXML-Script1" ></span></h1>
<h1><span id="lblXML-Script2" ></span></h1>
</div>
<div>
<input id="Button2" type="button" value="JAVA-Script" onclick="return Button2_onclick()" />
<h1><span id="lblJavaScript1" ></span></h1>
<h1><span id="lblJavaScript2" ></span></h1>
</div>
<script type="text/xml-script">
<page xmlns="http://schemas.microsoft.com/xml-script/2005">
<components>
<label id="lblXML-Script1" />
<label id="lblXML-Script2" />
<label id="lblJavaScript1" />
<label id="lblJavaScript2" />
<button id="Button1">
<click>
<setPropertyAction target="lblXML-Script1"
property="text"
value="XML-Scriptでの更新です" />
<setPropertyAction target="lblXML-Script1"
property="element"
propertyKey="style.backgroundColor"
value="#FFFF00" />
<invokeMethodAction target="webServiceMethod" method="invoke">
<parameters userContext="" />
</invokeMethodAction>
</click>
</button>
<ServiceMethodRequest id="webServiceMethod"
url="DateTimeService.asmx"
methodName="GetTime"
useGet = "false">
<completed>
<setPropertyAction target="lblXML-Script2" property="text">
<bindings>
<binding dataContext="webServiceMethod"
dataPath="result"
property="value"/>
</bindings>
</setPropertyAction>
</completed>
</ServiceMethodRequest>
</components>
</page>
</script>
</form>
</body>
</html>
Webサービス-------------------------------------------------------------------------------------------------
using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
/// <summary>
/// DateTimeService の概要の説明です
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class DateTimeService : System.Web.Services.WebService {
public DateTimeService () {
//デザインされたコンポーネントを使用する場合、次の行をコメントを解除してください
//InitializeComponent();
}
[WebMethod]
public string GetTime()
{
return DateTime.Now.ToShortTimeString();
}
}
少し解説を加えると、下記<binding>ですが、それぞれプロパティの説明は以下になります。
<binding dataContext="webServiceMethod"
dataPath="result"
property="value"/>
dataContext：バインド元、今回の場合はWebサービス
dataPath：バインド元のどの情報を対象にするのか？今回はWebサービスの戻り値
property：バインド先のプロパティ
また、下記<ServiceMethodRequest>ですが、useGetはfalseにする必要があります。
こうしないとJSONのシリアライズがうまくできません。
<ServiceMethodRequest id="webServiceMethod"
url="DateTimeService.asmx"
methodName="GetTime"
useGet = "false">
以上です、間違った事を書いていたらごめんなさい。
こだかたろう
