Chart.js в приложении MVC

Question

У меня есть приложение MVC с CHart.js.Я могу загрузить CHart.js при событии View load.

Я хочу, чтобы Chart.js загружался при событии нажатия кнопки html.При нажатии кнопки контроллер вызывается и на основе данных условия поиска фильтруется.Я хочу, чтобы этот отфильтрованный контент отображался в chart.js.

Как вызвать функцию javascript для загрузки диаграммы при нажатии кнопки после завершения процесса контроллера при нажатии кнопки.

Поток должен быть 1. Введите условия фильтра 2. Нажмите кнопку 3. Контроллер извлекает данные из базы данных на основе фильтров 4. Затем вызывается функция javascript в представлении для загрузки диаграммы. Js

Позвольте мнезнать, как это сделать.

Answer 1

Для отображения данных, возвращаемых вашим контроллером в JavaScript, у вас есть два варианта:

Первый :
с использованием синтаксиса бритвы в вашем представлении для ссылки на модель, возвращаемуюконтроллер.Это означает, что ваш 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>

Second :
Извлечение данных из вашего контроллера через 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.