MVC应用中的Chart.js

Question

我有一个带有CHart.js的MVC应用程序。可以在View事件上加载CHart.js。

我希望在html按钮单击事件上加载Chart.js。单击按钮，调用控制器，并根据搜索条件对数据进行筛选。我希望这个过滤过的内容显示在chart.js上。

如何调用javascript函数在单击按钮完成控制器进程后按一下按钮加载图表。

输入过滤条件2.单击按钮3.控制器根据过滤器4从数据库中获取数据。然后调用视图中的javascript函数加载chart.js

让我知道该怎么做。

Answer 1

为了在JavaScript中显示从Controller返回的数据，有两个选项：

第一

在视图中使用剃刀语法来引用控制器返回的模型。这意味着您的JavaScript也将写入您的视图中。

@model 'yourViewModel'

<div>
 //your view html code
</div>

<script>
document.getElementById("button").click(function() {
   var chartData= @Html.Raw(Json.Serialize(Model.'nameOfYourModel'));

   var ctx = document.getElementById("myChart").getContext('2d');

   var myLineChart = new Chart(ctx, {
     type: 'line',
     data: chartData,
     options: options
   });

</script>

第二

通过AJAX从控制器中检索数据，为此，我建议使用jQuery库。因为它使语法更易于编写和理解。

var chartData;
$('.button').click(function() { //your button
  $.ajax({ // Invoke controller action to retrieve data
    url: "path to your controller and its action",
    type: 'GET',
    success: function(data){
       chartData = data;
    }
  });

  var ctx = $("myChart").getContext('2d');

  var myLineChart = new Chart(ctx, {
     type: 'line',
     data: chartData,
     options: options
  });
}

使用这种方法，您可以调用控制器操作，该操作以JSON格式返回图表数据。