Диаграмма Google для asp.net основные страницы Razor

#c# #asp.net-core #google-visualization

#c# #asp.net-ядро #google-визуализация

Вопрос:

Я следую этому руководству https://dotnetthoughts.net/integrating-google-charts-in-aspnet-core / и я застрял, пытаясь загрузить данные диаграммы со страницы Index.cshtml.cs через ActionResult ‘OnGetChartData’. Я получаю исключение «Не удалось загрузить ресурс: сервер ответил со статусом 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>

1. Если у вас нет каких-то нестандартных правил маршрутизации в startup.cs, тогда URL Index?handler=OnGetChartData -адрес не имеет особого смысла. Вы должны добавить атрибут маршрута к методу OnGetChartData, например [HttpGet] [Route("chartdata")] , а затем изменить URL-адрес на index/chartdata ваш контроллер, который должен быть назван IndexController, чтобы это работало

2. @MikNiller: я использую страницы Razor, а не MVC и, следовательно, не использую какой-либо контроллер. Должен ли я это делать, даже с Razor Pages?

3. Извините, я как-то пропустил это, я провел небольшой тест в своей собственной системе и обновил ответ

Ответ №1:

Переписал ответ, с первой попытки я пропустил тот факт, что это были страницы razor…

URL-адрес должен быть

 url: "/Index?handler=ChartData"

и не

 url: "/Index?handler=OnGetChartData"

Часть OnGet имени метода просто указывает, что этот метод является HTTP Get .

Вы даже можете упростить его еще больше, удалив /Index и просто используя

 url: "?handler=ChartData"

Я ожидаю, что ваш класс PageModel будет выглядеть примерно так

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

Вы можете просто вставить URL-адрес непосредственно в браузер, чтобы убедиться, что он возвращает что-то разумное