Ajaxで今日の東京の天気予報を表示

説明補足説明コード分割コードその他コメント投稿

このサンプルは、livedoorの お天気Webサービス を利用して「東京」の今日の天気を表示します。[Get Weather Forecast]のリンクをクリックすると「今日の天気」が表示されます。

このサンプルは、livedoorの お天気Webサービス を利用して「東京」の今日の天気を表示します。[Get Weather Forecast]のリンクをクリックすると「今日の天気」が表示されます。

HEADセクションには、MS Ajax Libraryの「MicrosoftAjax.js」とWebサービスを呼び出すためのプロキシ(JavaScript版)を生成する「WebServies/Weather.asmx/js」を追加します。Webサービスは「Weather.GetForecast(displayWeather)」のように呼び出します。

Webサービスの処理が完了するとdisplayWeather()に制御が渡ります。引数resultには、天気予報のデータがHTML形式で格納されています。WebサービスGetForecastは、次のようなREST APIを使用して天気予報をリクエストします。クエリ文字列「city」には、東京のコード「63」を設定します。クエリ文字列「day」には、「today」を設定します。REST APIから返されたXMLデータは、Webサービス側でHTMLデータに変換して返します。

http://weather.livedoor.com/forecast/webservice/rest/v1?city=63&day=today 

JavaScript:Weather.GetForecast(displayWeather)

function displayWeather(result) {   
  $get("weather").innerHTML = result;   
}  

ViewManager.cs

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

using System.IO;
using System.Xml;
using System.Reflection;

public class ViewManager
{
  public static string RenderView(string path)
  {
    return RenderView(path, null);
  }

  public static string RenderView(string path, object data)
  {
    Page pageHolder = new Page();
    UserControl viewControl = (UserControl)pageHolder.LoadControl(path);

    if (data != null)
    {
      Type viewControlType = viewControl.GetType();
      FieldInfo field = viewControlType.GetField("Data");

      if (field != null)
      {
        field.SetValue(viewControl, data);
      }
      else
      {
        throw new Exception("View file: " + path + " does not have a public Data property");
      }
    }

    pageHolder.Controls.Add(viewControl);

    StringWriter output = new StringWriter();
    HttpContext.Current.Server.Execute(pageHolder, output, false);

    return output.ToString();
  }  
	
}


Weather.asmx

<%@ WebService Language="VB" Class="Weather" %>

Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Web.Script.Services

<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<ScriptService()> _
Public Class Weather
  Inherits System.Web.Services.WebService
    
  <WebMethod()> _
  Public Function GetForecast() As String
    Return ViewManager.RenderView("~/UserControls/WeatherTokyo.ascx")
  End Function
End Class


WeatherTokyo.ascx

<%@ Control Language="VB" ClassName="WeatherTokyo" %>

<asp:DataList ID="DataList1" runat="server"
   DataSourceID="XmlDataSource1">
  <ItemTemplate>         
    <asp:Label ID="lblTitle" runat="server" Text='<%# XPath("title") %>' />
    <br />        
    <a href='<%# XPath("image/link") %>'>
      <asp:Label ID="lblTitle2" runat="server"  Text='<%# XPath("image/title") %>'/>
    </a>
    <br />
    <img src='<%# XPath("image/url") %>' />              
    <%# XPath("temperature/min/celsius") %>  - <%#XPath("temperature/max/celsius")%>          
  </ItemTemplate>
</asp:DataList>

<asp:XmlDataSource ID="XmlDataSource1" runat="server" 
  DataFile="http://weather.livedoor.com/forecast/webservice/rest/v1?city=63&day=today"
  XPath="/lwws" />