asp.net MVC中实现调取web api 

  1  public ActionResult Index(string city)
  2         {
  3 
  4 
  5             if (string.IsNullOrEmpty(city))
  6             {
  7                 city = "上海";
  8             }
  9 //ak需要自己到百度地图官网申请
 10 Uri weatherInfo = new Uri("http://api.map.baidu.com/telematics/v3/weather?location=" + city + "&output=json&ak=UKMGHnstHCOFzYBe2h70gi5fLsc0C0dG");
 11 
 12    HttpWebRequest request = WebRequest.Create(weatherInfo) as HttpWebRequest;
 13             List<WeatherData> weatherDataList = new List<WeatherData>();
 14 
 15             using (HttpWebResponse response = request.GetResponse() as HttpWebResponse)
 16             {
 17                 // Get the response stream
 18                 StreamReader reader = new StreamReader(response.GetResponseStream());
 19                 string json = reader.ReadToEnd();
 20 
 21                 Weather model = JsonHelper.JsonToEntity<Weather>(json);
 22                 List<WeatherDto> weatherDtoList = new List<WeatherDto>();
 23                 List<Index> indexList = new List<Index>();
 24 
 25                 foreach (WeatherResult result in model.Results)
 26                 {
 27                     indexList = result.Index;
 28                     weatherDataList = result.Weather_Data;
 29                 }
 30                 for (int i = 0; i < indexList.Count; i++)
 31                 {
 32                     WeatherDto weatherDto = new WeatherDto();
 33                     weatherDto.Des = indexList[i].Des;
 34                     weatherDto.Tipt = indexList[i].Tipt;
 35                     weatherDto.Title = indexList[i].Title;
 36                     weatherDto.Zs = indexList[i].Zs;
 37 
 38                     if (i < weatherDataList.Count)
 39                     {
 40                         weatherDto.Date = weatherDataList[i].Date;
 41                         weatherDto.DayPictureUrl = weatherDataList[i].DayPictureUrl;
 42                         weatherDto.NightPictureUrl = weatherDataList[i].NightPictureUrl;
 43                         weatherDto.Temperature = weatherDataList[i].Temperature;
 44                         weatherDto.Weather = weatherDataList[i].Weather;
 45                         weatherDto.Wind = weatherDataList[i].Wind;
 46 
 47                     }
 48                     weatherDtoList.Add(weatherDto);
 49                 }
 50             }
 51 
 52             return View("NewView",weatherDataList);
 53         }
 54 
 55     }
 56 
 57  public class WeatherDto
 58     {
 59         public string Title { get; set; }
 60 
 61         public string Zs { get; set; }
 62 
 63         public string Tipt { get; set; }
 64 
 65         public string Des { get; set; }
 66 
 67         public string Date { get; set; }
 68 
 69         public string DayPictureUrl { get; set; }
 70 
 71         public string NightPictureUrl { get; set; }
 72 
 73         public string Weather { get; set; }
 74 
 75         public string Wind { get; set; }
 76 
 77         public string Temperature { get; set; }
 78     }
 79 
 80 
 81  public class Weather
 82     {
 83         public string Error { get; set; }
 84 
 85         public string Status { get; set; }
 86 
 87         public string Date { get; set; }
 88 
 89         public List<WeatherResult> Results { get; set; }
 90     }
 91 
 92  public class WeatherResult
 93     {
 94         public string CurrentCity { get; set; }
 95 
 96         public string Pm25 { get; set; }
 97 
 98         public List<Index> Index { get; set; }
 99 
100         public List<WeatherData> Weather_Data { get; set; }
101     }
  1 @model IEnumerable<MvcAjaxTest.Models.WeatherData>
  2 
  3 @{
  4     Layout = null;
  5 }
  6 
  7 <html>
  8 <head>
  9     <title>weather</title>
 10     <link rel="shortcut icon" href="http://p8.qhimg.com/t0158c24c5ddb3a6745.png" type="image/x-icon">
 11     <link rel="stylesheet" href="~/Content/css/Weather.css" />
 12     <style type="text/css">
 13         #weathertype {
 14             font-size: 28px;
 15             padding-left: 20px;
 16         }
 17 
 18         #copyright {
 19             padding: 40px 0;
 20             text-align: center;
 21             line-height: 2;
 22             color: #999;
 23         }
 24 
 25         .btn-app {
 26             background: url(http://p8.qhimg.com/t017399c8595fd6cc76.png) no-repeat 0 0;
 27         }
 28 
 29         .skinmore, .skinmore2 {
 30             z-index: -1;
 31         }
 32 
 33         .skin2 .skinmore2 {
 34             background: url(http://p4.qhimg.com/t0191e46e3e10bc96e3.png) repeat center 0;
 35             height: 100%;
 36             left: 0;
 37             position: absolute;
 38             top: 0;
 39             width: 100%;
 40         }
 41 
 42         .qrcodes img {
 43             margin-top: 40px;
 44         }
 45 
 46         .qrcodes {
 47             position: absolute;
 48             top: 150px;
 49             width: 200px;
 50             right: 2%;
 51         }
 52 
 53         .header {
 54             height: 110px;
 55         }
 56 
 57         .logo {
 58             background: url(http://p9.qhimg.com/t01c2da4dacc6c6dee8.png) no-repeat;
 59             background-image: -webkit-image-set(url(http://p9.qhimg.com/t01c2da4dacc6c6dee8.png) 1x,url(http://p0.qhimg.com/t01ea0b4aedd360d174.png) 2x);
 60             float: left;
 61             height: 65px;
 62             margin-top: 35px;
 63             width: 183px;
 64         }
 65 
 66         .search {
 67             margin-top: 20px;
 68         }
 69     </style>
 70     <script type="text/javascript" src="~/Scripts/jquery-1.8.2.js"></script>
 71     <script type="text/javascript">
 72         function Change() {
 73             var citySelected = $("#GetCity option:selected").text();
 74             $.ajax({
 75                 type: "Post",
 76                 url: "Weather/Index",
 77                 data: { City: citySelected },
 78                 success: function (data) {
 79                     $("#partRefresh").html(data);
 80                 },
 81                 error: function () {
 82                     alert("请求失败，请稍候再试...");
 83                 }
 84             });
 85         }
 86 
 87     </script>
 88 
 89 </head>
 90 <body class="skin6" style="display: block;">
 91     <div>
 92         <select id="GetCity" onchange="Change()">
 93             <option value="1" selected="selected">上海市</option>
 94             <option value="2">合肥市</option>
 95             <option value="3">牡丹江市</option>
 96             <option>湖州市</option>
 97             <option>海口市</option>
 98         </select>
 99     </div>
100     <div class="morewether" id="partRefresh">
101         <!--　各天气对应中文拼音　如icon-yewanqing对应“夜晚晴“ -->
102         <ul id="foreast">
103             <li>
104                 <p class="colora">@Model.ToList()[0].Date</p>
105                 <p class="icon-tu"><i class="icon-qing"></i><br>@Model.ToList()[0].Weather</p>
106                 <p class="otherinfo"><span>@Model.ToList()[0].Temperature</span>@Model.ToList()[0].Wind</p>
107             </li>
108             <li>
109                 <p class="colora">@Model.ToList()[1].Date</p>
110                 <p class="icon-tu"><i class="icon-shachen"></i><br>@Model.ToList()[1].Weather</p>
111                 <p class="otherinfo"><span>@Model.ToList()[1].Temperature</span>@Model.ToList()[1].Wind</p>
112             </li>
113             <li>
114                 <p class="colora">@Model.ToList()[2].Date</p>
115                 <p class="icon-tu"><i class="icon-shachen"></i><br>@Model.ToList()[2].Weather</p>
116                 <p class="otherinfo"><span>@Model.ToList()[2].Temperature</span>@Model.ToList()[2].Wind</p>
117             </li>
118             <li>
119                 <p class="colora">@Model.ToList()[3].Date</p>
120                 <p class="icon-tu"><i class="icon-shachen"></i><br>@Model.ToList()[3].Weather</p>
121                 <p class="otherinfo"><span>@Model.ToList()[3].Temperature</span>@Model.ToList()[3].Wind</p>
122             </li>
123         </ul>
124     </div>
125 </body>
126 </html>

 效果图：

posted @ 2017-03-30 10:45  ~扎克伯格  阅读(330)  评论(0)  编辑  收藏  举报