Objekt als JSON speichern und in JavaScript darauf zugreifen

Question

Ich habe ein Objekt mit einer Liste und ich möchte ein Diagramm mit Werten aus dieser Liste in meiner Ansicht mit High Chart plotten. Das Problem ist, dass ich JavaScript benutze und nicht über JavaScript auf mein Modell zugreifen kann. Hier ist mein Modellcode.

public class MortgageCalculator 
{ 
    public List<double> interest_month = new List<double>(); 

    public void calculations() 
    { 
    for(int i=1;i<=this.nPer;i++) 
     { 
      this.interest_month.Add(Math.Round(-Financial.IPmt((this.interest/12)/100, Convert.ToDouble(i), this.nPer, this.loan_amount),2)); 
     } 
    } 
} 

Controller-Code: I-Werte vom Benutzer für die Berechnung erhalten, aktualisiert mein Modell und leitet dann auf Ergebnisseite, die angeblich das Diagramm von Interesse Werten zeigen

[HttpGet] 
    public ActionResult M_Calculator() 
    { 
     var mortgageCalculator = new MortgageCalculator(); 
     return View(mortgageCalculator); 
    } 

    [HttpPost] 
    public ActionResult M_Calculator(MortgageCalculator mortgageCalculator) 
    {  
     UpdateModel(mortgageCalculator); 

     //call calculation functions here 
     mortgageCalculator.Amortization(); 


     return View("Results",mortgageCalculator); 

    } 

My View-Code:

@model Calculators.Models.MortgageCalculator 
@{ 
    ViewBag.Title = "Results"; 
} 


@Scripts.Render("~/Scripts/lineChart.js")\ 

<div id="container" style="min-width:310px; height:400px; margin:0 auto"> 
    @section scripts 
    { 
     <script src="~/Scripts/highcharts.js"></script> 
     <script src="~/Scripts/highcharts.src.js"></script> 
     <script src="~/Scripts/lineChart.js"></script> 
    } 

</div> 

Ich möchte auf die Liste aus dem Modell in meinem JavaScript lineChart.js zugreifen und das Diagramm plotten. Ich denke, ich muss JSON verwenden, aber ich weiß nicht wie. Ich würde jede Hilfe schätzen.

Dank

Answer 1

Sie können dies auf zwei Arten tun. Eine besteht darin, jQuery zu verwenden, um das JSON-Objekt abzurufen und Ihre Aktion so zu ändern, dass ein JsonResult (der einfachere Weg IMO) zurückgegeben wird. Die andere Möglichkeit besteht darin, das JavaScript-Objekt zu erstellen, indem Sie die Zeichenfolge mit C# erstellen.

1. jQuery JSON-Objekt

Ändern Sie Ihre Aktion zurückzukehren Json statt einer Ansicht abzurufen.

In Ihrer Sicht können Sie jQuery verwenden, um das JSON-Objekt wie folgt abzurufen.

<script type="text/javascript"> 
    var calcURL = '@Url.Action("M_Calculator", "MyController")'; 
    var interestMonthsArray = []; 
    $.getJSON(calcURL, function (data) { 
     interestMonthsArray = data; 
    }); 
</script> 

2. Verwenden Sie C# JSON-Objekt

in Ihrer Ansicht erstellen:

@model Calculators.Models.MortgageCalculator 
@{ 
    ViewBag.Title = "Results"; 
    bool first = true; 
    string arrStr = "["; 
    foreach (var month in Model.interest_month) 
    { 
    if (first) 
    { 
     first = false; 
    } 
    else 
    { 
     arrStr += ","; 
    } 
    arrStr += month; 
    } 
    arrStr += "]"; 
} 
.... 
<script type="text/javascript"> 
    var interestMonthsArray = @arrStr; 
</script> 

Natürlich können Sie auch diese Zeichenfolge in Ihrer Aktion erstellen oder auch in Ihrem Modellklasse .