Click here to Skip to main content
13,260,383 members (44,392 online)
Click here to Skip to main content
Add your own
alternative version

Stats

9.3K views
272 downloads
12 bookmarked
Posted 3 Apr 2017

How to Implement OpenWeatherMap API in ASP.NET MVC

, 4 Apr 2017
Rate this:
Please Sign up or sign in to vote.
Tutorial on Implementing OpenWeatherMap API in ASP.NET MVC. Will teach how to get real time weather data of any city of the world.

Introduction

OpenWeatherMap API is a great way to get the real time weather reports of any city of the world. You can use this API free of charge in your application. To use OpenWeatherMap API you have to create your API key from here.

Here in this article I will implement this API in ASP.NET MVC website.

Who will Benefit from this Article

This article will benefit all programmers who wish to learn how to implement an API. Programmers who are in the learning stages of ASP.NET MVC will also be benefitted as I will explain you in steps of working in ASP.NET MVC.

Background

The API calls are made to this URL:

http://api.openweathermap.org/data/2.5/weather?id=CITYIDappid=APIKEY&units=metric

You can clearly see that you need to pass the CITYID and APIKEY to this URL.

The CITYID of every city of the world is available from here.

OpenWeatherMap API Response JSON

The OpenWeatherMap API response is in JSON whose format is:

{"coord":{"lon":139,"lat":35},
"sys":{"country":"JP","sunrise":1369769524,"sunset":1369821049},
"weather":[{"id":804,"main":"clouds","description":"overcast clouds","icon":"04n"}],
"main":{"temp":289.5,"humidity":89,"pressure":1013,"temp_min":287.04,"temp_max":292.04},
"wind":{"speed":7.31,"deg":187.002},
"rain":{"3h":0},
"clouds":{"all":92},
"dt":1369824698,
"id":1851632,
"name":"Shuzenji",
"cod":200}

The Application Summary

OpenWeatherMap API

This application is a single page built in ASP.NET MVC 6 platform. There is one Controller, One View, a model and few helper classes for Serializing API response JSON.

OpenWeatherMap API

Creating the MVC Application

Let us build this application in step by step manner.

STEP 1 – Add Model

In MVC the Model is a class that resides inside the Models folder and does the communication between Controller and View.

So right click the Models folder and add a new class. Name that class OpenWeatherMap and add the below code to it:

public class OpenWeatherMap
{
    public string apiResponse { get; set; }

    public Dictionary<string, string=""> cities
    {
        get; set;
    }
}

This model has 2 properties – a string and another dictionary.

The string property (apiResponse) will contain the API response. Actually I will serialize the response JSON and convert it to HTML (in the controller) before setting it in this property.

In the dictionary property I will add the city name and their ids. These are:

Melbourne7839805
Auckland2193734
New Delhi1261481
Abu Dhabi292968
Lahore1172451

STEP 2: Add Helper Classes

Create a new folder in your application and name it Class. Now add the below helper classes to it.

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 int pressure { get; set; }
    public int humidity { get; set; }
    public int temp_min { get; set; }
    public int temp_max { 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 double message { get; set; }
    public string country { get; set; }
    public int sunrise { get; set; }
    public int sunset { get; set; }
}

public class ResponseWeather
{
    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 id { get; set; }
    public string name { get; set; }
    public int cod { get; set; }
}

The work of these classes is to serialize the JSON response. Let me tell you creating these classes for a JSON is very hard and lengthy, but fortunately I create these classes within seconds using an online tool json2csharp. You can use this tool to create these classes for any JSON you have. All you have to do is to add your JSON and click the generate button.

STEP 3: Create a Controller

In MVC, controller is the brain of the application where you create your logic. All controllers are placed inside the Controllers folder.

So right click the Controllers folder and add a new controller to it. Name this controller OpenWeatherMapMvcController.

STEP 4: Add a Function to the Controller

Add a new function to the controller and name it FillCity(). The work of this function is to add the city names and their ids to the dictionary property of the Model.

The code of FillCity() function is:

public OpenWeatherMap FillCity()
{
    OpenWeatherMap openWeatherMap = new OpenWeatherMap();
    openWeatherMap.cities = new Dictionary<string, string>();
    openWeatherMap.cities.Add("Melbourne", "7839805");
    openWeatherMap.cities.Add("Auckland", "2193734");
    openWeatherMap.cities.Add("New Delhi", "1261481");
    openWeatherMap.cities.Add("Abu Dhabi", "292968");
    openWeatherMap.cities.Add("Lahore", "1172451");
    return openWeatherMap;
} 

STEP 5: Add code to Get ActionResult Index

The controller will already contain the Get ActionResult Index. So just change the code inside it to the one below:

