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

Question

我是编程的初学者，我有 2 个项目，它通过 Rest API 像客户端服务器一样工作。 我想构建一个柱形图，所有数据列表和 ID（参与者）和投票（总票数）都是从与数据库连接的服务器获取的。 我的问题我有我的数据，我是通过方法 controller 从服务器获取的，但我无法传递给 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>

Answer 1

您需要在 Razor 视图中将数据呈现为动态构造的 JavaScript object。

IE

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

完成此操作后，页面中的其他 JavaScript 应该能够访问这个新的 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

您正在向标有[HttpPost]的GetStatus controller 操作发出获取请求（通过 ajax）。 尝试用[HttpGet]属性替换它。

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

看法：

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

结果：