Google asp.net 个核心 Razor 页面的图表

Question

我正在学习本教程 https://dotnetthoughts.net/integrating-google-charts-in-aspnet-core/，但一直试图通过 'OnGetChartData' ActionResult 从 Index.cshtml.cs 页面加载图表数据。我收到 'Failed to load resource: the server responded with a status of 404 ()' 异常并且控制台指向 Index?handler=OnGetChartData。问题似乎出在 url 规范中，但我还没有找到正确的字符串。

如有任何建议，我们将不胜感激！

    public ActionResult OnGetChartData()
    {
        var pizza = new[]
{
                    new {Name = "Mushrooms", Count = 4},
                    new {Name = "Onions", Count = 1},
                    new {Name = "Olives", Count = 1},
                    new {Name = "Zucchini", Count = 1},
                    new {Name = "Pepperoni", Count = 2}
                };

        var json = pizza.ToGoogleDataTable()
                .NewColumn(new Column(ColumnType.String, "Topping"), x => x.Name)
                .NewColumn(new Column(ColumnType.Number, "Slices"), x => x.Count)
                .Build()
                .GetJson();

        return Content(json);
    }

这是脚本部分：drawChart1 按预期工作。

@section 脚本 {

    // Load the Visualization API and the corechart package
    google.charts.load('current', { 'packages': ['corechart'] });

    // Set a callback to run for each chart when the Google Visualization API is loaded.
    google.charts.setOnLoadCallback(drawChart1);
    google.charts.setOnLoadCallback(drawChart2);

    // Callback that creates and populates a data table,
    // instantiates the pie chart, passes in the data and
    // draws it.
    function drawChart1() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
            ['Mushrooms', 3],
            ['Onions', 1],
            ['Olives', 1],
            ['Zucchini', 1],
            ['Pepperoni', 2]
        ]);

        // Set chart options
        var options = {
            'title': 'How Much Pizza I Ate Last Night',
            'width': 400,
            'height': 300
        };

        // Instantiate and draw our chart, passing in some options.
        var chart1 = new google.visualization.PieChart(document.getElementById('chart1'));
        chart1.draw(data, options);
    }
    function drawChart2() {

        // Create the data table.
        var jsonData = $.ajax({
            url: "/Index?handler=OnGetChartData",
            dataType: "json",
            async: true
        }).responseText;
        var data = new google.visualization.DataTable(jsonData);

        // Set chart options
        var options = {
            'title': 'How Much Pizza I Ate Last Night',
            'width': 400,
            'height': 300
        };

        // Instantiate and draw our chart, passing in some options.
        var chart2 = new google.visualization.PieChart(document.getElementById('chart2'));
        chart2.draw(data, options);
    }
</script>

Answer 1

重写了答案，在第一次尝试时我错过了这是剃刀页面的事实...

url应该是

url: "/Index?handler=ChartData"

而不是

url: "/Index?handler=OnGetChartData"

方法名称的 OnGet 部分仅表示此方法是 HTTP Get。

您甚至可以通过删除 /Index 并仅使用

来进一步简化它

url: "?handler=ChartData"

我希望您的 PageModel class 看起来像这样

public class IndexModel : PageModel {
   ...      
   public ActionResult OnGetChartData()  {
   ...
   }
}

您可以直接将 url 粘贴到浏览器中以确保它 returns 合理

Google asp.net 个核心 Razor 页面的图表

Google chart for asp.net core Razor Pages

c#

google-visualization

asp.net-core