ASP.NET MVC Razor页用foreach展示JSON时反序列化报错如何解决

问题根因 #

报错的核心原因：newsapi.org的接口返回的是单个JSON对象，不是JSON数组，你尝试将单个对象反序列化为List<FetchedNews>集合类型，类型不匹配导致反序列化失败。

调整方案 #

1. 修改拉取新闻的方法

将返回类型从集合改为单个FetchedNews对象，同时修正异步调用逻辑避免同步阻塞：

public async Task<FetchedNews> FetchNews()
{
    FetchedNews newsFetched = null;
    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)
        {
            // 改为异步读取字符串，不要用Result阻塞线程
            var jsondata = await response.Content.ReadAsStringAsync();
            // 直接反序列化为单个FetchedNews对象，不要嵌套List
            newsFetched = JsonConvert.DeserializeObject<FetchedNews>(jsondata);
        }
        return newsFetched;
    }
}

2. 修改控制器代码

无需大幅调整，直接将拿到的单个对象传入视图即可：

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

3. 修改Razor视图代码

首先修改Model声明为单个FetchedNews类型，再遍历对象内的articles集合展示所有新闻内容：

@model Newspage.Data.Models.FetchedNews

@{ 
    ViewBag.Title = "Fetch";
}

<h2>Fetch</h2>
<p>接口状态：@Model.status | 总新闻条数：@Model.totalResults</p>

<table class="table">
    <tr>
        <th>新闻来源</th>
        <th>作者</th>
        <th>标题</th>
        <th>发布时间</th>
        <th>内容描述</th>
    </tr>

    @foreach (var article in Model.articles) {
    <tr>
        <td>@article.source.name</td>
        <td>@article.author</td>
        <td><a href="@article.url" target="_blank">@article.title</a></td>
        <td>@article.publishedAt.ToString("yyyy-MM-dd HH:mm")</td>
        <td>@article.description</td>
    </tr>
    }
</table>

内容的提问来源于stack exchange，提问作者Samke11