Ajax Post（模型绑定）将 null 传递给控制器答案

【问题标题】：Ajax Post (Model binded) passing null to the controllerAjax Post（模型绑定）将 null 传递给控制器
【发布时间】：2022-01-25 09:24:32
【问题描述】：

我正在向控制器（ASP.Net 核心 MVC）发出 AJAX POST 请求，但参数的值为 null。我尝试了stackoverflow上给出的几种解决方案。但是，我无法纠正它。请帮忙。

我的视图收集课程费用信息。可能有不止一笔付款。

 $(function () {
            $('#sendSlip').click(function (e) {
                e.preventDefault();
                let fees = new Array(); //To store payment info
                let tb = $('#feesTable:eq(0) tbody');
//Collecting info of each payment
                tb.find("tr").each(function () {
                    let row = $(this);
                    let fee = {};
                    if (row.find('input:checkbox:first').is(':checked')) {
                        fee.ClassId = row.find("TD").eq(0).html();
                        fee.FeeId = row.find("TD").eq(1).html();
                        fee.Amount = row.find(".fee").html();
                        fee.Month = row.find(".month").html();
                        fees.push(fee);
                    }
                });
//Arranging data to send to controller
                var data = { 
                    fees: fees,
                    Bank: $(".bank").val(),
                    PaidAmount : $(".amount").val(),
                    PaidDate : $(".date").val()
            };
                 console.log(data);
                 $.ajax({
                     type: 'POST',
                     url: '@Url.Action("StudentPayment_Create", "StudentPayment")',
                     contentType: "application/json",
                     headers: { 'RequestVerificationToken': gettoken() },
                     data: //{ data: JSON.stringify(data) },
                     JSON.stringify(data) ,
                 })
                 
             });
         });

型号

 public class StudentPaymentSlipVM
    {
        public StudentPaymentPaidClassVM fees { get; set; }
        public string Bank { get; set; }
        public DateTime PaidDate { get; set; }
        public int PaidAmount { get; set; }
    }

控制器

 public ActionResult StudentPayment_Create([FromBody] List<StudentPaymentSlipVM> data)
        {
---
}

运行时的对象详细信息

【问题讨论】：

标签： javascript jquery asp.net asp.net-core

【解决方案1】：

从您附加的要传递给控制器的数据的屏幕截图中，数据的结构与控制器预期的数据模型不匹配。

假设前端的数据结构是正确的。

控制器应该期望接收到的数据是StudentPaymentSlipVM 对象。在StudentPaymentSlipVM 对象中，fees 是StudentPaymentPaidClassVM 数组。

型号

public class StudentPaymentSlipVM
{
    public List<StudentPaymentPaidClassVM> fees { get; set; }
    public string Bank { get; set; }
    public DateTime PaidDate { get; set; }
    public int PaidAmount { get; set; }
}

控制器

public ActionResult StudentPayment_Create([FromBody] StudentPaymentSlipVM data)
{

}

在您的 JQuery 部分中，请确保您要传递给 API 的数据对象必须与作为后端模型的数据类型匹配。

var data = { 
    fees: fees,
    Bank: $(".bank").val(),
    PaidAmount : parseInt($(".amount").val()),
    PaidDate : $(".date").val()
};

【讨论】：

谢谢永顺。可能知道我该如何纠正它？我不知道该怎么做。所以如果你能解释一下。
嗨，看看我发布的答案。答案（模型和控制器）基于您的数据对象（屏幕截图）。
是的。我更正了。

【解决方案2】：

我尝试通过绑定到具有所有必需定义的 ViewModel (StudentPaymentSlipVM) 将我的数据传递给控制器。但我做不到。所以我改变了方式并将我的对象传递给控制器，现在它正在工作。还要感谢永顺。

更改了 JQuery 代码

 $.ajax({
                     type: 'POST',
                     url: '@Url.Action("action", "controller")',                    
                     headers: { 'RequestVerificationToken': gettoken() },
                     data: dataObj,
                 })

我更换了控制器

        [HttpPost]
        public ActionResult StudentPayment_Create(List<StudentPaymentPaidClassVM> Fees,  string Bank, decimal PaidAmount, DateTime PaidDate)
        {
.....
}

【讨论】：