title: How to pass data from MVC controller to javascript?
body: <p>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?</p>
  <pre><code>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&lt;ActionResult&gt; Getstatus()
      {
          var votestatus = new VoteStatus();
          votestatus.Region = 1;
          var query = await vote.VoteStatus(votestatus);
          return Json(query.TotalVotes);
      }
  }
  </code></pre>
  <p>My List that contains:</p>
  <pre><code>public class VoteStatistics
      {
          public int IDParty { get; set; }
          public int Votes { get; set; }
      } 
  </code></pre>
  <p>My test view:</p>
  <pre><code>&lt;canvas id=&quot;myChart&quot; style=&quot;padding: 0;margin: auto;display: block; &quot;&gt;&lt;/canvas&gt;
  </code></pre>
  <p>Javascript:</p>
  <pre><code>&lt;script&gt;
      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
                                  }
                              }
                          ]
                      }
                  }
              });
      }
  &lt;/script&gt;
  </code></pre>
  <p>I tried to get my List with jquery</p>
  <pre><code>&lt;script&gt;$(function(){
  
      $.ajax({
          type: &quot;GET&quot;,                  
          url: '@Url.Action(&quot;Getstatus&quot;,&quot;Test&quot;)',
          debugger;
      }).done(function (votings) {
          var labelsArray = [];
          var dataArray = [];
          $.each(votings, function (index, data) {
              labelsArray.push(data.IDParty);
              dataArray.push(data.Votes);
              
          });
          renderChart(labelsArray, dataArray);
      });
  
  });
  &lt;/script&gt;
  </code></pre>