如何在 asp.net core 中创建图表答案

【问题标题】：how to create charts in asp.net core如何在 asp.net core 中创建图表
【发布时间】：2021-03-09 13:01:30
【问题描述】：

我想做的是从 asp.net 核心中的查询中的执行数据创建图表，但是当我使用控制器时，我在控制器中的 usnig [httppost] 中遇到问题，当我使用它时会出现错误 405，而当我不使用它时json 数据出现在视图中，下面是我的代码。

您好，我想做的是从 asp.net 核心中的查询中的执行数据创建图表，但是当我使用控制器时，我在控制器中的 usnig [httppost] 中遇到问题，它给我错误 405，而当我不这样做时使用它，json数据出现在视图中，下面是我的代码。

 public JsonResult Index()
        {

            string query = "select UserId, count(ServiceOrderNumber)  as OrderNum from [dbo].[ServiceOrders] group by [UserId] order by count ([ServiceOrderNumber]) desc";

            string constr = this._configuration.GetConnectionString("DefaultConnection");

            List<object> chartData = new List<object>();
            chartData.Add(new object[]
                            {
                            "UserId", "OrderNum"

                            });

            SqlConnection con = new SqlConnection(constr);

            SqlCommand cmd = new SqlCommand(query);

            cmd.CommandType = CommandType.Text;
            cmd.Connection = con;
            con.Open();
            SqlDataReader sdr = cmd.ExecuteReader();


            while (sdr.Read())
            {
                chartData.Add(new object[]
                {
                            sdr["UserId"], sdr["OrderNum"]
                });
            }


            con.Close();

            return Json(chartData);
        }

我的看法是

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>



    <script type="text/javascript">
        google.load("visualization", "1", { packages: ["corechart"] });
        google.setOnLoadCallback(drawChart);
        function drawChart() {
            $.ajax({
                type: "POST",
                url: "/Reports/Index/",
                contentType: "application/json; charset=utf-8",
                cache: false,
                traditional: true, 
                dataType: "json",
                success: function (r) {
                    var data = google.visualization.arrayToDataTable(r);

                    //Pie
                    var options = {
                        title: 'USA City Distribution'
                    };
                    var chart = new google.visualization.PieChart($("#chart")[0]);
                    chart.draw(data, options);
                },
                failure: function (r) {
                    alert(r.d);
                },
                error: function (r) {
                    alert(r.d);
                }
            });
        }
    </script>
    <div id="chart" style="width: 500px; height: 400px;">
    </div>
</body>
</html>

【问题讨论】：

你可能对ajax的理解有误，页面加载后才会使用。405是浏览器地址栏不支持post方法造成的。去掉httppost，默认是httpget。所以当你向后端发送一个get请求方法时，它会成功命中该方法，并且由于你写了return Json(chartData);，所以它会返回json字符串。

标签： c# asp.net-mvc asp.net-core asp.net-web-api charts

【解决方案1】：

当我使用控制器时，我在控制器中的 usnig [httppost] 中遇到问题给我错误 405

浏览器地址栏只支持Get请求。如果在浏览器地址栏发送post请求，会报http 405 method not allowed错误。 p>

当我不使用它时，json 数据会出现在查看和下面是我的代码。

如果去掉HttpPost，默认是HttpGet，所以当你在地址栏输入url时，你会得到json字符串。

您也可能误解 ajax，ajax 将在您的视图加载后发送。

您可以查看the document:

AJAX 是开发人员的梦想，因为您可以：
从服务器请求数据 - 在页面加载后

所以，您首先需要做的是向后端发送 get 请求以加载视图，然后它将访问您编写的 ajax。 您可以使用的整个原理检查下面的 gif。

这是一个完整的工作演示：

Index.cshtml 在Views/Reports文件夹中查看：

@{
    Layout = null;
}

<!DOCTYPE html>    
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>   //be sure add jquery....
   
    <script type="text/javascript">
        google.load("visualization", "1", { packages: ["corechart"] });
        google.setOnLoadCallback(drawChart);
        function drawChart() {
            $.ajax({
                type: "POST",
                url: "/Reports/Index/",

                //url:"/Reports/GetJson/"  //if you do not use route attribute in action
                
                contentType: "application/json; charset=utf-8",
                cache: false,
                traditional: true,
                dataType: "json",
                success: function (r) {
                    var data = google.visualization.arrayToDataTable(r);
                    //Pie
                    var options = {
                        title: 'USA City Distribution'
                    };
                    var chart = new google.visualization.PieChart($("#chart")[0]);
                    chart.draw(data, options);
                },
                failure: function (r) {
                    alert(r.d);
                },
                error: function (r) {
                    alert(r.d);
                }
            });
        }
    </script>
    <div id="chart" style="width: 500px; height: 400px;">
    </div>
</body>
</html>

控制器：

public class ReportsController : Controller
{
    //default is httpget
    public ActionResult Index()
    {
        return View();  //it is used to load the view..
    }

   //if your request url is the same with get method,you could add route attribute.
   //Because the controller could not have two same name method with the same parameter although they are used in different http request
   [Route("Reports/Index")]       
   [HttpPost] 
    public JsonResult GetJson()
    {
        List<object> chartData = new List<object>();
        chartData.Add(new object[]
                        {
                        "UserId", "OrderNum"

                        });            
        chartData.Add(new object[]
                        {
                        "1", 3

                        });
        chartData.Add(new object[]
                        {
                        "2", 4

                        });
        chartData.Add(new object[]
                        {
                        "3", 6

                        });

        return Json(chartData);
    }
}

Startup.cs：

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    //...

    app.UseRouting();

    app.UseAuthorization();

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

结果：

【讨论】：

我真的花了一个多星期才解决这个问题，是的，我是 ajax 和 asp.net 核心的新手，所以非常感谢它解决了。
嗨@HamaMod，如果我的回答能帮助您解决问题，您能接受吗？请参考：How to accept as answer.Thanks。