jquery - ASP.Net MVC：如何通过 jquery ajax 将数据从客户端传递到 asp.net mvc 操作

Question

我通过 jquery 调用我的 mvc 操作并传递两个数组。我看到我的操作被调用，但没有正确的数据传递给操作。shipkey 和 BOLdfInputs 在操作级别上为空。请告诉我我在哪里犯了错误？

这是我的代码

[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",
    });
});

编辑

更改代码但仍然无法正常工作。

我按照您所说的对代码进行了一些更改，例如 action 应该是post type 和contentType: 'application/json'。但仍然无法正常工作。在做出动作 POST 类型之后，它现在没有被调用。

先生，请看一下并告诉我我需要在代码中更改什么，因此我的服务器端代码应该被调用并且数据应该被正确地传递给行动。

$('#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'

            });
        });

我的行动

[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; }
}

标签： jqueryasp.net-mvc

Answer 1

首先，您应该更改方法的名称，因为您的 url 不正确 - DownloadPdf = DownloadBOLPdf

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

}

在第二次尝试这个

$('#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",
    });
});