[C#] 图文解说调用WebServer实例

本文旨在实现如何在.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=" 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、项目结构图：

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/linhuide/p/5840480.html