Display Weather Forecast In ASP.NET MVC Using OpenWeatherMap Weather API

In this article, you will learn how to display the weather forecast in Asp.Net MVC using OpenWeatherMap Weather API.

Before starting and working on this article first visit the following site register yourself and get an API key:

https://www.openweathermap.org/

Display

Create a project called “WeatherForecast”

Installed

Select MVC

No authentication

Select the following things as per the image.

MVC

After pressing OK, Visual Studio creates the project WeatherForecast.

Microsoft visual studio

Now switch to HomeController and create a new action method called “Weather”.

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

Create a Weather view.

Right-click on Weather action method ---> Add View

Seach city

Switch to Weather.cshtml file add the following code.

@{
    ViewBag.Title = "Weather";
}
<h1>Search City and Get Weather Forecast</h1>
<div>
    <strong>City Name:</strong><input id="txtCity" type="text" />
    <br />
    <br />
    <button id="btnSubmit">Get Weather Forecast</button>
</div>
<div>
    <h2>Weather Forecast</h2>
    <table>
        <tr>
            <td>Weather Symbol Icon <img id="imgWeatherIconUrl" src="" title="Weather Icon" /></td>
        </tr>
        <tr>
            <td>
                <strong>City: </strong>
                <span id="lblCity"></span>,
                <span id="lblCountry"></span>
            </td>
        </tr>
        <tr>
            <td>
                <strong>Latitude: </strong>
                <label id="lblLat"></label><br />
                <strong>Longitude: </strong>
                <label id="lblLon"></label>
            </td>
        </tr>
        <tr>
            <td>
                <strong>Description:</strong>
                <label id="lblDescription"></label><br />
                <strong>Humidity:</strong>
                <label id="lblHumidity"></label>
            </td>
        </tr>
        <tr>
            <td>
                Temperature (Feels Like) <label id="lblTempFeelsLike"></label><br />
                Temperature <label id="lblTemp"></label><br />
                Temperature (Min) <label id="lblTempMin"></label><br />
                Temperature (Max) <label id="lblTempMax"></label><br />
            </td>
        </tr>
    </table>
</div>
<script>
    $("#btnSubmit").click(function () {
        var cityname = $("#txtCity").val();
        if (cityname.length > 0) {
            $.ajax({
                url: "http://localhost:52189/Home/WeatherDetail?City=" + cityname,
                type: "POST",
                success: function (rsltval) {
                    var data = JSON.parse(rsltval);
                    console.log(data);
                    $("#lblCity").html(data.City);
                    $("#lblCountry").text(data.Country);
                    $("#lblLat").text(data.Lat);
                    $("#lblLon").text(data.Lon);
                    $("#lblDescription").text(data.Description);
                    $("#lblHumidity").text(data.Humidity);
                    $("#lblTempFeelsLike").text(data.TempFeelsLike);
                    $("#lblTemp").text(data.Temp);
                    $("#lblTempMax").text(data.TempMax);
                    $("#lblTempMin").text(data.TempMin);
                    $("#imgWeatherIconUrl").attr("src", "http://openweathermap.org/img/w/" + data.WeatherIcon + ".png");
                },
                error: function () {
                    alert("Error retrieving weather data.");
                }
            });
        } else {
            alert("City Not Found");
        }
    });
</script>

OUTPUT of Weather.CSS HTML

Weather forecast

Switch to Controller to create ActionMethod which we call from jQuery AJAX.

JSON received in response from API http://api.openweathermap.org/data/2.5/weather:

{
    "coord": {
        "lon": 72.85,
        "lat": 19.01
    },
    "weather": [
        {
            "id": 711,
            "main": "Smoke",
            "description": "smoke",
            "icon": "50d"
        }
    ],
    "base": "stations",
    "main": {
        "temp": 31.75,
        "feels_like": 31.51,
        "temp_min": 31,
        "temp_max": 32.22,
        "pressure": 1014,
        "humidity": 43
    },
    "visibility": 2500,
    "wind": {
        "speed": 4.1,
        "deg": 140
    },
    "clouds": {
        "all": 0
    },
    "dt": 1578730750,
    "sys": {
        "type": 1,
        "id": 9052,
        "country": "IN",
        "sunrise": 1578707041,
        "sunset": 1578746875
    },
    "timezone": 19800,
    "id": 1275339,
    "name": "Mumbai",
    "cod": 200
}

We created a Class from JSON with the help of http://json2chsarp.com, and we need ViewModel to send data from Controller to View. ViewModel helps us to send data and display data.

To Convert JSON to C# class: http://json2csharp.com/

We have to create CLASSES and ViewModel in a file called WeatherViewModel.cs.

Right-click on the MODELS folder, select ADD-->CLASS

WeatherViewModel.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace WeatherForecast.Models
{
    public class ResultViewModel
    {
        public string City { get; set; }
        public string Country { get; set; }
        public string Lat { get; set; }
        public string Lon { get; set; }
        public string Description { get; set; }
        public string Humidity { get; set; }
        public string TempFeelsLike { get; set; }
        public string Temp { get; set; }
        public string TempMax { get; set; }
        public string TempMin { get; set; }
        public string WeatherIcon { get; set; }
    }
    public class Coord
    {
        public double lon { get; set; }
        public double lat { get; set; }
    }
    public class Weather
    {
        public int id { get; set; }
        public string main { get; set; }
        public string description { get; set; }
        public string icon { get; set; }
    }
    public class Main
    {
        public double temp { get; set; }
        public double feels_like { get; set; }
        public int temp_min { get; set; }
        public double temp_max { get; set; }
        public int pressure { get; set; }
        public int humidity { get; set; }
    }
    public class Wind
    {
        public double speed { get; set; }
        public int deg { get; set; }
    }
    public class Clouds
    {
        public int all { get; set; }
    }
    public class Sys
    {
        public int type { get; set; }
        public int id { get; set; }
        public string country { get; set; }
        public int sunrise { get; set; }
        public int sunset { get; set; }
    }
    public class RootObject
    {
        public Coord coord { get; set; }
        public List<Weather> weather { get; set; }
        public string @base { get; set; }
        public Main main { get; set; }
        public int visibility { get; set; }
        public Wind wind { get; set; }
        public Clouds clouds { get; set; }
        public int dt { get; set; }
        public Sys sys { get; set; }
        public int timezone { get; set; }
        public int id { get; set; }
        public string name { get; set; }
        public int cod { get; set; }
    }
}

Switch again to HomeController to write the method to fetch the response/data from OPENWEATHERMAP.ORG through the api.

Following NAMESPACES ADDED

using System.Net;
using System.Web.Mvc;
using System.Web.Script.Serialization;
using WeatherForecast.Models;
[HttpPost]
public String WeatherDetail(string City)
{
    // Assign API KEY which received from OPENWEATHERMAP.ORG
    string appId = "8113fcc5a7494b0518bd91ef3acc074f";
    // API path with CITY parameter and other parameters.
    string url = string.Format("http://api.openweathermap.org/data/2.5/weather?q={0}&units=metric&cnt=1&APPID={1}", City, appId);
    using (WebClient client = new WebClient())
    {
        string json = client.DownloadString(url);
        //********************//
        //      JSON RECEIVED    
        //********************//
        // {"coord":{"lon":72.85,"lat":19.01},
        // "weather":[{"id":711,"main":"Smoke","description":"smoke","icon":"50d"}],
        // "base":"stations",
        // "main":{"temp":31.75,"feels_like":31.51,"temp_min":31,"temp_max":32.22,"pressure":1014,"humidity":43},
        // "visibility":2500,
        // "wind":{"speed":4.1,"deg":140},
        // "clouds":{"all":0},
        // "dt":1578730750,
        // "sys":{"type":1,"id":9052,"country":"IN","sunrise":1578707041,"sunset":1578746875},
        // "timezone":19800,
        // "id":1275339,
        // "name":"Mumbai",
        // "cod":200}
        // Converting to OBJECT from JSON string.
        RootObject weatherInfo = (new JavaScriptSerializer()).Deserialize<RootObject>(json);
        // Special VIEWMODEL design to send only required fields not all fields which received from    
        // www.openweathermap.org api
        ResultViewModel rslt = new ResultViewModel();
        rslt.Country = weatherInfo.sys.country;
        rslt.City = weatherInfo.name;
        rslt.Lat = Convert.ToString(weatherInfo.coord.lat);
        rslt.Lon = Convert.ToString(weatherInfo.coord.lon);
        rslt.Description = weatherInfo.weather[0].description;
        rslt.Humidity = Convert.ToString(weatherInfo.main.humidity);
        rslt.Temp = Convert.ToString(weatherInfo.main.temp);
        rslt.TempFeelsLike = Convert.ToString(weatherInfo.main.feels_like);
        rslt.TempMax = Convert.ToString(weatherInfo.main.temp_max);
        rslt.TempMin = Convert.ToString(weatherInfo.main.temp_min);
        rslt.WeatherIcon = weatherInfo.weather[0].icon;
        // Converting OBJECT to JSON String    
        var jsonstring = new JavaScriptSerializer().Serialize(rslt);
        // Return JSON string.
        return jsonstring;
    }
}

Note. Before running the project switch _layout. cshtml, which is located inside the VIEWS--->SHARED folder.

Move the following two lines in the head section.

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")

Now Press F5 to Execute the Project,

After clicking on the GET WEATHER FORECAST button, you'll get the following output.

Output

Display Weather Forecast In ASP.NET MVC Using OpenWeatherMap Weather API

Full Source Code

_Layout. cshtml code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>© @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>
    @RenderSection("scripts", required: false)
</body>
</html>

WeatherViewModel.cs code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace WeatherForecast.Models
{
    public class ResultViewModel
    {
        public string City { get; set; }
        public string Country { get; set; }
        public string Lat { get; set; }
        public string Lon { get; set; }
        public string Description { get; set; }
        public string Humidity { get; set; }
        public string TempFeelsLike { get; set; }
        public string Temp { get; set; }
        public string TempMax { get; set; }
        public string TempMin { get; set; }
        public string WeatherIcon { get; set; }
    }
    public class Coord
    {
        public double lon { get; set; }
        public double lat { get; set; }
    }
    public class Weather
    {
        public int id { get; set; }
        public string main { get; set; }
        public string description { get; set; }
        public string icon { get; set; }
    }
    public class Main
    {
        public double temp { get; set; }
        public double feels_like { get; set; }
        public int temp_min { get; set; }
        public double temp_max { get; set; }
        public int pressure { get; set; }
        public int humidity { get; set; }
    }
    public class Wind
    {
        public double speed { get; set; }
        public int deg { get; set; }
    }
    public class Clouds
    {
        public int all { get; set; }
    }
    public class Sys
    {
        public int type { get; set; }
        public int id { get; set; }
        public string country { get; set; }
        public int sunrise { get; set; }
        public int sunset { get; set; }
    }
    public class RootObject
    {
        public Coord coord { get; set; }
        public List<Weather> weather { get; set; }
        public string @base { get; set; }
        public Main main { get; set; }
        public int visibility { get; set; }
        public Wind wind { get; set; }
        public Clouds clouds { get; set; }
        public int dt { get; set; }
        public Sys sys { get; set; }
        public int timezone { get; set; }
        public int id { get; set; }
        public string name { get; set; }
        public int cod { get; set; }
    }
}

Weather. cshtml code

@{
    ViewBag.Title = "Weather";
}
<h1>Search City and Get Weather Forecast</h1>
<div>
    <strong>City Name :</strong><input id="txtCity" type="text"/>
    <br />
    <br />
    <button id="btnSubmit">Get Weather Forecast</button>
</div>
<div>
    <h2>Weather Forecast</h2>
    <table>
        <tr>
            <td>Weather Symbol Icon <img id="imgWeatherIconUrl" src="" title="Weather Icon" /></td>
        </tr>
        <tr>
            <td>
                <strong>City:</strong>
                <span id="lblCity"></span> ,
                <span id="lblCountry"></span>
            </td>
        </tr>
        <tr>
            <td>
                <strong>Latitude:</strong>
                <label id="lblLat"></label><br />
                <strong>Longitude:</strong>
                <label id="lblLon"></label>

            </td>
        </tr>
        <tr>
            <td>
                <strong>Description:</strong>
                <label id="lblDescription"></label><br />
                <strong>Humidity:</strong>
                <label id="lblHumidity"></label>
            </td>
        </tr>
        <tr>
            <td>
                Temperature (Feels Like)<label id="lblTempFeelsLike"></label><br />
                Temperature <label id="lblTemp"></label><br />
                Temperature (Min)<label id="lblTempMin"></label><br />
                Temperature (Max)<label id="lblTempMax"></label><br />
            </td>
        </tr>
    </table>
</div>
<script>
    $("#btnSubmit").click(function () {
        var cityname = $("#txtCity").val();
        if (cityname.length > 0)
        {
            $.ajax({
                url: "http://localhost:52189/Home/WeatherDetail?City="+cityname,
                type: "POST",
                success: function (rsltval) {
                    var data = JSON.parse(rsltval);
                    console.log(data);
                    $("#lblCity").html(data.City);
                    $("#lblCountry").text(data.Country);
                    $("#lblLat").text(data.Lat);
                    $("#lblLon").text(data.Lon);
                    $("#lblDescription").text(data.Description);
                    $("#lblHumidity").text(data.Humidity);
                    $("#lblTempFeelsLike").text(data.TempFeelsLike);
                    $("#lblTemp").text(data.Temp);
                    $("#lblTempMax").text(data.TempMax);
                    $("#lblTempMin").text(data.TempMin);
                    $("#imgWeatherIconUrl").attr("src", "http://openweathermap.org/img/w/" + data.WeatherIcon + ".png");
                },
                error: function () {

                }
            });
        }
        else
        {
            alert("City Not Found");
        }
    });
</script>

HomeController.cs code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Mvc;
using System.Web.Script.Serialization;
using WeatherForecast.Models;
namespace WeatherForecast.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Weather()
        {
            return View();
        }
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }
        public ActionResult Contact()
        {
            ViewBag.Message = "Your contact page.";
            return View();
        }
        [HttpPost]
        public String WeatherDetail(string City)
        {
            //Assign API KEY which received from OPENWEATHERMAP.ORG
            string appId = "8113fcc5a7494b0518bd91ef3acc074f";
            //API path with CITY parameter and other parameters.
            string url = string.Format("http://api.openweathermap.org/data/2.5/weather?q={0}&units=metric&cnt=1&APPID={1}", City, appId);
            using (WebClient client = new WebClient())
            {
                string json = client.DownloadString(url);
                //Converting to OBJECT from JSON string.
                RootObject weatherInfo = (new JavaScriptSerializer()).Deserialize<RootObject>(json);
                //Special VIEWMODEL design to send only required fields not all fields which received from    
                //www.openweathermap.org api
                ResultViewModel rslt = new ResultViewModel();
                rslt.Country = weatherInfo.sys.country;
                rslt.City = weatherInfo.name;
                rslt.Lat = Convert.ToString(weatherInfo.coord.lat);
                rslt.Lon = Convert.ToString(weatherInfo.coord.lon);
                rslt.Description = weatherInfo.weather[0].description;
                rslt.Humidity = Convert.ToString(weatherInfo.main.humidity);
                rslt.Temp = Convert.ToString(weatherInfo.main.temp);
                rslt.TempFeelsLike = Convert.ToString(weatherInfo.main.feels_like);
                rslt.TempMax = Convert.ToString(weatherInfo.main.temp_max);
                rslt.TempMin = Convert.ToString(weatherInfo.main.temp_min);
                rslt.WeatherIcon = weatherInfo.weather[0].icon;
                //Converting OBJECT to JSON String
                var jsonstring = new JavaScriptSerializer().Serialize(rslt);
                //Return JSON string.
                return jsonstring;
            }
        }
    }
}

Happy Coding. . . .

15 Comments

Join the conversation! Your thoughts help the community grow.

eli marvin4y ago
@Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") I'm getting an error in vsc that Scripts doesn't exist in the current context
Kemi Jones5y ago
This code is not working the @Styles.. are alll shwoing errror, is there anything I am missing
Richard Neider6y ago
Any ideas? I can't resolve this issue and only happens about 15% of the time (depending on value) but 15% is more then enough to be an issue in the end.
Richard Neider6y ago
Whenever there is a point value it crashes. '22.78 is not a valid value for Int32.'
- David Saa5y ago
  The definition of the temperature variables in the model are as Int, set them as double
- Max Play5y ago
  Change to float or double
Richard Neider6y ago
Tried it with "http://localhost:52189/Home/WeatherDetail?City=" and tried it as "WeatherDetail?City="+cityname," im getting an error.
- Richard Neider6y ago
  System.Exception: '22.78 is not a valid value for Int32.'
- Richard Neider6y ago
  Has anything changed in the source since "june" that I can't see?
Junaid Afzal6y ago
Yeh limited cities ke liay kam krta hay
Flora Luyckfasseel6y ago
My url doesn't work..
- Cadence Sweetser6y ago
  The URL in the weather.cshtml should just be "WeatherDetail?City="+cityname," rather than "http://localhost:52189/Home/WeatherDetail?City="+cityname,
- Richard Neider6y ago
  Im getting an error here. RootObject weatherInfo = (new JavaScriptSerializer()).Deserialize<RootObject>(json); error = System.Exception: '22.78 is not a valid value for Int32.' does anyone know why?
- Richard Neider6y ago
  The JSON seems correct
Sourav Kumar Das6y ago
Nice and useful article. Thanks for sharing.