如何从JavaScript向ASP.NET Core控制器传递数据？

针对你的需求，在ASP.NET Core中，从前端JavaScript向控制器发送数据最标准、灵活的方式就是结合AJAX（原生JS或jQuery）与控制器的API端点，完美适配你需要保存运算历史数组的场景。下面我给你一步步拆解实现：

一、先搞定后端：定义模型与控制器端点 #

首先你需要在后端定义对应数据的模型类，然后创建接收POST请求的控制器方法：

1. 创建运算记录模型 #

在你的ASP.NET Core项目中新建一个模型类（比如CalculationRecord.cs），用来映射前端传来的每条运算数据：

public class CalculationRecord
{
    // 根据你的实际需求定义字段，比如运算式、结果、时间等
    public string Expression { get; set; }
    public decimal Result { get; set; }
    // 可以加更多字段，比如创建时间
    public DateTime CreatedAt { get; set; } = DateTime.Now;
}

2. 编写控制器的POST端点 #

在你现有的控制器（比如AnswersController）中添加一个接收数组的HttpPost方法，注意用[FromBody]特性来接收JSON格式的数据：

using Microsoft.AspNetCore.Mvc;
using YourProjectName.Models; // 替换成你的模型命名空间
using YourProjectName.Data; // 如果用EF Core存数据库的话

public class AnswersController : Controller
{
    private readonly YourDbContext _context; // 假设你用EF Core

    public AnswersController(YourDbContext context)
    {
        _context = context;
    }

    // 接收运算历史数组的端点
    [HttpPost]
    [Route("api/answers/save-history")] // 自定义路由，方便前端调用
    public async Task<IActionResult> SaveCalculationHistory([FromBody] List<CalculationRecord> history)
    {
        if (!ModelState.IsValid)
        {
            return BadRequest(ModelState); // 返回验证错误
        }

        // 将数据存入数据库
        _context.CalculationRecords.AddRange(history);
        await _context.SaveChangesAsync();

        return Ok(new { Message = "运算历史保存成功" }); // 返回成功响应
    }
}

二、前端JavaScript发送AJAX请求 #

假设你的JS计算器已经把运算记录存在了一个数组里（比如calculationHistory），下面提供两种常用的AJAX实现方式：

方式1：原生JS Fetch API（无需额外库） #

这是现代浏览器原生支持的方式，不需要引入jQuery：

// 假设你的运算历史数组是这样的结构
const calculationHistory = [
    { Expression: "2 + 3", Result: 5 },
    { Expression: "10 * 4", Result: 40 },
    // 更多记录...
];

// 发送POST请求
fetch('/api/answers/save-history', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        // 如果你的项目启用了防伪造令牌，需要加上这个（ASP.NET Core默认启用）
        'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
    },
    body: JSON.stringify(calculationHistory)
})
.then(response => {
    if (response.ok) {
        return response.json();
    }
    throw new Error('请求失败');
})
.then(data => {
    console.log(data.Message); // 处理成功响应
    alert('运算历史已保存！');
})
.catch(error => {
    console.error('保存失败:', error);
    alert('保存出错，请稍后重试');
});

方式2：jQuery AJAX（如果你习惯用jQuery） #

如果你的项目已经引入了jQuery，这种写法更简洁：

// 同样假设已有calculationHistory数组
$.ajax({
    url: '/api/answers/save-history',
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify(calculationHistory),
    // 防伪造令牌
    headers: {
        'RequestVerificationToken': $('input[name="__RequestVerificationToken"]').val()
    },
    success: function(data) {
        console.log(data.Message);
        alert('运算历史已保存！');
    },
    error: function(xhr, status, error) {
        console.error('保存失败:', error);
        alert('保存出错，请稍后重试');
    }
});

三、关键注意事项 #

1. 防伪造令牌（Anti-Forgery Token）：ASP.NET Core默认启用防跨站请求伪造（CSRF）保护，所以你需要在页面中包含令牌（通常在布局页的form标签里自动生成，或者手动添加<input type="hidden" asp-antiforgery="true" />），否则请求会被拦截。
2. 跨域问题：如果你的前端JS和后端API不在同一个域名下，需要在后端配置CORS中间件（在Program.cs中添加builder.Services.AddCors()和app.UseCors()）。
3. 数据验证：可以在模型类中添加[Required]等验证特性，后端控制器会自动验证数据合法性，前端也可以在发送前先校验数组格式，避免无效请求。
4. 替代方案：表单提交（如果需要）：如果不想用AJAX，也可以把数组序列化成隐藏域的值，用表单提交，但AJAX的优势是无需刷新页面，更适合JS计算器的动态交互场景。

对比你之前用asp-for的表单方式，AJAX完全满足你用美观JS计算器的需求，同时能异步发送数据，不打断用户操作。

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