如何将JS文件中函数的取值传递到ASP.NET MVC视图？

你可以通过两种方式实现这个需求，既保证视图和JS的分离，又能顺利传递点击值并发起Ajax请求：

方法1：直接在onDb函数中发起Ajax请求 #

这是最直接的方式，既然已经在onDb里拿到了点击的分类值，直接在这里编写Ajax请求逻辑即可：

修改你的JS文件中的onDb函数：

function onDb(e) {
  var _clicked = e.category;
  
  // 发起Ajax请求，这里替换成你的实际接口地址和需求
  $.ajax({
    url: "/your-target-api", // 你的后端接口地址
    method: "POST", // 根据需求选择GET/POST
    data: { selectedCategory: _clicked }, // 传递点击的分类值
    success: function(response) {
      // 请求成功后，直接操作视图更新内容
      // 比如把结果渲染到页面的某个元素里
      $("#ajaxResult").html(`获取到的数据：${JSON.stringify(response)}`);
    },
    error: function(xhr, status, error) {
      // 处理请求失败的情况
      console.error("请求出错：", error);
      $("#ajaxResult").text("数据加载失败，请重试");
    }
  });
}

这种方式简单快速，适合逻辑不复杂的场景，但如果希望严格分离图表逻辑和业务请求逻辑，可以用下面的方法。

方法2：通过回调函数实现解耦（更符合分离原则） #

这种方式让你的图表JS只负责创建图表，把点击后的业务逻辑（Ajax请求）留在视图层，降低代码耦合度：

第一步：修改JS文件中的pieChartForInterventions函数 #

添加一个clickCallback参数，用于接收视图层传入的处理函数：

function pieChartForInterventions(chartID, pieChartData, clickCallback) {
  chartID.kendoChart({
    dataSource: { data: pieChartData },
    series: [{
      type: "pie",
      field: "list",
      categoryField: "mm",
      padding: 0,
      labels: { visible: true }
    }],
    seriesClick: function(e) {
      var _clicked = e.category;
      // 如果传入了回调函数，就把点击值传递过去
      if (typeof clickCallback === "function") {
        clickCallback(_clicked);
      }
    },
    tooltip: { visible: true, template: "${ category }" },
    legend: { position: "bottom" }
  });
}

// 可以移除原来的onDb函数，因为点击逻辑已经内联到seriesClick中了

第二步：在视图层调用时传入Ajax处理逻辑 #

pieChartForInterventions($("#pieChart"), result, function(clickedCategory) {
  // 这里是视图层的Ajax请求逻辑，完全和图表JS分离
  $.ajax({
    url: "/your-target-api",
    method: "GET",
    data: { category: clickedCategory },
    success: function(response) {
      // 根据返回结果更新视图
      $("#chartDetail").html(`<h3>${clickedCategory}的详情</h3><p>${response.detail}</p>`);
    },
    error: function() {
      $("#chartDetail").text("无法获取详情，请稍后再试");
    }
  });
});

这种方式的优势在于，图表JS只专注于图表的渲染和事件触发，业务逻辑（比如请求哪个接口、怎么更新视图）都留在视图层，更符合关注点分离的设计思想，也方便后续维护和修改。

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