Ajax 后（模型綁定）將 null 傳遞到 controller

Question

我正在向 controller（ASP.NET Core MVC）發出 AJAX POST 請求，但參數的值是 null。 我嘗試了 StackOverflow 上給出的幾種解決方案。 但是，我無法糾正它。 請幫忙。

我的觀點收集 class 費用信息。 可能有不止一項付款。

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

Model

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

Controller

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

Object 運行時詳細信息

Answer 1

從您附加的要傳遞到 controller 的數據的屏幕截圖中，數據的結構與預期的 controller 的數據 model 不匹配。

假設前端的數據結構是正確的。

Controller 應該期望收到的數據是StudentPaymentSlipVM object 。 在StudentPaymentSlipVM object 中， fees是StudentPaymentPaidClassVM數組。

Model

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

Controller

public ActionResult StudentPayment_Create([FromBody] StudentPaymentSlipVM data)
{

}

While from your JQuery part, make sure that your data object to be passed to API must be matched with the data type as your model in the back-end.

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

Answer 2

我試圖通過綁定到具有所有必需定義的 ViewModel (StudentPaymentSlipVM) 將我的數據傳遞給 controller。 但我做不到。 所以我改變了方式並將我的 object 傳遞給 Controller 如下方式現在它正在工作。 我還要感謝永順。

1. 更改了 JQuery 代碼

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

2. 我改變了 Controller

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