Question

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

我希望在HTML按钮单击事件上加载Chart.js。单击按钮后，将调用控制器，并根据搜索条件过滤数据。我希望将此过滤后的内容显示在chart.js上。

在单击按钮后完成控制器过程之后，如何调用javascript函数以在单击按钮时加载图表。

流量应为 1.输入过滤条件 2.点击按钮 3.控制器基于过滤器从数据库中获取数据 4.然后调用视图中的javascript函数以加载chart.js

让我知道该怎么做。

Answer 1

要显示从JavaScript中的Controller返回的数据，您有两个选择：

第一名：
使用View内部的razor语法来引用控制器返回的模型。这意味着您的JavaScript也将写在您的View中。

@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格式返回图表数据。

MVC应用程序中的Chart.js

1 个答案: