Question

我是一名经验不足的程序员并且一直试图从json对象获取数据并使用MVC和谷歌图表将其显示在图表中，但我收到此错误“第14行第5行中的未处理异常：localhost：53128 / Coin / Index 0x800a1391 - JavaScript运行时错误：'$'未定义“。希望有人可以试着帮助我一点点。

名为“MOCK_JSON.json”的JSON对象：

    [{"id":1,"CoinValue":0.01,"Count":82,"CoinWeight":76},
    {"id":2,"CoinValue":0.02,"Count":86,"CoinWeight":18},
    {"id":3,"CoinValue":0.05,"Count":29,"CoinWeight":42},
    {"id":4,"CoinValue":0.1,"Count":35,"CoinWeight":90},
    {"id":5,"CoinValue":0.2,"Count":23,"CoinWeight":3},
    {"id":30,"CoinValue":0.5,"Count":41,"CoinWeight":36}]

硬币等级：

    public class Coin
{
    public int ID
    {
        get;
        set;
    }

    public string CoinValue
    {
        get;
        set;
    }

    public int Count
    {
        get;
        set;
    }

    public int CoinWeight
    {
        get;
        set;
    }

}

投币模型：

    public class CoinModel
{
    public IList<Coin> coins;
}

投币控制器：

public class CoinController : Controller
    {
    // GET: Coin
    public ActionResult Index()
    {

        return View();
    }
    [HttpPost]
    public ActionResult Data()
    {
        var fileContents = System.IO.File.ReadAllText(Server.MapPath(@"~/App_Data\MOCK_DATA.json"));
        var coins = JsonConvert.DeserializeObject<List<CoinModel>>(fileContents);

        //var coins = JsonConvert.DeserializeObject<CoinModel>(fileContents);

        return View(coins);
    }
}

查看：

<meta name="viewport" content="width=device-width" />
<title>Coin Statistics Chart</title>
<script src="Scripts/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
$(document).ready(function () {
    $.ajax({
        type: 'POST',
        dataType: "Json",
        contentType: "application/json",
        url: '@Url.Action("Data", "Coin")',//GETS TO THIS LINE AND BREAKS
        success: function (result) {
            google.charts.load('current', {
                'packages': ['corechart']
            });
            google.charts.setOnLoadCallback(function () {
                drawChart(result);
            });
        }
    });

    function drawChart(result) {
        var data = new google.visualization.DataTable();
        data.addColumn("string", "CoinValue"); //might have to be changed
        data.addColumn("number", "Count");
        var dataArray = [];
        $.each(result, function (i, obj) {
            dataArray.push([obj.CoinValue, obj.Vounter]);
        });
        data.addRows(dataArray);

        var piechart_options = {
            title: 'Coin Tracker Piechart',
            width: 400,
            height: 300
        };

        var piechart = new google.visualization.PieChart(document.getElementById('piechart_div'));
        piechart.draw(data, piechart_options);

        var barchart_options = {
            title: 'Coin Tracker barchart',
            width: 400,
            height: 300,
            legend: 'none'
        };

        var barchart = new google.visualization.BarChart(document.getElementById('barchart_div'));
        barchart.draw(data, barchart_options);
    }
});
</script>

HTML in view：

<body>
<table class="columns">
    <tr>
        <td><div id="piechart_div" style="border:1px solid #ccc"></div></td>
        <td><div id="barchart_div" style="border:1px solid #ccc"></div></td>

    </tr>
</table>

在MVC控制器和视图中使用JSON数据的问题

0 个答案: