ASP.NET MVC - 在 Razor 页面中显示 JSON - foreach 问题

Question

我一般是 C# 和 ASP.NET 的新手，所以如果有人知道如何解决我将向您展示的这个问题，我将不胜感激。 所以，问题是..我不能也不知道如何在 Razor 页面或所谓的视图中显示 JSON。 我将向您展示代码和 JSON 文件。

实体 - 类模型：

// Root myDeserializedClass = JsonConvert.DeserializeObject<Root>(myJsonResponse); 
    public class Source
    {
        public string id { get; set; }
        public string name { get; set; }
    }

    public class Article
    {
        public Source source { get; set; }
        public string author { get; set; }
        public string title { get; set; }
        public string description { get; set; }
        public string url { get; set; }
        public string urlToImage { get; set; }
        public DateTime publishedAt { get; set; }
        public string content { get; set; }
    }

    public class FetchedNews
    {
        public string status { get; set; }
        public int totalResults { get; set; }
        public List<Article> articles { get; set; }
    }

JSON 文件：

{"status":"ok","totalResults":38,"articles":[{"source":{"id":null,"name":"CNBC"},"author":"The Associated Press","title":"Hong Kong protester given 9-year term in 1st security case - CNBC","description":"A pro-democracy protester was sentenced Friday to nine years in prison in the closely watched first case under Hong Kong's national security law.","url":"https://www.cnbc.com/2021/07/30/pro-democracy-protester-given-9-year-term.html","urlToImage":"https://image.cnbcfm.com/api/v1/image/106917243-1627372873218-gettyimages-1224906144-AFP_1UP4SA.jpeg?v=1627372232","publishedAt":"2021-07-30T07:37:06Z","content":"A pro-democracy protester was sentenced Friday to nine years in prison in the closely watched first case under Hong Kong's national security law as the ruling Communist Party tightens control over th… [+2386 chars]"}

从 newsapi.org 获取 JSON 文件的方法：

 public async Task<IEnumerable<FetchedNews>> FetchNews()
        {
            List<FetchedNews> newsFetched = new List<FetchedNews>();

            using (var client = new HttpClient())
            {
                client.BaseAddress = new Uri("https://newsapi.org");
                client.DefaultRequestHeaders.Accept.Clear();
                client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));

                HttpResponseMessage response = await client.GetAsync("/v2/top-headlines?country=us&apiKey=fa9c19da02df465d8f7d6b0654248a24");
                if (response.IsSuccessStatusCode)
                {
                    var jsondata =  response.Content.ReadAsStringAsync().Result;
                    newsFetched = JsonConvert.DeserializeObject<List<FetchedNews>>(jsondata);

                }
                return newsFetched;
            }
        }

控制器

 [HttpGet]
        [Route("news/fetch")]
        public async Task<ActionResult> Fetch()
        {
            var newsFetched = await news.FetchNews();
            return View(newsFetched);
        }

最后我得到这个错误

无法将当前 JSON 对象（例如 {"name":"value"}）反序列化为类型“System.Collections.Generic.List`1[Newspage.Data.Models.FetchedNews]”，因为该类型需要一个 JSON 数组（例如 [ 1,2,3]) 正确反序列化。

是的，我知道在错误中它说它需要我使用 JSON 数组。 我也尝试将 JSON 对象转换为 JSON 数组但失败了。 这里也是视图

@model IEnumerable<Newspage.Data.Models.FetchedNews>

@{
    ViewBag.Title = "Fetch";
}

<h2>Fetch</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.status)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.totalResults)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.status)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.totalResults)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
            @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
            @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
        </td>
    </tr>
}

</table>

Answer 1

fethnews 是一个项目，而不是collectiton 所以

修复动作

public async Task<ActionResult<FetchedNews>> FetchNews()
.....
if (response.IsSuccessStatusCode)
                {
var jsondata =  response.Content.ReadAsStringAsync().Result;
 newsFetched = JsonConvert.DeserializeObject<FetchedNews>(jsondata);

                }
 return Ok( newsFetched);

并查看

@model Newspage.Data.Models.FetchedNews

.....

@foreach (var item in Model.articles) 

Answer 2

确保您的 JSON 字符串数据和 JSON 对象映射器属性彼此一致。 然后，如果您的 JSON 根对象是具有状态、totalResults 和文章列表属性的单个对象，则使用以下代码，即

newsFetched = JsonConvert.DeserializeObject<FetchedNews>(jsondata);

但是，如果您的目标 JSON 字符串数据是根数组，并且不包含状态和 totalResults，但是，遵循文章类属性，然后获取使用下面的代码，即

newsFetched = JsonConvert.DeserializeObject<List<Article>>(jsondata);

Answer 3

您的 JSON 返回一个 JSON 对象，而不是一个 JSON 数组。 这

@model IEnumerable<Newspage.Data.Models.FetchedNews>

假定一个可枚举（因此响应中的数组）。 将此更改为

@model Newspage.Data.Models.FetchedNews

它应该可以正常工作。

在您的页面中，您可以循环浏览文章列表

@foreach(var article in Model.articles)
{
    //Do something
}

Answer 4

在视图中将此转换为此

@model IEnumerable<List<Newspage.Data.Models.FetchedNews>>