ASP.Net MVC: How to pass data by jquery ajax from client to asp.net mvc action

Question

I am calling my mvc action by jquery and passing two array. i saw my action is getting called but no right data is passing to action. shipmentkey and BOLPdfInputs is getting null at action level. please tell me where i made the mistake ?

Here is my code

[HttpGet]
public PdfResult DownloadPdf(List<string> shipmentkey, List<BOLPdfInputs> BOLPdfInputs)
{

}

$('#btnSave').on('click', function () {
    alert('hello')
    debugger;
    var shipmentkeys = [];
    var BOLPdfInputs = [];

    var BOLPdfInput = new Object();

    var totalbol = $("[id^=mainDivContainer_]").length;

    for (var i = 0; i <= totalbol - 1; i++) {
        var shipmentkey = $('#hiddenshipmentkey_' + (i + 1)).val();
        shipmentkeys.push(shipmentkey);
    }

    for (var i = 0; i <= totalbol - 1; i++) {
        var BOLPdfInput = {
            AgreedValue1:               ($('#txtAgreedValue1_' + (i + 1)).val() != '' ? $('#txtAgreedValue1_' + (i + 1)).val() : ''),
            AgreedValue2:               ($('#txtAgreedValue2_' + (i + 1)).val() != '' ? $('#txtAgreedValue2_' + (i + 1)).val() : ''),
            CodAmount:                  ($('#txtCodAmount_' + (i + 1)).val() != '' ? $('#txtCodAmount_' + (i + 1)).val() : ''),
            ShipperSignature:           ($('#txtShipperSignature_' + (i + 1)).val() != '' ? $('#txtShipperSignature_' + (i + 1)).val() : ''),

            FreeTermsCollect:           ($('#ChkFreeTermsCollect_' + (i + 1)).val() != '' ? $('#ChkFreeTermsCollect_' + (i + 1)).val() : ''),
            FreeTermsPrePaid:           ($('#ChkFreeTermsPrePaid_' + (i + 1)).val() != '' ? $('#ChkFreeTermsPrePaid_' + (i + 1)).val() : ''),
            FreeTermsCustomerCheque:    ($('#ChkFreeTermsCustomerCheque_' + (i + 1)).val() != '' ? $('#ChkFreeTermsCustomerCheque_' + (i + 1)).val() : ''),

            TrailerByShipper:           ($('#ChkTrailerByShipper_' + (i + 1)).val() != '' ? $('#ChkTrailerByShipper_' + (i + 1)).val() : ''),
            FreightByShipper:           ($('#ChkFreightByShipper_' + (i + 1)).val() != '' ? $('#ChkFreightByShipper_' + (i + 1)).val() : ''),
            TrailerByDriver:            ($('#ChkTrailerByDriver_' + (i + 1)).val() != '' ? $('#ChkTrailerByDriver_' + (i + 1)).val() : ''),
            FreightByDriverPallets:     ($('#ChkFreightByDriverPallets_' + (i + 1)).val() != '' ? $('#ChkFreightByDriverPallets_' + (i + 1)).val() : ''),
            FreightByDriverPieces:      ($('#ChkFreightByDriverPieces_' + (i + 1)).val() != '' ? $('#ChkFreightByDriverPieces_' + (i + 1)).val() : '')

        };
        BOLPdfInputs.push(BOLPdfInput);
    }

    $.ajax({
        type: "GET",
        url: '@Url.Action("DownloadBOLPdf", "Shipment")',
        //data: '{ "shipmentkey":' + JSON.stringify(shipmentkeys) + '}',
        data: JSON.stringify({ shipmentkey: shipmentkeys, BOLPdfInputs: BOLPdfInputs }),
        success: function (data) {
            alert('Hello');
        },
        dataType: "json",
    });
});

EDIT

change the code but still not working.

I made some changes in code as per you said like action should be post type and contentType: 'application/json' . but still not working. after making action POST type now it is not getting called.

Sir please have a look and tell me what i need to change in code as a result my server side code should be called and data should be passed properly to action.

