获取ajax

时间:2015-05-05 10:11:21

标签: jquery ajax json asp.net-mvc asp.net-mvc-4

我正在尝试用我的ajax和json解决问题。我正在研究ASP.NET MVC 4。 我使用框架调用了一个视图,如下所示:

<iframe src="@Url.Action("AreaChartDevices", "Graphs")" style="width: 100% ;height:400px;border:none;"></iframe>

我在我的Graphs Controller中有这个(注意:我在这里创建了示例数据):

    public ActionResult AreaChartDevices()
        {
            return View();
//            return Json(chartData(),JsonRequestBehavior.AllowGet);
        }


        public JsonResult chartData()
        {
            List<object> chartData = new List<object>();

            chartData.Add(new object[]
            {
                "Month", "Bolivia", "Ecuador", "Madagascar"
            });
            DataTable dtData = new DataTable();
            dtData.Columns.Add("Id", typeof(int));
            dtData.Columns.Add("Month", typeof(string));
            dtData.Columns.Add("Bolivia", typeof(int));
            dtData.Columns.Add("Ecuador", typeof(int));
            dtData.Columns.Add("Madagascar", typeof(int));
            dtData.Columns.Add("Average", typeof(decimal));

            DateTime firstDate = new DateTime(2014, 05, 1);
            DateTime secondDate = new DateTime(2014, 06, 1);
            DateTime thirdDate = new DateTime(2014, 07, 1);
            DateTime fourthDate = new DateTime(2014, 08, 1);
            DateTime fifthDate = new DateTime(2014, 09, 1);

            // Here we add five DataRows.
            dtData.Rows.Add(1, firstDate.ToString("yyyy/MM"), 110, 850, 500, 600.00);
            dtData.Rows.Add(2, secondDate.ToString("yyyy/MM"), 400, 600, 600, 700.00);
            dtData.Rows.Add(3, thirdDate.ToString("yyyy/MM"), 300, 650, 800, 600.00);
            dtData.Rows.Add(4, fourthDate.ToString("yyyy/MM"), 600, 400, 700, 650.00);
            dtData.Rows.Add(5, fifthDate.ToString("yyyy/MM"), 700, 500, 400, 850.00);

            foreach (DataRow row in dtData.Rows)
            {
                chartData.Add(new object[]
                    {
                        row["Month"],row["Bolivia"],row["Ecuador"],row["Madagascar"]
                    });

            }

            return Json(chartData);
        }

并且Frame视图上的代码是(忽略不匹配的标签):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        var options = {
            title: 'Monthly Coffee Production by Country',
        };
        $.ajax({
            traditional:true,
            type: "POST",
            url: "/Graphs/chartData",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                alert("Saghir");
                alert(r.d);
                var data = google.visualization.arrayToDataTable(r.d);
                alert(data);
                alert("Saghir1");
                var options = {

                    vAxis: {
                        title: 'Cups'
                    },
                    hAxis: {
                        title: 'Month'
                    },
                    //seriesType: 'bars', 
                    //series: {
                    //    3: 
                    //        {
                    //            type: 'area'}
                    //} 
                };
                var chart = new google.visualization.AreaChart($("#chart")[0]);
                chart.draw(data, options);
            },
            failure: function (r) {

                alert(r.d);
            },
            error: function (r) {
                alert("SAK");
                alert(r.d);
            }
        });
    }
    </script>
    </head>
        <body>
                <div id="chart" style="width: 900px; height: 500px;">
            </div>

成功功能中的第一个警报是打印名称,但第二个警报显示未定义。控制台上的错误是&#34;错误:不是数组&#34; 我尝试使用json.parse(虽然我定义了dataType: json),我也尝试使用Traditional:true。我是ASP.NET MVC的新手。我确信我错过了charData方法,但无法弄明白。

请指出正确的方向。

此致

0 个答案:

没有答案