public ActionResult Index()
{
    OpenWeatherMap openWeatherMap = FillCity();
    return View(openWeatherMap);
}

Let me explain you that the Get ActionResult Index will be called whenever the Index view will load (and not reload when button is clicked).

In this, I am calling the FillCity() method to add city names and their ids to the dictionary property of the modal.

Finally I return this modal. This returns the modal( and its values ) to the index view.

STEP 6: Add Post ActionResult Index

The Post ActionResult Index will be called whenever the page is postback (through the button click).

Actually In my View, I will have cities that a user can select in radio input control, and a button which when clicked should do the API call and fetch the selected city’s weather.

So this means on clicking the button this Post ActionResult will be called.

Add the below code to your Controller.

[HttpPost]
public ActionResult Index(OpenWeatherMap openWeatherMap, string cities)
{
    openWeatherMap = FillCity();

    if (cities != null)
    {
        /*Calling API http://openweathermap.org/api */
        string apiKey = "Your API KEY";
        HttpWebRequest apiRequest = WebRequest.Create("http://api.openweathermap.org/data/2.5/weather?id=" + cities + "&appid=" + apiKey + "&units=metric") as HttpWebRequest;

        string apiResponse = "";
        using (HttpWebResponse response = apiRequest.GetResponse() as HttpWebResponse)
        {
            streamReader reader = new StreamReader(response.GetResponseStream());
            apiResponse = reader.ReadToEnd();
        }
        /*End*/

        /*http://json2csharp.com*/
        ResponseWeather rootObject = JsonConvert.DeserializeObject<ResponseWeather>(apiResponse);

        StringBuilder sb = new StringBuilder();
        sb.Append("<table><tr><th>Weather Description</th></tr>");
        sb.Append("<tr><td>City:</td><td>" + rootObject.name + "</td></tr>");
        sb.Append("<tr><td>Country:</td><td>" + rootObject.sys.country + "</td></tr>");
        sb.Append("<tr><td>Wind:</td><td>" + rootObject.wind.speed + " Km/h</td></tr>");
        sb.Append("<tr><td>Current Temperature:</td><td>" + rootObject.main.temp + " °C</td></tr>");
        sb.Append("<tr><td>Humidity:</td><td>" + rootObject.main.humidity + "</td></tr>");
        sb.Append("<tr><td>Weather:</td><td>" + rootObject.weather[0].description + "</td></tr>");
        sb.Append("</table>");
        openWeatherMap.apiResponse = sb.ToString();
    }
    else
    {
        if (Request.Form["submit"] != null)
        {
            openWeatherMap.apiResponse = "► Select City";
        }
    }
    return View(openWeatherMap);
}

Explanation – This ActionResult has 1 parameters string cities. That means the cities Parameter will get me the city Id of the selected city from the view (on the button click, of course).

Next I am making the OpenWeatherMap API call using C# classes HttpWebRequest & HttpWebResponse. You need to add the namespace using System.Net; to your controller on the top.

I am also using StreamReader class (namespace System.IO) to read the response (JSON).

I now have the JSON so let us serialize it. The serialization is done by the JsonConvert class. You can add the reference to this from NuGet Package Manager – see here.

My this line of code (ResponseWeather rootObject = JsonConvert.DeserializeObject<responseweather>(apiResponse);) I will fetch values from the JSON and add them to my Helper class. All this in 1 line of code and that purely due to the magic of JsonConvert class.

Next I am creating a HTML Table that contains the city weather details using StringBuilder (namespace System.Text). The StingBuilder value is added to model apiResponse property.

Explanation of The if condition:

I check, if cities is not null, only then I call the API. This is done so that user is bound to select at least one city radio input.

The If statement code that does this work is:

if (cities != null)
{
    //API implementation
}            
else
{
    if (Request.Form["submit"] != null)
    {
        openWeatherMap.apiResponse = "► Select City";
    }
}

I also have 2 buttons – one submit button and another reset button. Click of both buttons will call the post ActionResult.

To know if the submit button is clicked, I used the if condition (if (Request.Form["submit"] != null)).

If cities value is null and button submit is clicked (when a user does not selects any city and clicks submit button), I put “"► Select City” text inside the apiResponse property of the modal.

In the view I will show that message to the user.

STEP 7: Add Index View

A view forms the UI of MVC application. To add the index view, right click the Get ActionResult Index in the Controller and select Add View.

Add the following code to your View

@model demo.MVC.Models.OpenWeatherMap
<style>
    #apiDiv {
        padding-left: 20px;
    }

        #apiDiv select, #apiDiv button {
            font-size: 25px;
        }

        #apiDiv h4 {
            margin: 10px 0;
        }

        #apiDiv #message table {
            width: 100%;
            border: double 1px #00ffff;
            background: #ff6a00;
        }

            #apiDiv #message table th {
                text-align: left;
                background: #4CAF50;
            }
