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

【问题标题】：ASP.Net MVC: How to pass data by jquery ajax from client to asp.net mvc actionASP.Net MVC：如何通过 jquery ajax 将数据从客户端传递到 asp.net mvc 操作
【发布时间】：2018-09-26 15:39:57
【问题描述】：

我通过 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",
    });
});

编辑

改了代码还是不行。

我按照您所说的对代码进行了一些更改，例如操作应该是 post 类型和 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; }
}

【问题讨论】：

1.您不能将对象的字符串化数组传递给这样的 GET 方法 - 您需要进行 POST 并设置 contentType: 'application/json' 选项（即使您确实以正确的格式发送它，您也可能会抛出异常，因为查询字符串限制 2. 您将得到 404，因为您的方法名称是 DownloadPdf，而不是 DownloadBOLPdf
@StephenMuecke 请查看我的编辑部分。我的代码仍然无法正常工作。
它的data: JSON.stringify({ shipmentkey: shipmentkeys, BOLPdfInputs: BOLPdfInputs })（你当前的代码发送一个包含2个字符串的对象）
当然，如果您生成正确的视图，那么它只是 data: $('form').serialize(), 并且没有 contentType 选项 - 不需要任何代码来生成数据

标签： jquery asp.net-mvc

【解决方案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",
    });
});

【讨论】：