使用Ajax和&amp ;;显示SQL数据SQL中的jQuery使用Chart.Js中的C#WebMethod

时间:2018-06-04 15:00:17

标签: c# jquery asp.net ajax webmethod

我想要显示两列; Chart.js条形图中的描述和ApplicantSourceCount使用C#Webmethod和下面的jQuery / Ajax代码。

我似乎无法将数据拉入图表进行显示,我不断得到并且错误声明未捕获的ReferenceError:描述未定义是否有人能够协助如何构建它?

我检查过多个不同的来源但无法正常工作。

SQL数据示例:

Description   | ApplicantSourceCount
  Reed        |      48
  Indeed      |      38
  TotalJobs   |      43

jQuery / Ajax代码;

jQuery(document).ready(function () {
            console.log( "ready!" );


        jQuery.ajax({
            type: "POST",
            url: "ReportingDashboard.aspx/GetApplicantSourceData",
            data: '{aData:' + Description + ApplicationSourceCount + '}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess,
            error: OnErrorCall_
        });

        function OnSuccess(reponse) {
        var aData = response.d;
        var aLabels = aData[0];
        var datasetAppSource1 = aData[1];
        var datasetAppSource2 = aData[2];

        var data = {
            labels: aLabels,
            datasets: [{
                label: "Description",
                data: datasetAppSource1,
                borderColor: "rgba(0, 123, 255, 0.9)",
                borderWidth: "0",
                backgroundColor: "rgba(0, 123, 255, 0.5)"
            },
            {
                label: "ApplicantSourceCount",
                data: datasetAppSource2,
                borderColor: "rgba(0, 123, 255, 0.9)",
                borderWidth: "0",
                backgroundColor: "rgba(0, 123, 255, 0.5)"
            }]
        };

            //bar chart
            var ctx = document.getElementById("barChart");
                ctx.height = 200;
            var barChart = new Chart(ctx).Line(date, {
                bezierCurve: false
            });
        }
        function OnErrorCall_(repo) {
            alert("Error Loading Data");
        }
    });

C#网络方法

[WebMethod]
    public List<ApplicantSourceData> GetApplicantSourceData(List<string> aData)
    {
        //SqlDataReader reader;
        List<ApplicantSourceData> GetApplicantSourceData = new List<ApplicantSourceData>();

        string connectionString = ConfigurationManager.ConnectionStrings["ATL2"].ConnectionString;
        string commandTextApplicantsByMonthCount = Properties.Queries.commandTextApplicantsByMonthCount;

        using (SqlConnection con = new SqlConnection(connectionString))
        {
            using (SqlCommand command = new SqlCommand(commandTextApplicantsByMonthCount))
            {

                command.CommandText = commandTextApplicantsByMonthCount;
                command.CommandType = CommandType.Text;
                command.Connection = con;
                con.Open();
                SqlDataReader reader = command.ExecuteReader();
                if (reader.HasRows)
                {
                    int counter = 0;
                    while (reader.Read())
                    {
                        ApplicantSourceData tsData = new ApplicantSourceData();
                        tsData.Description = reader["Description"].ToString();
                        tsData.ApplicantSource = reader["ApplicantSourceCount"].ToString();
                        GetApplicantSourceData.Add(tsData);
                        counter++;
                    }
                }
            }
            return GetApplicantSourceData;
        }
    }

0 个答案:

没有答案