ASP.NET Core中基于查询数据生成图表时[HttpPost]请求405错误问题排查

看起来你遇到的问题核心是Action的HTTP方法不匹配，以及视图和数据接口没有分离导致的。咱们一步步来解决：

问题分析 #

1. 当你给Index方法加[HttpPost]时，前端AJAX用POST请求，但原来的Index方法直接返回JsonResult，直接访问该Action的GET请求会被拒绝（405错误），因为Action只接受POST；
2. 不加[HttpPost]时，Index Action会直接返回JSON字符串，而不是渲染视图页面，导致AJAX代码根本没有执行的环境，自然没法生成图表。

解决方案步骤 #

1. 修改控制器代码 #

拆分出两个职责明确的Action：一个负责返回视图（响应GET请求），一个负责提供图表数据（响应POST请求）：

using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;

public class ReportsController : Controller
{
    private readonly IConfiguration _configuration;

    public ReportsController(IConfiguration configuration)
    {
        _configuration = configuration;
    }

    // GET请求：返回图表展示页面
    public IActionResult Index()
    {
        return View();
    }

    // POST请求：返回图表所需的JSON数据
    [HttpPost]
    public JsonResult GetChartData()
    {
        string query = "select UserId, count(ServiceOrderNumber) as OrderNum from [dbo].[ServiceOrders] group by [UserId] order by count ([ServiceOrderNumber]) desc";
        string constr = _configuration.GetConnectionString("DefaultConnection");
        List<object> chartData = new List<object>();
        chartData.Add(new object[] { "UserId", "OrderNum" });

        // 使用using语句自动释放数据库资源，避免泄漏
        using (SqlConnection con = new SqlConnection(constr))
        {
            using (SqlCommand cmd = new SqlCommand(query, con))
            {
                cmd.CommandType = CommandType.Text;
                con.Open();
                using (SqlDataReader sdr = cmd.ExecuteReader())
                {
                    while (sdr.Read())
                    {
                        chartData.Add(new object[] { sdr["UserId"], sdr["OrderNum"] });
                    }
                }
            }
        }

        return Json(chartData);
    }
}

2. 修正视图中的AJAX请求 #

调整AJAX的请求地址，同时补充缺失的jQuery依赖（你的代码用了$但没引入jQuery，这也是潜在问题）：

@{ Layout = null; } 
<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width" /> 
<title>Index</title>
<!-- 引入jQuery，确保AJAX代码能正常执行 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
<script type="text/javascript"> 
google.charts.load("visualization", "1", { packages: ["corechart"] }); 
google.charts.setOnLoadCallback(drawChart); 

function drawChart() { 
    $.ajax({ 
        type: "POST", 
        url: "/Reports/GetChartData", // 指向新的数据接口Action
        contentType: "application/json; charset=utf-8", 
        cache: false, 
        traditional: true, 
        dataType: "json", 
        success: function (r) { 
            var data = google.visualization.arrayToDataTable(r); 
            var options = { title: 'User Order Distribution' }; 
            var chart = new google.visualization.PieChart(document.getElementById("chart")); 
            chart.draw(data, options); 
        }, 
        error: function (xhr, status, error) { 
            alert("请求失败: " + error); // 优化错误提示，方便排查问题
        } 
    }); 
} 
</script> 
</head>
<body> 
<div id="chart" style="width: 500px; height: 400px;"> 
</div> 
</body> 
</html>

3. 确认路由配置有效性 #

确保你的Program.cs（或Startup.cs）中存在默认路由配置：

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

效果验证 #

现在访问/Reports/Index会正常加载视图页面，页面中的AJAX会自动发起POST请求到/Reports/GetChartData获取数据，最终渲染出饼图，不会再出现405错误或JSON直接显示的问题。

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