将对象存储为JSON并在Javascript中访问它

时间:2016-04-18 16:34:41

标签: javascript json asp.net-mvc-5

我有一个包含列表的对象,我想使用High Chart在我的视图中使用该列表中的值绘制图表。问题是我使用的是JavaScript而且我无法从JavaScript访问我的模型。 这是我的型号代码。

 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));
        }
   }
}

控制器代码: 我从用户那里获取值进行计算,更新我的模型,然后重定向到应该显示感兴趣的图表值的结果页面

[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);

    }

我的观看代码:

@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>

我想在JavaScript lineChart.js中访问模型中的列表并绘制图表。我想我需要使用JSON,但我不知道如何。我将不胜感激任何帮助。

由于

1 个答案:

答案 0 :(得分:0)

您可以通过两种方式完成此操作。一种是使用jQuery来检索JSON对象并更改你的Action以返回一个JsonResult(更容易的方式是IMO)。另一种方法是通过使用C#创建字符串来创建JavaScript对象。

<强> 1。使用jQuery检索JSON对象

更改您的操作以返回Json而不是视图。

public ActionResult M_Calculator()
{
    var mortgageCalculator = new MortgageCalculator();
    mortgageCalculator.calculations();
    return Json(mortgageCalculator.interest_month); // return only the array
}

在View中,您可以使用jQuery来检索这样的JSON对象。

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

<强> 2。使用C#创建JSON对象

在您的视图中:

@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>

当然,您也可以在Action中甚至在模型类中创建此字符串。