如何将JavaScript中的ID值传递回ASP.NET Core控制器

当然可以实现这个需求。核心思路是利用AJAX在下拉框选项改变时，异步将选中的supplier_id发送到控制器，获取对应月份的分数数据后，动态更新图表内容。以下是具体修改步骤：

1. 新增控制器端点用于返回分数数据 #

在你的控制器中添加一个专门处理分数查询的GET方法，返回JSON格式的数据：

[HttpGet]
public IActionResult GetSupplierScores(int supplierId)
{
    var jan = _db.Transaction.FirstOrDefault(t => t.supplier_id == supplierId && t.transaction_monthly.Month == 1);
    var feb = _db.Transaction.FirstOrDefault(t => t.supplier_id == supplierId && t.transaction_monthly.Month == 2);
    var mar = _db.Transaction.FirstOrDefault(t => t.supplier_id == supplierId && t.transaction_monthly.Month == 3);

    // 处理可能的null值，避免空引用异常
    var scores = new
    {
        Onescore = jan?.topic1score + jan?.topic2score ?? 0,
        Twoscore = feb?.topic1score + feb?.topic2score ?? 0,
        Threescore = mar?.topic1score + mar?.topic2score ?? 0
    };

    return Json(scores);
}

2. 修改视图中的JavaScript代码 #

更新页面脚本，实现AJAX请求和图表动态更新：

<script>
var xValues = [1, 2, 3];
// 初始化默认分数值
var yValues = [0, 0, 0];

// 创建图表实例并保存引用，方便后续更新
var myChart = new Chart("myChartD", {
  type: "line",
  data: {
    labels: xValues,
    datasets: [{
      label: "供应商月度总分",
      data: yValues,
      borderColor: "#007bff",
      fill: false,
      tension: 0.1
    }]
  },
  options: {
    responsive: true,
    scales: {
      y: { beginAtZero: true }
    }
  }
});

function myFunction() {
  var supplierId = document.getElementById("Select").value;
  
  // 未选中供应商时不执行请求
  if (!supplierId) return;

  // 发送AJAX请求到控制器
  fetch(`/你的控制器名称/GetSupplierScores?supplierId=${supplierId}`)
    .then(response => response.json())
    .then(data => {
      // 更新图表数据
      myChart.data.datasets[0].data = [data.Onescore, data.Twoscore, data.Threescore];
      // 刷新图表
      myChart.update();
    })
    .catch(error => console.error('获取数据失败:', error));
}
</script>

注意：将/你的控制器名称/替换为实际的控制器路由（例如你的控制器名为HomeController，则写为/Home/GetSupplierScores）。

3. 修正原有POST方法的问题 #

原POST方法中存在两处错误，需要调整：

[HttpPost]
public IActionResult Sheet(EvaluateSheet obj)
{
    var supplierId = obj.Transaction.supplier_id; // 从模型获取选中的供应商ID
    var jan = _db.Transaction.FirstOrDefault(t => t.supplier_id == supplierId && t.transaction_monthly.Month == 1);
    var feb = _db.Transaction.FirstOrDefault(t => t.supplier_id == supplierId && t.transaction_monthly.Month == 2);
    var mar = _db.Transaction.FirstOrDefault(t => t.supplier_id == supplierId && t.transaction_monthly.Month == 3);

    ViewBag.Onescore = jan?.topic1score + jan?.topic2score ?? 0;
    ViewBag.Twoscore = feb?.topic1score + feb?.topic2score ?? 0;
    ViewBag.Threescore = mar?.topic1score + mar?.topic2score ?? 0;
    
    // 修正：使用参数obj而非Model
    _db.Transaction.Add(obj.Transaction); 
    _db.SaveChanges();
    return RedirectToAction("Index");
}

4. 视图额外优化 #

移除下拉框中多余的value="@ViewBag.Sup"属性，asp-for和asp-items已经足够处理选项绑定：

<select asp-for="@Model.Transaction.supplier_id" asp-items="@ViewBag.Sup" class="form-control" id="Select" onchange="myFunction()">
  <option selected disabled>--Supplier--</option>
</select>

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