ajax c#实时数据交互 - 问答

在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秒钟自动更新的实时数据。你可以通过点击“更新数据”按钮来手动更新数据。

0 赞

0 踩