$('#btnSave').on('click', function () {
            alert('hello11')
            debugger;
            var shipmentkeys = [];
            var BOLPdfInputs = [];

            var BOLPdfInput = new Object();

            var totalbol = $("[id^=mainDivContainer_]").length;

            for (var i = 0; i <= totalbol - 1; i++) {
                var shipmentkey = $('#hiddenshipmentkey_' + (i + 1)).val();
                shipmentkeys.push(shipmentkey);
            }

            for (var i = 0; i <= totalbol - 1; i++) {
                var BOLPdfInput = {
                    AgreedValue1:               ($('#txtAgreedValue1_' + (i + 1)).val() != '' ? $('#txtAgreedValue1_' + (i + 1)).val() : ''),
                    AgreedValue2:               ($('#txtAgreedValue2_' + (i + 1)).val() != '' ? $('#txtAgreedValue2_' + (i + 1)).val() : ''),
                    CodAmount:                  ($('#txtCodAmount_' + (i + 1)).val() != '' ? $('#txtCodAmount_' + (i + 1)).val() : 0),
                    ShipperSignature:           ($('#txtShipperSignature_' + (i + 1)).val() != '' ? $('#txtShipperSignature_' + (i + 1)).val() : ''),

                    FreeTermsCollect:           ($('#ChkFreeTermsCollect_' + (i + 1)).is(":checked") ? 1 : 0),
                    FreeTermsPrePaid:           ($('#ChkFreeTermsPrePaid_' + (i + 1)).is(":checked") ? 1 : 0),
                    FreeTermsCustomerCheque:    ($('#ChkFreeTermsCustomerCheque_' + (i + 1)).is(":checked") ? 1 : 0),

                    TrailerByShipper:           ($('#ChkTrailerByShipper_' + (i + 1)).is(":checked") ? 1 : 0),
                    FreightByShipper:           ($('#ChkFreightByShipper_' + (i + 1)).is(":checked") ? 1 : 0),
                    TrailerByDriver:            ($('#ChkTrailerByDriver_' + (i + 1)).is(":checked") ? 1 : 0),
                    FreightByDriverPallets:     ($('#ChkFreightByDriverPallets_' + (i + 1)).is(":checked") ? 1 : 0),
                    FreightByDriverPieces:      ($('#ChkFreightByDriverPieces_' + (i + 1)).is(":checked") ? 1 : 0)

                };

                BOLPdfInputs.push(BOLPdfInput);
            }

            alert(JSON.stringify(BOLPdfInputs));

            //shipmentkey: JSON.stringify(shipmentkeys),

            $.ajax({
                type: "POST",
                url: '@Url.Action("DownloadBOLPdf", "Shipment")',
                data: { shipmentkey: JSON.stringify(shipmentkeys), BOLPdfInputs: JSON.stringify(BOLPdfInputs) },
                success: function (data) {
                    alert('Hello');
                },
            dataType: "json",
            contentType: 'application/json'

            });
        });

My Action

[HttpPost]
public PdfResult DownloadBOLPdf(List<string> shipmentkey, List<BOLPdfInputs> BOLPdfInputs)
{

}

public class BOLPdfInputs
{
    public BOLPdfInputs();

    public string AgreedValue1 { get; set; }
    public string AgreedValue2 { get; set; }
    public decimal? CodAmount { get; set; }
    public int? FreeTermsCollect { get; set; }
    public int? FreeTermsCustomerCheque { get; set; }
    public int? FreeTermsPrePaid { get; set; }
    public int? FreightByDriverPallets { get; set; }
    public int? FreightByDriverPieces { get; set; }
    public int? FreightByShipper { get; set; }
    public string ShipperSignature { get; set; }
    public int? TrailerByDriver { get; set; }
    public int? TrailerByShipper { get; set; }
}

Answer 1

At first you should change name of your method, because your url is incorrect - DownloadPdf = DownloadBOLPdf

[HttpGet]
public PdfResult DownloadBOLPdf(List<string> shipmentkey, List<BOLPdfInputs> BOLPdfInputs)
{

}

At second try this

$('#btnSave').on('click', function () {
    ..................................
     ................................
    $.ajax({
        type: "GET",
        //url: '@Url.Action("DownloadBOLPdf", "Shipment")',
        url: '/Shipment/DownloadBOLPdf',
        //data: '{ "shipmentkey":' + JSON.stringify(shipmentkeys) + '}',
        //data: JSON.stringify({ shipmentkey: arr, BOLPdfInputs: obj }),
        data: { shipmentkey: JSON.stringify(shipmentkeys), BOLPdfInputs: JSON.stringify(BOLPdfInputs) },
        success: function (data) {
            alert('Hello');
        },
        dataType: "json",
    });
});