【ASP.NET AJAX】 XML-Scriptで色々な組み込みコントロールを使ってみる
こんにちは、こだかです。
先日テレビを見ていたら、ドラマでめぞん一刻がやっていました。
（この時代の漫画、アニメは結構得意ジャンルだったりします。）
主題歌は斎藤由貴だよ～などと言いながら（なぜがユーミンでしたね。）、
当時（小学生～中学生ぐらい）を思い出して、目頭が熱くなってしまいました。
僕も仕事を通じて感動を伝えられたらと思います。
ごめんなさい全く関係ないですが、XML-Scriptシリーズの3回目です。
今回はもう少し実践的なサンプルとして、クロスドメインでREST形式のWebサービス呼び出しを行いつつ、
XML-Scriptでクライアントサイドから、色々な組み込みコントロールを使用してみます。
クロスドメインでのWebサービスは、セキュリティの問題がありJavaScript（XMLHTTPRequest）を使用した通信では呼び出すことができません。
そこでブリッジを作成するわけですが、SOAP形式のWebサービスは普通に作成すればよいのに対して、REST等の場合に使用するのが拡張子asbxのファイルです。
今回使わせて頂いたWebサービスは4Travel様の物で、旅行記と写真を検索できます。
仕様：https://apiblog.kakaku.com/4travelSearchPictureV1.0.html
例：https://api.4travel.jp/Ver1/SearchPicture.php?model=cybershot&max=3
実行すると、戻り値がXMLの形になりますが、asbxの<transforms>以下でJavaScriptのオブジェクトに変換が可能です。
また、組み込みコントロールとしては、listView、label、image、hyperLinkを使用しています。
それぞれ、HTMLタグでの実装を対にしてご確認頂ければと思います。
追記1）asbxを使用したWebサイトを新規で作成する場合、Web.configの以下の記述（*.asbx）は*を削除する必要があります。
（ここでかなりハマりました。）
誤)
<buildProviders>
<add extension="*.asbx" type="Microsoft.Web.Preview.Services.BridgeBuildProvider"/>
</buildProviders>
正)
<buildProviders>
<add extension=".asbx" type="Microsoft.Web.Preview.Services.BridgeBuildProvider"/>
</buildProviders>
実行例です。
ちなみに、最近「kodaka.infoドメイン」を取得しましたので、ソースコードをホストしておきます。
動かしてみたい方は、こちらでご確認頂ければと思います。
（https://kodaka.info/mson/b5/demo6_1_Webservice.lzh）
追記2）ホストしたソースはASP.NET Futures (May 2007)をインストールした後作成されるテンプレートを元に作成してあります。
こだかたろう
Default.aspx------------------------------------------------------------------------------------------------------
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "https://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script language="javascript" type="text/javascript">
// <!CDATA[
function Button1_onclick() {
var args = new Object();
args.model = 'cybershot';
args.max = 5;
FourTravel.SearchPictureBridge.getTravel(args, succeeded);
}
function succeeded(result) {
var projectElement = $get("TravelResults");
projectElement.control.set_data(result);
}
// ]]>
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">
<Scripts>
<asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewScript.js" />
</Scripts>
<Services>
<asp:ServiceReference Path="WebService.asbx" />
</Services>
</asp:ScriptManager>
<h2>旅行写真検索
<input id="Button1" type="button" value="表示" onclick="return Button1_onclick()" />
<br />
<br />
</h2>
<div id="TravelResults">
<div id="TravelTemplate">
<div id="TravelItemTemplate">
<table style="width: 558px; height: 127px; border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid; padding-bottom: 1px;">
<tr>
<td style="height: 123px">
<img id="TravelImage" />
</td>
<td style="height: 123px">
<table>
<tr>
<td>
<span id="TravelComment"></span>
</td>
</tr>
<tr>
<td >
<a id="TravelLink2" target='_blank'><span id="TravelLink"></span></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
</form>
<script type="text/xml-script">
<page xmlns:script="https://schemas.microsoft.com/xml-script/2005">
<components>
<listView id="TravelResults" itemTemplateParentElementId="TravelTemplate">
<layoutTemplate>
<template layoutElement="TravelTemplate" />
</layoutTemplate>
<itemTemplate>
<template layoutElement="TravelItemTemplate">
<image id="TravelImage">
<bindings>
<binding dataPath="Picturl" property="imageURL"/>
</bindings>
</image>
<label id="TravelComment">
<bindings>
<binding dataPath="Comment" property="text" />
</bindings>
</label>
<label id="TravelLink">
<bindings>
<binding dataPath="Pictlink" property="text" />
</bindings>
</label>
<hyperLink id="TravelLink2">
<bindings>
<binding dataPath="Pictlink" property="navigateURL"/>
</bindings>
</hyperLink>
</template>
</itemTemplate>
</listView>
</components>
</page>
</script>
</body>
</html>
WebService.asbx------------------------------------------------------------------------------------------------------
<?xml version="1.0" encoding="utf-8" ?>
<bridge namespace="FourTravel" className="SearchPictureBridge">
<proxy type="Microsoft.Web.Preview.Services.BridgeRestProxy"
serviceUrl="https://api.4travel.jp/Ver1/SearchPicture.php" />
<method name="getTravel">
<input>
<parameter name="model" />
<parameter name="max" />
</input>
<transforms>
<transform type="Microsoft.Web.Preview.Services.XPathBridgeTransformer">
<data>
<attribute name="selector" value="/results/pictinfo/item" />
<dictionary name="selectedNodes">
<item name="Picturl" value="picturl" />
<item name="Pictlink" value="pictlink" />
<item name="Comment" value="comment" />
</dictionary>
</data>
</transform>
</transforms>
</method>
</bridge>
Comments
Anonymous
May 15, 2007
こんにちは。 たびたびすみません、今日もブログ紹介をさせて頂きます。 ASP.NET AJAX で Future CTP のファンクションを使用して SOAP ではなく REST による連携が可能ですが、デベロッパーエバンジェリストの小高が実際に動くサンプルを公開していますので、ご紹介しておきます。Anonymous
August 05, 2007
ASP.NET AJAX では他ドメインの REST 形式の Web サービスを利用する場合に結構な手間がかかります。 XMLHｔｔｐRequest を利用して通信のやり取りを行う場合のセキュリティ制限がかかっているからです。