1

i am a programming student, working with a asp.net mvc 4 web app, i am testing a simple web app that uses the http://openweathermap.org/api so when i click a link, it executes the Action Result on the home controller, the code to get the data from the api is in this action result and it fetches the api json data and stores it in a viewbag.message that is then passed back to the view. I have that much working in so far as i can get the json result and see it on the view. I am not sure how to proceed & the pages i have looked up seem to be centered around ajax jquery

My question is about the serializing/displaying the json result without adding any plugins or anything just yet, i would like to format / serialise it so it looks better maybe fit it into a table or something, but without getting into ajax & jquery just yet as i haven't learned that part yet.

I have removed the api key from the code.

public ActionResult getWeather()
{
    var uri = "http://api.openweathermap.org/data/2.5/forecast?id=7778677&APPID=123456789";

    WebClient client = new WebClient();

    client.Headers.Add("user-agent", "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2; .NET CLR 1.0.3705;)");

    var resultContent = client.DownloadString(uri);

    ViewBag.Message = resultContent;

    return View();

}

And here is the result view:

screenshot of result view showing the json data from the api

screenshot of result view showing the json data from the api

I hope i am explaining myself correctly, Thank You. M.

McGrady
  • 10,869
  • 13
  • 47
  • 69
amanda clarke
  • 11
  • 2

1 Answers1

0

.NET 4 has a built-in JSON serializer/deserializer, but if you can, use NuGet to get NewtonSofts JSON Framework as it is much more flexible and powerful.

With it, you could do something along the lines of this within your backing code for your view, or maybe even in your view's template with Razor:

WeatherDataModel[] myWeatherData = JsonConvert.DeserializeObject<WeatherDataModel>(ViewBag.Message);

(This assumes you have a model for the weather data that matches up with the data you get from the openweathermap api.)

You should then be able to use a loop to get the data in your WeatherDataModel array into a table.

Another option, if you are willing to take a small leap into jquery, can be found in the answer to this question: How to load JSON data into Bootstrap table?

It makes use of a very simple snippet of javascript/jquery and bootstrap.

In your case, you would set the data to use the JSON you stored in the ViewBag.Message: 

$(function () {
    $('#table').bootstrapTable({
        data: ViewBag.Message
    });
});

If you built your app in VS 2015 and used the MVC 4 template, you may very well already have bootstrap built into your project. If not, you can easily import it with NuGet.

I haven't done much in MVC 4 for a while now, and so I will point you to this question's answer about where best to place your scripts: Proper place to load jQuery in MVC Layout view

Good luck!

Community
  • 1
  • 1
Scot
  • 121
  • 5