本文旨在實現如何在.NET環境下調用WebServer，以天氣接口為例進行說明。
WebServer地址：http://www.webxml.com.cn/WebServices/WeatherWebService.asmx
1、創建程序。本例創建的是ASP.NET網站，可以根據個人需求創建不同的項目。
2、添加Web窗體。
3、頁面設計采用BootStrap，在項目中引入相應的JS和CSS文件
4、在程序中添加WebServer服務。
①項目中右鍵，選擇添加，找到服務引用，單擊進入。如下圖
②進入到如下界面，選擇高級。
③選擇左下角的添加Web引用。
④如圖操作
5、添加實體類Weather.cs
using System; /// <summary> /// Summary description for weather /// </summary> namespace Model { public class Weather { public String Provinces { get; set; } //省份 public String CityName { get; set; } //城市 public String CityCode { get; set; } //城市代碼 public String CityPicture { get; set; } //城市圖片 public String UpdateTime { get; set; } //天氣預報的更新時間 public String TodayWeather { get; set; } //當天溫度 public String TodaySurvey { get; set; } public String TodayWindDirection { get; set; } public String TodayStarPic { get; set; } public String TodayEndPic { get; set; } public String Detail { get; set; } //天氣實況 public String LifeIndex { get; set; } //生活指數 public String TomorrowWeather { get; set; } //第二天的氣溫 public String TomorrowSurvey { get; set; }//第二天的概況 public String TomorrowWindDirection { get; set; }//第二天的風向和風力 public String TomorrowStarPic { get; set; }//第二天的圖標一 public String TomorrowEndPic { get; set; }//第二天的圖標二 public String TDATWeather { get; set; }//第三天的氣溫 public String TDATSurvey { get; set; }//第三天的概況 public String TDATWindDirection { get; set; }//第三天的風向和風力 public String TDATStarPic { get; set; }//第三天的圖標一 public String TDATEndPic { get; set; } //第三天的圖標二 public String CityDetail { get; set; } //被查詢的城市或地區的介紹 } }
6、頁面代碼如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" /> <link rel="stylesheet" href="/public/bootstrap/3.3.4/css/bootstrap.min.css" /> <link rel="stylesheet" href="/public/bootstrap/3.3.4/css/bootstrap-theme.min.css" /> <script src="public/jquery/jquery.min.js"></script> <script src="public/bootstrap/3.3.4/js/bootstrap.min.js"></script> <title>天氣預報</title> <script> $(document).ready(function () { $("#BtnSearch").click(function () { var cityName = document.getElementById("TxtCityName").value; if (cityName == "" || cityName == null) { alert("請輸入要查詢的城市名稱！"); return false; } $.ajax({ type: "GET", async: false, url: "Ajax/GetWeatherInfo.ashx?CityName=" + cityName, success: function (data) { var obj = JSON.parse(data); if (obj.CityName == "" || obj.CityName == null) { alert("查詢結果為空！這城市或區域暫時不支持查詢，請檢查輸入城市是否有誤！"); return false; } document.getElementById("todayWeatherDetail").style.display = "block"; document.getElementById("tomorrowWeatherDetail").style.display = "block"; document.getElementById("tdatWeatherDetail").style.display = "block"; document.getElementById("cityDetail").style.display = "block"; //當天 document.getElementById("todaySurvey").innerHTML = obj.TodaySurvey; document.getElementById("todayWeather").innerHTML = obj.TodayWeather; document.getElementById("todayWindDirection").innerHTML = obj.TodayWindDirection; document.getElementById("detail").innerHTML = obj.Detail; document.getElementById("lifeIndex").innerHTML = obj.LifeIndex; //第二天 document.getElementById("tomorrowSurvey").innerHTML = obj.TomorrowSurvey; document.getElementById("tomorrowWeather").innerHTML = obj.TomorrowWeather; document.getElementById("tomorrowWindDirection").innerHTML = obj.TomorrowWindDirection; //第三天 document.getElementById("taftSurvey").innerHTML = obj.TDATSurvey; document.getElementById("TDATWeather").innerHTML = obj.TDATWeather; document.getElementById("TDATWindDirection").innerHTML = obj.TDATWindDirection; //城市簡介 document.getElementById("cityName").innerHTML = obj.CityName + "簡介"; document.getElementById("CityDetail").innerHTML = obj.CityDetail; } }); }); }); </script> </head> <body> <div class="container"> <div style="margin-top: 10px;" class="container"> <div class="form-group" style="width: 70%; float: left; margin-right: 20px;"> <input class="form-control" id="TxtCityName" placeholder="請輸入城市名稱" /> </div> <button id="BtnSearch" class="btn btn-primary">查詢</button> </div> <div class="container"> <div class="panel panel-success" style="display: none;margin-top:3px;" id="todayWeatherDetail"> <div class="panel-heading"> <a data-toggle="collapse" data-parent="#accordion" href="#todayWeathercollapse" aria-expanded="true" aria-controls="collapse"> <label id="todaySurvey"></label> </a> </div> <div id="todayWeathercollapse" class="panel-collapse collapse in"> <div class="panel-body"> <p><label id="todayWeather"></label></p> <p><label id="todayWindDirection"></label></p> <p><label id="detail"></label></p> <p><label id="lifeIndex"></label></p> </div> </div> </div> <div class="panel panel-warning" style="display: none;" id="tomorrowWeatherDetail"> <div class="panel-heading"> <a data-toggle="collapse" data-parent="#accordion" href="#tomorrowWeathercollapse" aria-expanded="true" aria-controls="collapse"> <label id="tomorrowSurvey"></label> </a> </div> <div id="tomorrowWeathercollapse" class="panel-collapse collapse"> <div class="panel-body"> <p><label id="tomorrowWeather"></label></p> <p><label id="tomorrowWindDirection"></label></p> </div> </div> </div> <div class="panel panel-danger" style="display: none;" id="tdatWeatherDetail"> <div class="panel-heading"> <a data-toggle="collapse" data-parent="#accordion" href="#tdatWeathercollapse" aria-expanded="true" aria-controls="collapse"> <label id="taftSurvey"></label> </a> </div> <div id="tdatWeathercollapse" class="panel-collapse collapse"> <div class="panel-body"> <p><label id="TDATWeather"></label></p> <p><label id="TDATWindDirection"></label></p> </div> </div> </div> <div class="panel panel-info" style="display: none;" id="cityDetail"> <div class="panel-heading"> <a data-toggle="collapse" data-parent="#accordion" href="#cityDetailcollapse" aria-expanded="true" aria-controls="collapse"> <label id="cityName"></label> </a> </div> <div id="cityDetailcollapse" class="panel-collapse collapse"> <div class="panel-body"> <label id="CityDetail"> </label> </div> </div> </div> </div> </div> </body> </html>
7、一般處理程序的代碼如下：調用WebServer的代碼在此體現，詳細請看代碼注釋。
<%@ WebHandler Language="C#" Class="GetWeatherInfo" %> using System; using System.Web; public class GetWeatherInfo : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string cityName = context.Request.Params["CityName"]; Model.Weather weather = new Model.Weather(); Weather.WeatherWebService w = new Weather.WeatherWebService(); //調用WebServer，其中Weather是引入WebServer服務是取的引用名 string[] res = new string[23]; res = w.getWeatherbyCityName(cityName); //調用getWeatherbyCityName方法 weather.Provinces = res[0]; //省份 weather.CityName = res[1]; //城市 weather.CityCode = res[2]; //城市代碼 weather.CityPicture = res[3]; //城市圖片 weather.UpdateTime = res[4]; //天氣預報的更新時間 weather.TodayWeather = res[5]; //當天溫度 weather.TodaySurvey = res[6]; weather.TodayWindDirection = res[7]; weather.TodayStarPic = res[8]; weather.TodayEndPic = res[9]; weather.Detail = res[10]; //天氣實況 weather.LifeIndex = res[11]; //生活指數 weather.TomorrowWeather = res[12]; //第二天的氣溫 weather.TomorrowSurvey = res[13]; //第二天的概況 weather.TomorrowWindDirection = res[14]; //第二天的風向和風力 weather.TomorrowStarPic = res[15]; //第二天的圖標一 weather.TomorrowEndPic = res[16]; //第二天的圖標二 weather.TDATWeather = res[17]; //第三天的氣溫 weather.TDATSurvey = res[18]; //第三天的概況 weather.TDATWindDirection = res[19]; //第三天的風向和風力 weather.TDATStarPic = res[20]; //第三天的圖標一 weather.TDATEndPic = res[21]; //第三天的圖標二 weather.CityDetail = res[22]; //被查詢的城市或地區的介紹 System.Text.StringBuilder stringBuilder = new System.Text.StringBuilder(); System.Web.Script.Serialization.JavaScriptSerializer jss = new System.Web.Script.Serialization.JavaScriptSerializer(); jss.Serialize(weather, stringBuilder); context.Response.Write(stringBuilder); } public bool IsReusable { get { return false; } } }
8、運行效果如下：
9、項目結構圖：
