In this article I will explain how to display daily Weather Forecast using Weather API web service in ASP.Net using C# and VB.Net.
The Weather API web service accepts City Name or Zip Code and it returns data in JSON format which will be displayed on the ASP.Net Web page.
The Weather API
This article makes use of the OpenWeatherMap Weather API service. It allows free requests upto certain limit. You will need to register and get an API Key (AppId) using the following link.
HTML Markup
The HTML Markup consists of a TextBox, a Button and an HTML Table with Labels and Image controls.
<asp:TextBox ID="txtCity" runat="server" Text="" />
<asp:Button Text="Get Weather Information" runat="server" OnClick="GetWeatherInfo" />
<hr />
<table id="tblWeather" runat="server" border="0" cellpadding="0" cellspacing="0"
visible="false">
<tr>
<th colspan="2">
Weather Information
</th>
</tr>
<tr>
<td rowspan="3">
<asp:Image ID="imgWeatherIcon" runat="server" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblCity_Country" runat="server" />
<asp:Image ID="imgCountryFlag" runat="server" />
<asp:Label ID="lblDescription" runat="server" />
Humidity:
<asp:Label ID="lblHumidity" runat="server" />
</td>
</tr>
<tr>
<td>
Temperature:
(Min:
<asp:Label ID="lblTempMin" runat="server" />
Max:
<asp:Label ID="lblTempMax" runat="server" />
Day:
<asp:Label ID="lblTempDay" runat="server" />
Night:
<asp:Label ID="lblTempNight" runat="server" />)
</td>
</tr>
</table>
Namespaces
You will need to import the following namespaces.
C#
using System.Net;
using System.Web.Script.Serialization;
VB.Net
Imports System.Net
Imports System.Web.Script.Serialization
Property classes
You will need to use the following Property classes to hold the JSON data returned from the Weather API web service.
C#
public class WeatherInfo
{
public City city { get; set; }
public List<List> list { get; set; }
}
public class City
{
public string name { get; set; }
public string country { get; set; }
}
public class Temp
{
public double day { get; set; }
public double min { get; set; }
public double max { get; set; }
public double night { get; set; }
}
public class Weather
{
public string description { get; set; }
public string icon { get; set; }
}
public class List
{
public Temp temp { get; set; }
public int humidity { get; set; }
public List<Weather> weather { get; set; }
}
VB.Net
Public Class WeatherInfo
Public Property city As City
Public Property list As List(Of List)
End Class
Public Class City
Public Property name As String
Public Property country As String
End Class
Public Class Temp
Public Property day As Double
Public Property min As Double
Public Property max As Double
Public Property night As Double
End Class
Public Class Weather
Public Property description As String
Public Property icon As String
End Class
Public Class List
Public Property temp As Temp
Public Property humidity As Integer
Public Property weather As List(Of Weather)
End Class
Displaying daily Weather Forecast using Weather API in ASP.Net
When the Button is clicked, the following event handler is executed. The name of the City or Zip Code is passed along with the API Key (AppId) to the Weather API web service using the WebClient class.
The Weather API web service returns the daily Weather Forecast information in JSON format.
The JSON string is deserialized to the Property class object and finally the details are displayed in the respective fields of the HTML Table.
C#
protected void GetWeatherInfo(object sender, EventArgs e)
{
string appId = "<App Id>";
string url = string.Format("http://api.openweathermap.org/data/2.5/forecast/daily?q={0}&units=metric&cnt=1&APPID={1}", txtCity.Text.Trim(), appId);
using (WebClient client = new WebClient())
{
string json = client.DownloadString(url);
WeatherInfo weatherInfo = (new JavaScriptSerializer()).Deserialize<WeatherInfo>(json);
lblCity_Country.Text = weatherInfo.city.name + "," + weatherInfo.city.country;
imgCountryFlag.ImageUrl = string.Format("http://openweathermap.org/images/flags/{0}.png", weatherInfo.city.country.ToLower());
lblDescription.Text = weatherInfo.list[0].weather[0].description;
imgWeatherIcon.ImageUrl = string.Format("http://openweathermap.org/img/w/{0}.png", weatherInfo.list[0].weather[0].icon);
lblTempMin.Text = string.Format("{0}°С", Math.Round(weatherInfo.list[0].temp.min, 1));
lblTempMax.Text = string.Format("{0}°С", Math.Round(weatherInfo.list[0].temp.max, 1));
lblTempDay.Text = string.Format("{0}°С", Math.Round(weatherInfo.list[0].temp.day, 1));
lblTempNight.Text = string.Format("{0}°С", Math.Round(weatherInfo.list[0].temp.night, 1));
lblHumidity.Text = weatherInfo.list[0].humidity.ToString();
tblWeather.Visible = true;
}
}
VB.Net
Protected Sub GetWeatherInfo(sender As Object, e As EventArgs)
Dim appId As String = "<App Id>"
Dim url As String = String.Format("http://api.openweathermap.org/data/2.5/forecast/daily?q={0}&units=metric&cnt=1&APPID={1}", txtCity.Text.Trim(), appId)
Using client As New WebClient()
Dim json As String = client.DownloadString(url)
Dim weatherInfo As WeatherInfo = (New JavaScriptSerializer()).Deserialize(Of WeatherInfo)(json)
lblCity_Country.Text = weatherInfo.city.name + "," + weatherInfo.city.country
imgCountryFlag.ImageUrl = String.Format("http://openweathermap.org/images/flags/{0}.png", weatherInfo.city.country.ToLower())
lblDescription.Text = weatherInfo.list(0).weather(0).description
imgWeatherIcon.ImageUrl = String.Format("http://openweathermap.org/img/w/{0}.png", weatherInfo.list(0).weather(0).icon)
lblTempMin.Text = String.Format("{0}°С", Math.Round(weatherInfo.list(0).temp.min, 1))
lblTempMax.Text = String.Format("{0}°С", Math.Round(weatherInfo.list(0).temp.max, 1))
lblTempDay.Text = String.Format("{0}°С", Math.Round(weatherInfo.list(0).temp.day, 1))
lblTempNight.Text = String.Format("{0}°С", Math.Round(weatherInfo.list(0).temp.night, 1))
lblHumidity.Text = weatherInfo.list(0).humidity.ToString()
tblWeather.Visible = True
End Using
End Sub
Screenshot
![Display daily Weather Forecast using Weather API in ASP.Net]()
Demo
Downloads
