如何将数据从 MVC controller 传递到 javascript？

Question

I'm starter in programming, I have 2 project which is working like client-server via Rest API. I want to construct a column chart and all data a List of and ID(participant) and Votes(Total votes) is getting from server where is connection with database. My problem I have my data I get from the server in method controller, but I can't pass to javascript. I tried with Jquery but no result. How I can resolve this?

public class TestController : Controller
{
    private IVote vote;

    public TestController()
    {
        var bl = new BusinessManager();
        vote = bl.GetVote();
    }

    public IActionResult Index()
    {
        {
            Getstatus();

            return View();
        }
    }
    [HttpGet]
    public async Task<ActionResult> Getstatus()
    {
        var votestatus = new VoteStatus();
        votestatus.Region = 1;
        var query = await vote.VoteStatus(votestatus);
        return Json(query.TotalVotes);
    }
}

My List that contains:

public class VoteStatistics
    {
        public int IDParty { get; set; }
        public int Votes { get; set; }
    } 

My test view:

<canvas id="myChart" style="padding: 0;margin: auto;display: block; "></canvas>

Javascript:

<script>
    function renderChart(labels, voice) {
        debugger;
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx,
            {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [
                        {
                            label: '# of Votes',
                            data: voice,
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)',
                                'rgba(255, 159, 64, 0.2)'
                            ],
                            borderColor: [
                                'rgba(255, 99, 132, 1)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)',
                                'rgba(255, 159, 64, 1)'
                            ],
                            borderWidth: 1
                        }
                    ]
                },
                options: {
                    scales: {
                        yAxes: [
                            {
                                ticks: {
                                    beginAtZero: true
                                }
                            }
                        ]
                    }
                }
            });
    }
</script>

I tried to get my List with jquery

<script>$(function(){

    $.ajax({
        type: "GET",                  
        url: '@Url.Action("Getstatus","Test")',
        debugger;
    }).done(function (votings) {
        var labelsArray = [];
        var dataArray = [];
        $.each(votings, function (index, data) {
            labelsArray.push(data.IDParty);
            dataArray.push(data.Votes);
            
        });
        renderChart(labelsArray, dataArray);
    });

});
</script>

Answer 1

You'll need to render the data out in your Razor view as dynamically constructed JavaScript object.

ie

<script>
    let myJsObj = {
        aStringVar = '@Model.MyStringData'
    };
</script>

Once you've done this, your other JavaScript in the page should be able to access this new object.

For more complex objects you could serialise them to JSON in the controller, store the JSON in a string variable in your view model, then deserialise the JSON in your view...

<script>
    let myJsObj = JSON.parse('@Model.MyStringData');
</script>

Answer 2

You are making a get request (via ajax) to the GetStatus controller action which is labelled with [HttpPost] . Try to replace it with the [HttpGet] attribute.

Answer 3

Do you mean you want to get json data from controller with ajax?If so,you need to use dataType: "json" in ajax so that you can get json data.And here is a demo worked:

Controller:

public ActionResult GetStatus() {
            return View();
        }
        [HttpGet]
        public async Task<ActionResult> GetData()
        {
            VoteStatistics voteStatistics = new VoteStatistics();
            voteStatistics.IDParty = 1;
            voteStatistics.Votes = 2;
            return Json(voteStatistics);
        }

View:

<h1>GetStatus</h1>
<button onclick="getdata()">getdata</button>
@section scripts{ 
    <script type="text/javascript">
    function getdata() {
        $.ajax({
        type: "GET",
            url: '@Url.Action("GetData","Test")',
            dataType: "json",
    }).done(function (data) {
        alert("IDParty:" + data.idParty + ",Votes:" + data.votes);
    });
    }
    </script>
}

result: