阅读量:0
在C#中，使用AJAX（Asynchronous JavaScript and XML）实现实时数据交互通常涉及到两个方面：服务器端和客户端。这里我们将使用ASP.NET Core Web API作为服务器端，jQuery作为客户端。
- 创建ASP.NET Core Web API
首先，我们需要创建一个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); } } } - 客户端实现（jQuery）
在项目中创建一个名为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秒钟自动更新的实时数据。你可以通过点击“更新数据”按钮来手动更新数据。
