C# Asp.net MVC - 如何正確傳遞從外部 API 提取的數據以顯示在視圖上？

Question

我是使用 ASP.NET 和 MVC 方法的新手。 我希望得到有關我的代碼出了什么問題的建議。 目前，我正在嘗試從 API 中提取數據並將其顯示在瀏覽器視圖中。

這是我試圖獲取的 API JSON 數據：

{
"value": [
    {
      "BusStopCode": "01012",
      "RoadName": "Victoria St",
      "Description": "Hotel Grand Pacific",
      "Latitude": 1.29684825487647,
      "Longitude": 103.85253591654006
    },
    {
      "BusStopCode": "01013",
      "RoadName": "Victoria St",
      "Description": "St. Joseph's Ch",
      "Latitude": 1.29770970610083,
      "Longitude": 103.8532247463225
    },
    {
      "BusStopCode": "01019",
      "RoadName": "Victoria St",
      "Description": "Bras Basah Cplx",
      "Latitude": 1.29698951191332,
      "Longitude": 103.85302201172507
    },
    // and the list goes on and on...
]}

以下是我的 MVC 類：

1. 模型類

using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace SGTrafficAnalytics.Models
{

    public class BusStopsModel
    {
        public List<Value> value { get; set; }
    }

    public class Value
    {
        public string BusStopCode { get; set; }
        public string RoadName { get; set; }
        public string Description { get; set; }
        public float Latitude { get; set; }
        public float Longitude { get; set; }
    }

}

2. 查看類 .cshtml

@model IEnumerable<SGTrafficAnalytics.Models.BusStopsModel>

        @foreach (var i in Model)
        {
            foreach (var v in i.value)
            {
                <div>@v.BusStopCode</div>
            }
        }

3. 控制器類

using Newtonsoft.Json;
using SGTrafficAnalytics.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Mvc;

namespace SGTrafficAnalytics.Controllers
{
    public class HomeController : Controller
    {
        private static string API_KEY = "xxx";

        public ActionResult Index()
        {
            ViewBag.Title = "Home Page";

            var URL = new UriBuilder("http://datamall2.mytransport.sg/ltaodataservice/BusStops");
            var client = new WebClient();
            client.Headers.Add("AccountKey", API_KEY);
            client.Headers.Add("Accept", "application/json");
            var content = client.DownloadString(URL.ToString());

            //List<Value> valueList = new List<Value>();
            var valueList = JsonConvert.DeserializeObject<BusStopsModel>(content);

            return View(valueList);
        }        
    }
}

首先，我想知道我的模型包含一個名為 BusStopsModel 的類，它有一個包含我需要的所有信息的 List，我的反序列化代碼是否正確？ var valueList = JsonConvert.DeserializeObject<BusStopsModel>(content); 在線搜索主要讓我找到不包括模型類中的 List 的解決方案。

其次，在運行時，我會收到一條錯誤消息，指出視圖字典需要 IEnumerable 類型。 但是我發現您不能將對象反序列化為 List 類型。 我該如何解決這個問題？

The model item passed into the dictionary is of type 'SGTrafficAnalytics.Models.BusStopsModel', but this dictionary 
requires a model item of type 'System.Collections.Generic.IEnumerable`1[SGTrafficAnalytics.Models.BusStopsModel]'.

第三，由於我有一個列表，在視圖類中有 2 個 foreach 來訪問內部數據是否正確？ 另外，放置@model IEnumerable<SGTrafficAnalytics.Models.BusStopsModel>是否正確？

第四，使用WebClient獲取API是否可以接受？ 我見過其他方法，例如 REST 或 WebAPI，但它們主要用於本地數據而不是外部數據？ 我也聽說過 jQuery 和 ajax，但不知道如何使用它們。 另外，HTTPClient 具有異步功能，這意味着與 WebClient 相比它更快更高效嗎？

非常感謝您提供的任何幫助！

Answer 1

您正在反序列化模型的單個實例：

var valueList = JsonConvert.DeserializeObject<BusStopsModel>(content);

但是該視圖期望該模型的集合：

@model IEnumerable<SGTrafficAnalytics.Models.BusStopsModel>

基本上，一個蘋果不是一籃子蘋果。 從數據和模型結構來看，單個實例可能是正確的。 （您可以在調試器中觀察反序列化結果以確認是否是這種情況。）更新視圖以期待您想要傳遞給它的模型：

@model SGTrafficAnalytics.Models.BusStopsModel

在視圖中，您似乎想遍歷模型的.value屬性，而不是模型本身：

@foreach (var i in Model.value)

總的來說，您似乎只是對語義感到困惑。 您有一個包含列表的模型。 模型本身不是列表。