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

Question

I am new to C# and ASP.NET in general, so please if anyone knows how to fix this problem that I am going to show you, I would gladly appreciate it. So, the problem is.. I can not and do not know how to display the JSON in Razor page, or so called View. I will show you the code and JSON file.

Entity - Class model:

// 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 File:

{"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]"}

Method to GET the JSON file from newsapi.org:

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

Controller

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

And I get this error at the end

Cannot deserialize the current JSON object (eg {"name":"value"}) into type 'System.Collections.Generic.List`1[Newspage.Data.Models.FetchedNews]' because the type requires a JSON array (eg [1,2,3]) to deserialize correctly.

Yes, I know in the error it says that it requires to me to use JSON Array. I also tried to convert JSON Object to JSON Array but failed. Here is also the View

@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 is one item , not collectiton so

fix the action

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

                }
 return Ok( newsFetched);

and view

@model Newspage.Data.Models.FetchedNews

.....

@foreach (var item in Model.articles) 

Answer 2

Ensure that your JSON string data and JSON object mappers properties are consistent with each other. Then if your JSON root object is a single object with status, totalResults and articles list property then use below code ie

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

If however, your target JSON string data is array at root and does not contain status and totalResults, but, follows Article class properties then fetch use below code ie

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

Answer 3

Your JSON returns a JSON object, not a JSON array. The

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

assumes an enumerable (thus an array in the response). Change this to

@model Newspage.Data.Models.FetchedNews

and it should work fine.

Within your page, you can loop through the list of articles with

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

Answer 4

在视图中将此转换为此

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