javascript - Charts.Js 与 Asp.Net Webforms 不起作用

Question

我的默认页面中有一个饼图，它应该通过网络服务从数据库获取数据。我测试了网络服务，它工作正常，但饼图不起作用。

我的网络服务:

    [WebMethod]
    public List<OgrenciSayilariGenel> getOgrenciSayilariGenel()
    {

        List<OgrenciSayilariGenel> t = new List<OgrenciSayilariGenel>();

        string[] arrColor = new string[] { "#231F20", "#FFC200", "#F44937", "#16F27E", "#FC9775", "#5A69A6" };

        using (SqlConnection cn = new SqlConnection(WebConfigurationManager.ConnectionStrings["csLeo"].ConnectionString))
        {
            string myQuery = "SELECT * FROM OgrenciSayilariGenel ORDER BY Tarih DESC";
            SqlCommand cmd = new SqlCommand();
            cmd.CommandText = myQuery;
            cmd.CommandType = CommandType.Text;
            cmd.Connection = cn;
            cn.Open();
            SqlDataReader dr = cmd.ExecuteReader();
            if (dr.HasRows)
            {
                int counter = 0;
                while (dr.Read())
                {
                    // Aktif öğrenci sayılarını alıp gün gün gösteriyoruz.
                    OgrenciSayilariGenel tsData = new OgrenciSayilariGenel();
                    tsData.value = dr.GetValue(dr.GetOrdinal("Hepsi")) != (DBNull.Value) ? dr.GetValue(dr.GetOrdinal("Hepsi")).ToString() : "";
                    tsData.label = dr.GetValue(dr.GetOrdinal("Tarih")) != (DBNull.Value) ? dr.GetValue(dr.GetOrdinal("Tarih")).ToString() : "";
                    tsData.color = arrColor[counter];
                    t.Add(tsData);
                    counter++;
                }
            }
        }
        return t;
    }
}

这是应该显示饼图的脚本:

    $(document).ready(function () {

        var gData = [];

            var jsonData = JSON.stringify({
                gData: gData
            });

            $.ajax({
                type: "POST",
                url: "OgrenciSayilari.asmx/getOgrenciSayilari",
                data: jsonData,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess_,
                error: OnErrorCall_
            });

            //window.alert("I am here");                

            function OnSuccess_(response) {
                var aData = response.d;
                var arr = [];
                $.each(aData, function (inx, val) {
                    var obj = {};
                    obj.color = val.color;
                    obj.value = val.value;
                    obj.label = val.label;
                    arr.push(obj);
                });
                var ctx = $("#chartTotalStudents").get(0).getContext("2d");
                var myPieChart = new Chart(ctx).Pie(arr);

            }

            function OnErrorCall_(response) { }
    });

你在这里发现什么我看不到的问题吗？提前致谢。

Answer 1

只要您遇到错误回调，您的 ajax 请求就会失败，很可能您的后端会失败。

确保你的ajax请求确实有效，我建议使用postman，但你也可以使用cUrl:

curl 'http://yourhosthere/OgrenciSayilari.asmx/getOgrenciSayilari' 
  -H 'Pragma: no-cache' 
  -H 'Cache-Control: no-cache' 
  -H 'Accept-Encoding: gzip, deflate' 
  -H 'Content-Type: application/json; charset=UTF-8' 
  -H 'Accept: application/json, text/javascript, */*; q=0.01' 
  -H 'X-Requested-With: XMLHttpRequest' 
  --data-binary '{"gData":[]}'