如何将数据从 MVC 控制器传递到 javascript？

Question

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

你的意思是你想用ajax从控制器获取json数据吗？如果是这样，你需要在ajax中使用dataType: "json"，这样你就可以得到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>
}

结果：

Answer 2

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

即

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

完成此操作后，页面中的其他 JavaScript 应该能够访问这个新对象。

对于更复杂的对象，您可以在控制器中将它们序列化为 JSON，将 JSON 存储在视图模型中的字符串变量中，然后在视图中反序列化 JSON...

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

Answer 3

您正在向标有[HttpPost] 的GetStatus 控制器操作发出获取请求（通过ajax）。尝试将其替换为 [HttpGet] 属性。