在C#中，使用AJAX（Asynchronous JavaScript and XML）實現實時數據交互通常涉及到兩個方面：服務器端和客戶端。這里我們將使用ASP.NET Core Web API作為服務器端，jQuery作為客戶端。
首先，我們需要創建一個ASP.NET Core Web API項目。在Visual Studio中，選擇“創建新項目” -> “ASP.NET Core Web 應用”。
在項目中創建一個名為Data的文件夾，并在其中創建一個名為Model.cs的文件，定義一個簡單的數據模型類：
public class Data
{
public string Value { get; set; }
}
在Controllers文件夾中創建一個名為DataController.cs的文件，定義一個API控制器來處理客戶端的請求：
using System.Collections.Generic;
using System.Linq;
using Microsoft.AspNetCore.Mvc;
namespace RealTimeData交互.Controllers
{
[ApiController]
[Route("[controller]")]
public class DataController : ControllerBase
{
private static List<Data> dataList = new List<Data>
{
new Data { Value = "數據1" },
new Data { Value = "數據2" },
new Data { Value = "數據3" }
};
[HttpGet("getdata")]
public ActionResult<IEnumerable<Data>> GetData()
{
return dataList;
}
[HttpGet("updatedata")]
public ActionResult<Data> UpdateData(string newValue)
{
var dataToUpdate = dataList.FirstOrDefault(d => d.Value == newValue);
if (dataToUpdate != null)
{
dataToUpdate.Value = newValue;
}
return Ok(dataToUpdate);
}
}
}
在項目中創建一個名為Scripts的文件夾，并在其中創建一個名為main.js的文件，編寫客戶端代碼：
$(document).ready(function () {
// 獲取數據
function getData() {
$.getJSON("/api/data/getdata", function (data) {
$("#dataList").html("");
data.forEach(function (item) {
$("#dataList").append("<p>" + item.Value + "</p>");
});
});
}
// 更新數據
function updateData() {
var newValue = prompt("請輸入要更新的數據：");
$.getJSON("/api/data/updatedata", { newValue: newValue }, function (data) {
if (data != null) {
$("#dataList").html("");
$("#dataList").append("<p>" + data.Value + "</p>");
}
});
}
// 初始化
getData();
// 每隔5秒鐘更新一次數據
setInterval(updateData, 5000);
});
Views/Home/Index.cshtml中引入jQuery庫和客戶端腳本：<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AJAX 實時數據交互</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="~/Scripts/main.js"></script>
</head>
<body>
<h1>實時數據交互</h1>
<div id="dataList"></div>
</body>
</html>
現在，當你運行項目并訪問https://localhost:5001時，你將看到每隔5秒鐘自動更新的實時數據。你可以通過點擊“更新數據”按鈕來手動更新數據。
