Zugriff auf Daten im Modell von JavaScript in Sicht

Question

Mein Wissen über ASP.NET ist sehr begrenzt und neu, also korrigieren Sie bitte alles, was ich nicht verstanden habe.

Ich erstelle derzeit eine Sammlung von Grafiken mit Google Charts, aber jedes Mal, wenn ich die Datenbank nach dem gleichen Datensatz abfrage. Ich möchte dies irgendwo speichern oder nur einmal abrufen, um die Leistung zu verbessern.

Ich schaute in Caching, aber jedes Mal, wenn mein Skript auf das nächste Diagramm verschoben wurde, waren die Daten nicht mehr im Cache. Meine andere Idee war also, die Daten einmal zu erhalten, die JSON-Zeichenfolgen für alle Diagramme zu generieren und sie im Modell zu speichern. Dann könnte ich die Daten bekommen, indem ich 'Model.chart1 - Model.chart2' etc.

Ich kann jedoch scheinen nicht auf diese Daten aus dem Javascript aus meiner Sicht zugreifen. Ich bin in der Lage, aus dem HTML zu kommen, indem ich die '@ Model.chart1' in einen Div-Container platziere.

Das gewünschte Verhalten wäre der Zugriff auf diese Daten innerhalb einer JQuery-Funktion, wie unten gezeigt. Aber anstatt die Methode von der Steuerung des Aufrufs, nur direkt mit dem Modellfeld zugreifen wie ‚var chart1 = @ Model.chartOne‘

<script type="text/javascript"> 

    google.charts.load('current', { 'packages': ['corechart'] }); 
    google.charts.setOnLoadCallback(drawChartOne); 
    google.charts.setOnLoadCallback(drawChartTwo); 

    function drawChartOne() { 

     var jsonData = $.ajax({ 
      url: "/Controller/GetChartOne", 
      dataType: "json", 
      async: false 
     }).responseText; 

     var options = { 

      title: 'Chart One', 

      hAxis: { 
       title: 'Date' 
      }, 

      vAxis: { 
       title: 'Hours' 
      }, 

      explorer: { 
       keepInBounds: true 
      }, 

      height: 500, 
      width: 1000 

     }; 

     var data = new google.visualization.DataTable(jsonData); 

     var chart = new google.visualization.LineChart(document.getElementById('ChartOne')); 
     chart.draw(data, options); 

    } 

    function drawChartTwo() { 

     var jsonData = $.ajax({ 
      url: "/Controller/GetChartTwo", 
      dataType: "json", 
      async: false 
     }).responseText; 

     var options = { 

      title: 'Chart Two', 

      hAxis: { 
       title: 'Date' 
      }, 

      vAxis: { 
       title: 'Hours' 
      }, 

      explorer: { 
       keepInBounds: true 
      }, 

      height: 500, 
      width: 1000 

     }; 

     var data = new google.visualization.DataTable(jsonData); 

     var chart = new google.visualization.LineChart(document.getElementById('ChartTwo')); 
     chart.draw(data, options); 

    } 
    </script> 

Answer 1

Ich löste dies mit ein wenig Lesen und Bildung über die richtige Verwendung von MVC.

Ich habe am Ende eine Basismodellklasse namens "Graph" erstellt, und dann zwei weitere Modelle für GraphOne und GraphTwo, die beide von Graph erben.

Ich erstellte dann ein ViewModel, das eine Liste des Typs Graph speicherte. Dies bedeutete, dass ich alle meine verschiedenen Graphen in einer Liste speichern konnte, auf die ich innerhalb des JavaScript zugreifen konnte.

Von der Steuerung, auf Anfrage, konnte ich dann die Daten einmal laden und dann die Daten an jede GraphOne und GraphTwo übergeben, um ihre jeweilige Verarbeitung zu tun. Wichtig, nur einmal die Daten zu laden. Ich gab dann das ViewModel als ActionResult zurück und konnte dann auf die benötigten Eigenschaften zugreifen, indem ich stark typisierte Datentypen innerhalb der .cshtml-Klasse verwendete.

Wahrscheinlich eine sehr schlechte Erklärung, aber hoffentlich wird es jemandem helfen. Ich hatte ein wenig Schwierigkeiten, ein anständiges Tutorial zu ASP MVC zu finden. Hier ist eine sehr gute Serie, der ich gefolgt bin und würde empfehlen: http://www.codeproject.com/Articles/866143/Learn-MVC-step-by-step-in-days-Day