How to return multiple viewbag data to view from controller?

Question

I am using weather API in which user search weather for specific City or Country from view which is receive by controller as parameter,information about weather is completely working but I am just unable to return all that information back to view from controller.

view for search

<form action="searchbyname" method="post">
    <input type="text" name="weather" placeholder="Find your location...">
    <input type="submit" value="Find">               
</form>

Controller

 public ActionResult searchbyname(string weather)
        {
            string appId = "f40a39abac667183c127adefffcf88ed";
            string url = string.Format("http://api.openweathermap.org/data/2.5/weather?q={0}&units=metric&APPID={1}", weather, appId);
            using (WebClient client = new WebClient())
            {
                string json = client.DownloadString(url);
                if (json.IndexOf("Error") == -1)
                {

                    WeatherInfo weatherInfo = (new JavaScriptSerializer()).Deserialize<WeatherInfo>(json);
                    ViewBag.citycountry = weatherInfo.name + "," + weatherInfo.sys.country;
                    ViewBag.ImageUrl = string.Format("http://openweathermap.org/images/flags/{0}.png", weatherInfo.sys.country.ToLower());
                    ViewBag.des = weatherInfo.weather[0].description;
                    //weatherimage
                    ViewBag.ImageUrl = string.Format("http://openweathermap.org/img/w/{0}.png", weatherInfo.weather[0].icon);
                    ViewBag.temp = string.Format("{0}°С", Math.Round(weatherInfo.main.temp, 1));

                }
            }
            return View();
        }

View in which data should be shown

<table id="tblWeather" border="0" cellpadding="0" cellspacing="0" style="display:none">
<tr>
    <th colspan="2">
        Weather Information
    </th>
</tr>
<tr>
    <td rowspan="3">
        <img id="imgWeatherIcon" />
    </td>
</tr>
<tr>
    <td>
        <span id="citycountry">@ViewBag.citycountry</span>
        <img id="imageurl" src="@ViewBag.ImageUrl" />
        <span id="des">@ViewBag.des</span>
    </td>
</tr>

Model class

public class ClimateModel
    {
        public class WeatherInfo
        {
            public Coord coord { get; set; }
            public Sys sys { get; set; }
            public List<Weather> weather { get; set; }
            public Main main { get; set; }
            public int dt { get; set; }
            public string name { get; set; }
        }

        public class Coord
        {
            public double lon { get; set; }
            public double lat { get; set; }
        }

        public class Sys
        {
            public string country { get; set; }
        }

        public class Weather
        {
            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 temp_min { get; set; }
            public double temp_max { get; set; }
            public int humidity { get; set; }
        }
    }
}

Answer 1

I think you are mixing some concepts between WebForms and MVC . There is no runat="server" , asp:Label or asp:Image on MVC . You must use with pure HTML elements.

Your code should looke like:

<table id="tblWeather" border="0" cellpadding="0" cellspacing="0" style="display:none">
    <tr>
        <th colspan="2">
            Weather Information
        </th>
    </tr>
    <tr>
        <td rowspan="3">
            <img id="imgWeatherIcon" />
        </td>
    </tr>
    <tr>
        <td>
            <span id="citycountry">@ViewBag.citycountry</span>
            <img id="imageurl" src="@ViewBag.ImageUrl" />
            <span id="des">@ViewBag.des</span>
        </td>
    </tr>
</table>

EDIT 1: As @erik-philips pointed out, you should really create a model class.

EDIT 2: Take a look at HTML Helpers . The can make your life easier when binding models to views.

Answer 2

As Erik pointed out in his comment you could use a model to capture the api response, and then put it either in a viewbag, or a viewdata to be able to access it inside the view .

ViewBag.WeatherInfo = weatherInfo;

Then inside your view you can do :

var weatherInfo = ViewBag.WeatherInfo as WeatherInfo

This way you have access to your object inside the view

As requested here is how it can be used in your situation

@{
var weatherInfo = ViewBag.WeatherInfo as WeatherInfo 
}

<table id="tblWeather" border="0" cellpadding="0" cellspacing="0" style="display:none">
<tr>
    <th colspan="2">
        Weather Information
    </th>
</tr>
<tr>
    <td rowspan="3">
        <img id="imgWeatherIcon" />
    </td>
</tr>
<tr>
    <td>
        <span id="citycountry">@weatherInfo.name , @weatherInfo.sys.country</span>
        <img id="imageurl" src="your image link" />
        <span id="des">@weatherInfo.weather.First().description</span>
    </td>
</tr>