通过一个天气预报案例学习asp.net WebService(基于asp.net MVC)

本文WebService数据来源:http://www.webxml.com.cn/WebServices/WeatherWebService.asmx

中国气象局 http://www.cma.gov.cn/

本文参考文章:http://zhangkui.blog.51cto.com/1796259/497324    zhangkui的博客


开始本文:

1、创建asp.net MVC程序,作为调用webservice的客户端(使用webForm 、winForm同样道理);

2、添加一个控制器,命名为GetWeather

通过一个天气预报案例学习asp.net WebService(基于asp.net MVC)_第1张图片


3、添加“服务引用”,给找到的服务设置一个命名空间,我这里用的是ServiceReferenceWeather

通过一个天气预报案例学习asp.net WebService(基于asp.net MVC)_第2张图片


4、以上完成后可以看到

通过一个天气预报案例学习asp.net WebService(基于asp.net MVC)_第3张图片


5、打开控制器,添加以下代码

 

        public ActionResult GetWeather()
        {
            return View();
        }

        [HttpPost]
        public ActionResult GetWeather(FormCollection formCollection)
        {
            string cityName = formCollection["txtCityName"];
            ServiceReferenceWeather.WeatherWebServiceSoapClient w = new WeatherWebServiceSoapClient("WeatherWebServiceSoap");
            string[] res = new string[23];
            res = w.getWeatherbyCityName(cityName);
            ViewData.Model= res;
            return View();
        }


6、为GetWeather控制器添加一个View,我这里用的Razor模板引擎,用aspx也是一样的

 

通过一个天气预报案例学习asp.net WebService(基于asp.net MVC)_第4张图片


7、将view的默认代码替换为以下代码(其实就是一些html和css,你完全可以自己写)

 

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>GetWeather</title>
    <style>
        div div {
            clear: both;
            width: 80px;
            height: 35px;
            line-height: 35px;
            color: #b200ff;
            font-family: 'Microsoft YaHei';
            text-align: right;
            float: left;
        }

        .divContainer {
            width: 600px;
            height: 35px;
            line-height:35px;
        }
    </style>
</head>
<body>
    @using (Html.BeginForm())
    {
        <span>城市名(支持地级市、直辖市,暂不支持县级市,区等):</span> <input type="text" name="txtCityName" value=" " />
        <input type="submit" name="name" value="确定" /><br />
        if (ViewData.Model != null)
        {
        <div class="divContainer">
            <div>城市名:</div>
            <label>@ViewData.Model[0]</label><span>--</span><label>@ViewData.Model[1]</label>
        </div> 
        <div class="divContainer">
            <div>今日天气:</div>
            <label>@ViewData.Model[6]</label>  
            <img src='/Images/@ViewData.Model[8]' alt="Alternate Text" />
            <img src='/Images/@ViewData.Model[9]' alt="Alternate Text" />
              
            <label>@ViewData.Model[5]</label> 
            <label>@ViewData.Model[7]</label>
        </div> 



        <div class="divContainer">
            <div>查询时间:</div>
            <label>@ViewData.Model[4]</label>
        </div>

        <div class="divContainer">
            <div>明日预报:</div>
            <label>@ViewData.Model[13]</label>  
            <img src='/Images/@ViewData.Model[15]' alt="Alternate Text" />
            <img src='/Images/@ViewData.Model[16]' alt="Alternate Text" />
              
            <label>@ViewData.Model[12]</label>  
            <label>@ViewData.Model[14]</label>
        </div>
        }
    }

</body>
</html>

 

8、将asp.net MVC的默认路由改为适合本案例的Controller 和action



按F5,将程序运行起来,你可以看到:

通过一个天气预报案例学习asp.net WebService(基于asp.net MVC)_第5张图片


输入:比如 扬州

通过一个天气预报案例学习asp.net WebService(基于asp.net MVC)_第6张图片

本文完


获取更多数据和帮助,可以访问:http://www.webxml.com.cn/WebServices/WeatherWebService.asmx

该WebService返回的string[]数组包含以下数据,可以用索引访问(如同本文中用索引访问ViewData.Model ):

通过一个天气预报案例学习asp.net WebService(基于asp.net MVC)_第7张图片

 

你可能感兴趣的:(webservice)