首页 > 解决方案 > 如何向前端显示数据?

问题描述

我是学习如何实现开放天气 API 的新手。我不完全知道如何将数据显示到剃刀视图。所以如果我想展示 temp 我会怎么做。我不想使用 viewbag 来显示数据。

我在剃刀视图中使用元组来实现 2 个模型。以邮政编码作为输入的 openweatherModel。另一个是 RootObject,它是 Json.cs 中的一个类,它包含 json 信息,如 temp、coord、description 等。

api

public class ApiController 
    {
        public async Task<Json.RootObject> GetResult(int zipCode)
        {
            const string apiKey = "";
            var client = new HttpClient();


            var response = await client.GetAsync("http://api.openweathermap.org/data/2.5/weather?zip=" +
                                                 zipCode + ",us&APPID=" + apiKey);
            response.EnsureSuccessStatusCode();

            var responseBody = await response.Content.ReadAsStringAsync();

            return JsonConvert.DeserializeObject<Json.RootObject>(responseBody);
        }

 [HttpGet]
        public ActionResult Main()
        {
            return View();
        }
        [HttpPost]
        public async Task<ActionResult> Main(int zipCode)
        {
             var controller = new ApiController();

            var rootObject = await controller.GetResult(zipCode);

           var tuple = new Tuple<OpenWeatherMap, RootObject>(new OpenWeatherMap(), new RootObject());

            return View(tuple);
        }

剃刀

@model  Tuple<Weather.Models.OpenWeatherMap, Weather.HelperClasses.Json.RootObject>
 <div>

        @using (Html.BeginForm("Main", "Home", FormMethod.Post, new { @class = "container" }))
        {


            @Html.TextBoxFor(tuple =>tuple.Item1.zipCode, new {@Name = "zipCode", @class = "inputs", required = "Required", placeholder = "Enter ZipCode" })

            <input id="submit" type="submit" value="Search" />

            foreach (var items in Model.Item2.weather)
            {
                <h1>@items.description</h1>
            }
        }
    </div>

根对象

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

标签: c#asp.net-mvc

解决方案


推荐阅读