【ASP.NET AJAX】 XML-Scriptで色々な組み込みコントロールを使ってみる - こだかたろうです - Site Home

こんにちは、こだかです。

先日テレビを見ていたら、ドラマでめぞん一刻がやっていました。
（この時代の漫画、アニメは結構得意ジャンルだったりします。）
主題歌は斎藤由貴だよ～などと言いながら（なぜがユーミンでしたね。）、
当時（小学生～中学生ぐらい）を思い出して、目頭が熱くなってしまいました。
僕も仕事を通じて感動を伝えられたらと思います。

ごめんなさい全く関係ないですが、XML-Scriptシリーズの3回目です。
今回はもう少し実践的なサンプルとして、クロスドメインでREST形式のWebサービス呼び出しを行いつつ、
XML-Scriptでクライアントサイドから、色々な組み込みコントロールを使用してみます。

クロスドメインでのWebサービスは、セキュリティの問題がありJavaScript（XMLHTTPRequest）を使用した通信では呼び出すことができません。
そこでブリッジを作成するわけですが、SOAP形式のWebサービスは普通に作成すればよいのに対して、REST等の場合に使用するのが拡張子asbxのファイルです。

今回使わせて頂いたWebサービスは4Travel様の物で、旅行記と写真を検索できます。
仕様：http://apiblog.kakaku.com/4travelSearchPictureV1.0.html
例：http://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ドメイン」を取得しましたので、ソースコードをホストしておきます。
動かしてみたい方は、こちらでご確認頂ければと思います。
（http://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" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>

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>

</body>
</html>

WebService.asbx------------------------------------------------------------------------------------------------------
<?xml version="1.0" encoding="utf-8" ?>
<bridge namespace="FourTravel" className="SearchPictureBridge">
<proxy type="Microsoft.Web.Preview.Services.BridgeRestProxy"
serviceUrl="http://api.4travel.jp/Ver1/SearchPicture.php" />