ASP.NET JSON在前端的應用主要涉及到兩個方面：一是從后端獲取JSON數據，二是使用前端技術處理和展示這些數據。以下是一個簡單的示例，展示了如何在ASP.NET Web API中創建一個API，以及在前端JavaScript中使用Fetch API獲取和展示這些數據。
首先，我們需要創建一個ASP.NET Web API來返回JSON數據。在Visual Studio中，創建一個新的ASP.NET Web應用程序項目，然后添加一個Web API控制器。例如，創建一個名為ValuesController的控制器，并添加一個名為Get的方法，該方法返回一個包含字符串值的JSON數組。
using System.Collections.Generic;
using System.Web.Http;
namespace AspNetJsonDemo.Controllers
{
public class ValuesController : ApiController
{
public IEnumerable<string> Get()
{
return new List<string> { "value1", "value2", "value3" };
}
}
}
接下來，我們需要編寫前端JavaScript代碼來從后端API獲取JSON數據，并將其展示在網頁上。在這個例子中，我們將使用Fetch API來獲取數據，并使用DOM操作將數據顯示在一個列表中。
首先，在HTML文件中創建一個列表元素，用于顯示獲取到的JSON數據：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AspNetJsonDemo</title>
</head>
<body>
<h1>JSON Data from ASP.NET API</h1>
<ul id="dataList"></ul>
<script src="main.js"></script>
</body>
</html>
然后，在main.js文件中編寫JavaScript代碼，使用Fetch API從后端API獲取數據，并將數據顯示在列表中：
document.addEventListener("DOMContentLoaded", function () {
fetch("api/values")
.then(response => response.json())
.then(data => {
const dataList = document.getElementById("dataList");
data.forEach(item => {
const listItem = document.createElement("li");
listItem.textContent = item;
dataList.appendChild(listItem);
});
})
.catch(error => {
console.error("Error fetching JSON data:", error);
});
});
現在，當你在瀏覽器中打開這個HTML文件時，它將從ASP.NET Web API獲取JSON數據，并將其顯示在一個列表中。這就是如何在ASP.NET中使用JSON并在前端應用它的一個簡單示例。你可以根據需要修改這個示例，以適應你的具體需求。
