如何从控制器返回多个视图包数据进行查看

Question

我使用的是天气API，在该API中，用户从控制器接收的视图中搜索特定城市或国家的天气作为参数，有关天气的信息完全有效，但我无法将所有信息从控制器返回到视图。

搜索视图

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

控制器

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();
}

应显示数据的视图

<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>

型号类

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

我认为您在WebForms和MVC之间混合了一些概念。MVC上没有runat="server"、asp:Label或asp:Image。必须与纯HTML元素一起使用。

你的代码应该看起来像：

<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>

EDIT1:正如@erik-philips所指出的，您应该真正创建一个模型类。

编辑2:查看HTML帮助程序。将模型绑定到视图时，可以使您的生活更轻松。

Answer 2

Erik在评论中指出，您可以使用一个模型来捕获api响应，然后将其放入viewbag或viewdata中，以便能够在视图中访问它。

ViewBag.WeatherInfo = weatherInfo;

然后在你的视野内你可以做：

var weatherInfo = ViewBag.WeatherInfo as WeatherInfo

通过这种方式，您可以访问视图中的对象

根据要求，这里是如何在您的情况下使用

@{
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>