</style>
<h1>Implement OpenWeatherMap API in ASP.NET MVC</h1>
@using (Html.BeginForm())
{<button id="reset" name="reset">Reset »</button>}
<div id="apiDiv">
    <h4>Select the City for Weather Report</h4>
    @using (Html.BeginForm())
    {
        foreach (var city in Model.cities)
        {
            <span>
                @Html.RadioButtonFor(m => m.cities, city.Value) @city.Key
            </span>
        }

        <button name="submit">Submit</button>
    }
    <div id="message">@(new HtmlString(Model.apiResponse))</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("input[id='cities']").change(function () {
            $(this).parents("#apiDiv").find("span").css("background", "none");
            $(this).parent().css("background", "#4CAF50");
        });
    });
</script>

Explanation – Starting with the first line I added the reference to the Modal class @model demo.MVC.Models.OpenWeatherMap. This is because the modal class will transfer values from the controller to the view.

Next there are some CSS codes to make the design of this view look good.

Explanation of Html.BeginForm:

Below the CSS you will find this code-

@using (Html.BeginForm())
{<button id="reset" name="reset">Reset »</button>}</h2>

This code is for creating a form and inside it adding my reset button. In MVC form is created with Html.BeginForm()).

Note that in MVC when the form contains a button, only then the button will causes the postback.

Explanation of the Creation of City Radio Input Controls:

Next I create the apiDiv div and inside it I created another form that contains the city radio input controls and a submit button.

To create the city radio button I am looping through the dictionary property of the modal (cities). Then I am creating them using an MVC premade function- Html.RadioButtonFor(m => m.cities, city.Value).

@city.Key will show the city names on the view.

The code

@(new HtmlString(Model.apiResponse))

will show the HTML table or text “► Select City” inside the message div.

 

That means the message div will show the weather details of the selected city to the users.

Explanation of jQuery Code

I did add few lines of jQuery code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
    $("input[id='cities']").change(function () {
        $(this).parents("#apiDiv").find("span").css("background", "none");
        $(this).parent().css("background", "#4CAF50");
    });
});
</script> 

The work of this code is to show green background color around the selected city radio control.

Conclusion

The OpenWeather API application is finally completed. I hope you like and enjoy my explanation to all areas of the code.

I created the same application in HTML page using only jQuery. Do check this article too - OpenWeatherMap API using jQuery Post.

If you have any confusion regarding any line of code – please ask me through the comments section below.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Yogi S.
Software Developer (Senior)
United States United States
Programming is Fun.
I am a Senior Software Developer working in ASP.NET, MVC, C#, jQuery, HTML, Razor and more. I also write programming based tutorials in my own website, codeproject, dzone and few more. Please connect with my social accounts.

My favorite area is jQuery. Visit my website - jQuery to find many more articles on jQuery programming.
Thanks !

You may also be interested in...

Comments and Discussions

 
Questionminor mistake in code Pin
Member 1350354312-Nov-17 4:29
memberMember 1350354312-Nov-17 4:29 
QuestionOpenWeatherMap Pin
Tom Mein26-Jul-17 1:54
memberTom Mein26-Jul-17 1:54 
PraiseWhat fun! Pin
asiwel5-Apr-17 18:49
memberasiwel5-Apr-17 18:49 
GeneralRe: What fun! Pin
Yogi S.5-Apr-17 20:06
memberYogi S.5-Apr-17 20:06 
Questionsource code file link is broken Pin
Tridip Bhattacharjee3-Apr-17 23:18
professionalTridip Bhattacharjee3-Apr-17 23:18 
AnswerRe: source code file link is broken Pin
Yogi S.4-Apr-17 1:01
memberYogi S.4-Apr-17 1:01 
GeneralRe: source code file link is broken Pin
Tridip Bhattacharjee4-Apr-17 1:03
professionalTridip Bhattacharjee4-Apr-17 1:03 
GeneralRe: source code file link is broken Pin
Yogi S.4-Apr-17 1:05
memberYogi S.4-Apr-17 1:05 
GeneralRe: source code file link is broken Pin
Tridip Bhattacharjee4-Apr-17 2:57
professionalTridip Bhattacharjee4-Apr-17 2:57 
GeneralRe: source code file link is broken Pin
Yogi S.4-Apr-17 3:10
memberYogi S.4-Apr-17 3:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.171114.1 | Last Updated 4 Apr 2017
Article Copyright 2017 by Yogi S.
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid