Как передать данные с контроллера MVC на javascript? - PullRequest
0 голосов
/ 09 июля 2020

Я начинаю программировать, у меня есть 2 проекта, которые работают как клиент-сервер через Rest API. Я хочу построить столбчатую диаграмму и все данные, которые список и идентификатор (участник) и голоса (общее количество голосов) получают с сервера, на котором установлено соединение с базой данных. Моя проблема У меня есть данные, которые я получаю с сервера в контроллере метода, но я не могу перейти к javascript. Я пробовал с Jquery, но безрезультатно. Как я могу решить эту проблему?

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);
    }
}

Мой список, содержащий:

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

Мой тестовый вид:

<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>

Я пытался получить свой список с помощью 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>

Ответы [ 3 ]

0 голосов
/ 09 июля 2020

Вы делаете запрос на получение (через ajax) к действию контроллера GetStatus, которое помечено [HttpPost]. Попробуйте заменить его атрибутом [HttpGet].

0 голосов
/ 10 июля 2020

Вы имеете в виду, что хотите получить json данные от контроллера с ajax? Если да, вам нужно использовать dataType: "json" в ajax, чтобы вы могли получить json данных. А вот демонстрация сработало:

Контроллер:

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

Просмотр:

<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>
}

результат: введите описание изображения здесь

0 голосов
/ 09 июля 2020

Вам нужно будет отобразить данные в вашем представлении Razor как динамически построенный JavaScript объект.

т.е.

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

Как только вы это сделаете, ваш другой JavaScript на странице должен иметь доступ к этому новому объекту.

Для более сложных объектов вы можете сериализовать их в JSON в контроллере, сохраните JSON в строковой переменной в вашей модели представления, затем десериализуйте JSON в вашем представлении ...

<script>
    let myJsObj = JSON.parse('@Model.MyStringData');
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...