aspnet中的Google图表

Question

嗨，我想在我的页面中生成一个条形图。数据是从我的数据库中提供的。

public JsonResult GetData()
        {
            DataSet ds = GetViews();
            List<Alliances> listAllianceforCharts = new List<Alliances>();
            foreach(DataRow dr in ds.Tables[0].Rows)
            {
                listAllianceforCharts.Add(new Alliances
                {
                    Al = Convert.ToString(dr["Al"]),
                    Ci = Convert.ToInt32(dr["Ci"]),
                    So = Convert.ToInt32(dr["So"]),
                    Ta = Convert.ToInt32(dr["Ta"]),
                    Ai = Convert.ToInt32(dr["Ai"]),
                    Sh = Convert.ToInt32(dr["Sh"])
                });
            }
            return new JsonResult(listAllianceforCharts);
        }

google.charts.load('current', { 'packages': ['corechart'] });
        google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
            //Create our data table out of JSON data loaded from server.
            var jsonData = $.ajax({
                url: "/Index/GetData",
                dataType: "json",
                type: "POST"
            });
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Al');
            data.addColumn('number', 'Ci');
            data.addColumn('number', 'So');
            data.addColumn('number', 'Ta');
            data.addColumn('number', 'Ai');
            data.addColumn('number', 'Shs');
            for (var i = 0; i < jsonData.length; i++) {
                data.addRow([jsonData[i].Al, jsonData[i].Ci, jsonData[i].So, jsonData[i].Ta, jsonData[i].Ai, jsonData[i].Sh]);
            };
            var options = {
                title: 'Mil Levels'
            };
            //Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        }

创建一个没有条形的图表。我可以看到数据被返回到GetData。然而，并没有像预期的那样生成图表。我想知道我做错了什么？有什么方法可以让我调试cshtml，看看哪里出错了？如何检查页面是否从页面模型中获取数据？

Answer 1

在学习使用F12调试之后，您将发现jsonData变量不接受GetData返回的json数据，因此jsonData变量将无法在循环中添加数据。

您需要理解的是，当ajax的执行完成后，即在输入GetData方法返回json数据后，如果没有错误，程序将立即输入ajax的成功方法，如果您想获取GetData返回的数据，则必须在ajax的成功方法中获得它，而不是当前的jsonData变量。

应该注意的是，如果您使用的是核心3.1JSON版本，则传递的json数据的字段名将变成camel case，也就是说，js中的Al, Ci等字段将成为ai, ci。

要防止这种行为，需要将以下代码添加到ConfigureServices文件中的startup.cs文件中：

 services.AddMvc().AddJsonOptions(opts => opts.JsonSerializerOptions.PropertyNamingPolicy = null); 

以下是完整的代码：

主计长：

public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
    public JsonResult GetData()
    { 
         DataSet ds = GetViews();
        List<Alliances> listAllianceforCharts = new List<Alliances>();
        foreach(DataRow dr in ds.Tables[0].Rows)
        {
            listAllianceforCharts.Add(new Alliances
            {
                Al = Convert.ToString(dr["Al"]),
                Ci = Convert.ToInt32(dr["Ci"]),
                So = Convert.ToInt32(dr["So"]),
                Ta = Convert.ToInt32(dr["Ta"]),
                Ai = Convert.ToInt32(dr["Ai"]),
                Sh = Convert.ToInt32(dr["Sh"])
            });
        }
        return new JsonResult(listAllianceforCharts);
    }
}

索引视图：

@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h1>Index</h1>
<div id="chart_div"></div>
@section Scripts{

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <script> 
        google.charts.load('current', { 'packages': ['corechart'] });
        google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
           $.ajax({
                url: "/Home/GetData", //url should be '/Controller/Action'
                dataType: "json",
                type: "POST",
                success: MyChart 
            }); 
        }
       

        //here jsonData received the json data from GetData action
        function MyChart(jsonData) { 
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Al');
            data.addColumn('number', 'Ci');
            data.addColumn('number', 'So');
            data.addColumn('number', 'Ta');
            data.addColumn('number', 'Ai');
            data.addColumn('number', 'Shs');
            for (var i = 0; i < jsonData.length; i++) {
                data.addRow([jsonData[i].Al, jsonData[i].Ci, jsonData[i].So, jsonData[i].Ta, jsonData[i].Ai, jsonData[i].Sh]);
            };
            var options = {
                title: 'Mil Levels'
            };
            //Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        }
    </script>
}

以下是测试结果：

​

​