ASP.NET Core Web API 如何通过HTML、JS展示接口返回的JSON数据？

你之前用ASP.NET MVC时，走的是服务器端渲染模式：用户发起一次页面请求，服务器端会结合业务数据和Views目录下的HTML模板，拼接成完整的可渲染HTML直接返回给浏览器，所以项目必须有Views目录存放模板文件。
而ASP.NET Core Web API的设计定位是纯无状态数据服务，职责只覆盖三个环节：接收请求、处理业务逻辑、返回结构化的JSON/XML数据，完全不承担页面渲染的工作。因此默认项目模板不会内置Views、Razor视图相关的目录和配置，从设计上就拆分了“数据提供”和“前端展示”两个独立的环节。

路径1：在现有Web API项目内嵌入静态HTML #

如果不想单独拆分前端站点，想在同一个项目里完成接口数据的页面展示，只需要做简单配置即可：

• 在项目根目录新建wwwroot文件夹，这是ASP.NET Core默认的静态资源存储目录，后续所有HTML、CSS、JS文件都统一放在这里
• 在项目的Program.cs中添加静态文件服务的中间件配置，直接加一行代码：app.UseStaticFiles();，配置后服务器会自动把wwwroot目录下的文件映射为可公开访问的静态资源
• 在wwwroot目录下新建自己的HTML页面，比如index.html
• 在页面的内嵌JS脚本中，通过浏览器内置的异步请求方法获取接口返回的JSON，再通过DOM操作把数据渲染到页面元素上

最简单的请求代码可以直接参考：

// 调用同项目下的WeatherForecast接口
fetch('/weatherforecast')
  // 把返回的JSON字符串解析为JS可操作的对象
  .then(res => res.json())
  .then(data => {
    // 获取页面上的内容容器
    const container = document.getElementById('data-container');
    // 遍历拿到的JSON数据，生成页面元素插入
    data.forEach(item => {
      const row = document.createElement('div');
      row.textContent = `${item.date}：温度 ${item.temperatureC}℃`;
      container.appendChild(row);
    })
  })

配置完成后，直接访问http://你的站点地址/index.html，就能看到渲染好数据的页面，而不是直接展示原始JSON文本。

路径2：独立前端站点对接Web API #

如果是复杂度稍高的项目，一般会把前端页面拆分到独立站点（可以是纯静态HTML站点，也可以是用Vue、React等框架开发的前端工程），和Web API分开部署：

• 前端页面独立部署在单独的域名或端口下，通过异步请求调用Web API的接口地址
• 需要在Web API项目中配置CORS跨域策略，允许前端站点的来源地址访问接口
• 前端拿到接口返回的JSON后，在浏览器端完成数据的渲染逻辑

这种模式下Web API完全不需要存储任何前端页面文件，所有前端资源的管理和渲染逻辑都由独立的前端层负责，也是目前前后端分离架构的标准实现方式。

• 直接在浏览器地址栏访问接口地址看到格式化的JSON文本，是浏览器的默认行为：因为接口返回的响应头声明了内容类型是application/json，浏览器遇到这类响应就会直接展示原始JSON内容，不会自动渲染成可视化页面
• 获取JSON数据的逻辑没有想象中复杂：本质就是在写的HTML页面里，通过JS代码发起HTTP请求拿到接口返回的JSON内容，再把数据填充到页面元素里，不需要绑定复杂的技术栈

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