Przekazywanie danych z metody kontrolera do widoku (skryptu jQuery)

0

Witam,

Postanowiłem w aplikacji opartej o .NET Core 3.1 wykorzystać bibliotekę highcharts do wizualizacji danych. Jednak utknąłem na prostym przekazaniu danych z widoku do kontrolera.

Mam problem z przekazaniem zgrupowanych danych (w postaci JSON) z metody kontrolera do widoku (skryptu jQurey) .

public IActionResult GetDeals()
        {
            var deals = _context.Deals
                .GroupBy(d => d.Stage)
                .Select(g => new { stageName = g.Key, stageTotalAmount = g.Sum(d => d.TotalAmount) }).ToList();

            return new JsonResult(new { data = deals });
        }

Widok:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/funnel.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Chart showing a sales funnel. A funnel chart is often used to visualize
        data from stages of a process. Readers can quickly identify bottlenecks
        in the process by comparing the area size variation of each stage.
    </p>
</figure>

<script>
    $(document).ready(function () {
        $.getJSON("/Home/GetDeals", function (data) {
            var Groups = []
            for (var i = 0; i < data.length; i++) {
                Groups.push(data[i].stageName);
                Groups.push(data[i].stageTotalAmount);
            }
            alert(Groups);
            Highcharts.chart('container', {
                chart: {
                    type: 'funnel'
                },
                title: {
                    text: 'Sales funnel'
                },
                plotOptions: {
                    series: {
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b> ({point.y:,.0f})',
                            softConnector: true
                        },
                        center: ['40%', '50%'],
                        neckWidth: '30%',
                        neckHeight: '25%',
                        width: '80%'
                    }
                },
                legend: {
                    enabled: false
                },
                series: [{
                    name: 'Unique users',
                    data: Groups 
                    //[
                    //    ['Website visits', 15654],
                    //    ['Downloads', 4064],
                    //    ['Requested price list', 1987],
                    //    ['Invoice sent', 976],
                    //    ['Finalized', 846]
                    //]
                }],

                responsive: {
                    rules: [{
                        condition: {
                            maxWidth: 500
                        },
                        chartOptions: {
                            plotOptions: {
                                series: {
                                    dataLabels: {
                                        inside: true
                                    },
                                    center: ['50%', '50%'],
                                    width: '100%'
                                }
                            }
                        }
                    }]
                }
            });
        });
    });
</script>

Skrypt działa(dla danych statycznych) jednak nie wiem czy dane poprawnie się zaciągają i nie wiem jak je przekazać w zakomentowane miejsce. Próbowałem zapisać te dane w zmiennej tablicowej Groups jednak nadal nie działa poprawnie.

series: [{
                    name: 'Unique users',
                    data: Groups 
                    //[
                    //    ['Website visits', 15654],
                    //    ['Downloads', 4064],
                    //    ['Requested price list', 1987],
                    //    ['Invoice sent', 976],
                    //    ['Finalized', 846]
                    //]
                }],

Może źle przekazuję dane lub problem jest z zapytaniem LINQ?

1

Zobacz w np. zakładce Sieć w narzędziach developerskich przeglądarki jakie dane dokładnie zostają przesłane podczas wykonywania getJSON("/Home/GetDeals"

0

@WeiXiao:

usunąłem metodę anonimową z kontrolera:

public IActionResult GetDeals()
        {
            var deals = _context.Deals
                .GroupBy(d => d.Stage)
                .Select(g => new { stageName = g.Key, stageTotalAmount = g.Sum(d => d.TotalAmount) }).ToList();

            return new JsonResult(deals);
        }

Dane przesyłane to:
Array(2)
0: {stageName: 0, stageTotalAmount: 20049499}
1: {stageName: 1, stageTotalAmount: 1929301}

1

@travis.chigurh:

ale czy przypadkiem tutaj nie masz tablicy obiektów, a tam wyżej w przykładzie "z ręki" - tablicy tablic?

0

@WeiXiao
Racja, dzięki!

Zamykam :)

1 użytkowników online, w tym zalogowanych: 0, gości: 1