Get Data Using Ajax Jquery and send Parameters to Controller

Question

I have a method that get data from database and show it on chart. Its working fine. Now, i need to put some filters on it, and I'm facing dificulties to pass my parameters to the controller.

$("#quadro").click(function () {

    Highcharts.setOptions({
        lang: {
            decimalPoint: ',',
            thousandsSep: '.'
        }
    });

    var data1 = $('#data1').val();
    var data2 = $('#data2').val();
    var empresa = $('#empresa option:selected').text();   

    $.ajax({
        url: 'Painel/QuadroReceitas',
        dataType: "json",
        type: "GET",
        contentType: 'application/json; charset=utf-8',
        data: { 'data1': data1, 'data2': data2, 'empresa': empresa },
        async: false,
        processData: false,
        cache: false,
        delay: 15,
        success: function (data) {

            var Categories = new Array();
            var FaturadoArray = new Array();
            var RecebidoArray = new Array();
            var AtrasadoArray = new Array();

            for (var i in data) {
                Categories.push(data[i].Mes);
                FaturadoArray.push(data[i].Receitas);
                RecebidoArray.push(data[i].Recebido);
                AtrasadoArray.push(data[i].Inad_Atual);
            }

            var MesArray = JSON.parse(JSON.stringify(Categories));
            quadroReceitas(MesArray, FaturadoArray, RecebidoArray, AtrasadoArray);
        },

        error: function (xhr) {
            alert('error');
        }
    });
});


function quadroReceitas(MesArray, FaturadoArray, RecebidoArray, AtrasadoArray) {

    var GlobalRotation = -90;
    var GlobalAlign = 'right';
    var X;
    var Y;

    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'column',
            realignLabels: true,
            animation: false
        },

        title: {
            text: 'Quadro de Receitas'
        },

        legend: {
            align: 'left',
            verticalAlign: 'top',
            floating: true,
            x: 0,
            y: 0
        },

        xAxis: {
            categories: MesArray,
            crosshair: true,
        },

        yAxis: {
            labels: { enabled: false },
            title: { enabled: false },
        },

        credits: {
            enabled: false
        },

        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',

            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:,.1f}</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },

        plotOptions: {
            column: {
                animation: true,
                pointPadding: 0.05, // Defaults to 0.1
                groupPadding: 0.05, // Defaults to 0.2

                dataLabels: {
                    enabled: true,
                    rotation: GlobalRotation,
                    color: '#FFFFFF',
                    align: GlobalAlign,
                    verticalAlign: "top",
                    y: 10,
                    inside: false,
                    crop: false,

                    style: {
                        fontSize: '12px',
                        fontFamily: 'Verdana, sans-serif'
                    },

                    formatter: function () {
                        return Highcharts.numberFormat(this.y, 2);
                    }
                }
            },
        },

        series: [
            { name: 'Faturado', color: '#004a91', data: FaturadoArray },
            { name: 'Recebido', color: '#009147', data: RecebidoArray },
            { name: 'Atrasado', color: '#FF0000', data: AtrasadoArray }
        ]
    });
}

On Controller i have the code as bellow:

  [HttpGet]
        public JsonResult QuadroReceitas(string data1, string data2, string empresa)
        {
            if(empresa == "empresa" || empresa == null)
            {
                empresa = "%";
            }            

            //Chave oChave = new Chave();
            DateTime agora = DateTime.Now;
            var start = new DateTime(agora.Year, agora.Month, 1).AddMonths(-11);
            var end = new DateTime(agora.Year, agora.Month, 1).AddMonths(1).AddDays(-1);

            if (data1 == null)
                data1 = start.ToShortDateString();

            if (data2 == null)
                data2 = end.ToShortDateString();

            ContasReceberData recData = new ContasReceberData();
            List<ContasReceber> receitas = new List<ContasReceber>();

            receitas = recData.GetQuadroReceitas(data1, data2, empresa)
                .Select(o => new ContasReceber
                {
                    Mes = o.Mes,
                    Receitas = Math.Round(o.Receitas,2),
                    Recebido = Math.Round(o.Recebido, 2),
                    Inad_Atual = Math.Round(o.Inad_Atual, 2)
                }).ToList();

            return Json(receitas, JsonRequestBehavior.AllowGet);
        }  

As I told, it is working fine, but without the parameters:

data1, data2, empresa

I tried to change on AJAX to POST and Controller to HttpPost as i read in another topic but didnt work.

Answer 1

Because in your ajax method you set processData=false. set it to true or delete the line of processData and it's work!

var empresa = $('#empresa option:selected').text();   

$.ajax({
    url: 'Painel/QuadroReceitas',
    dataType: "json",
    type: "GET",
    contentType: 'application/json; charset=utf-8',
    data: { 'data1': data1, 'data2': data2, 'empresa': empresa },
    async: false,
    // processData: false,
    cache: false,
    delay: 15,
    success: function (data) {

        var Categories = new Array();
        var FaturadoArray = new Array();
        var RecebidoArray = new Array();
        var AtrasadoArray = new Array();

        for (var i in data) {
            Categories.push(data[i].Mes);
            FaturadoArray.push(data[i].Receitas);
            RecebidoArray.push(data[i].Recebido);
            AtrasadoArray.push(data[i].Inad_Atual);
        }

        var MesArray = JSON.parse(JSON.stringify(Categories));
        quadroReceitas(MesArray, FaturadoArray, RecebidoArray, AtrasadoArray);
    },

    error: function (xhr) {
        alert('error');
    }
});

});