Ajax 将空数据传递给剃须刀页面处理程序

Question

所以我有这个 ajax POST，它通过对象列表（RaffleTicketNumberModel）作为属性传递一个对象，如下所示：

// id comes as parameter to this function
const TicketNumbers = localStorage.getItem(id);
    const numbers = JSON.parse(TicketNumbers);

const dataToSend = {
    RaffleTicketId: null,
    RaffleScheduleId: scheduleId,
    UserId: user,
    DatePaid: new Date().toISOString(),
    Status: true,
    Active: true,
    AmountPaid: amountPaid,
    UserModel: null,
    RaffleScheduleModel: null,
    RaffleTicketNumberModel: numbers
};

$.ajax({
    type: 'POST',
    url: 'RaffleSellsPage?handler=CreateRaffleTicket',
    contentType: 'application/json',
    beforeSend: function (xhr) {
        xhr.setRequestHeader('XSRF-TOKEN',
            $('input:hidden[name="__RequestVerificationToken"]').val());
    },
    data: JSON.stringify(dataToSend)
}).then(function () {
    // ...
});

它成功地命中了处理程序，但问题是在 razor 页面处理程序 (dataToSend) 中获取它的参数总是为空。这是我的页面类和处理程序：

using ApiAccess;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net.Http;
using System.Threading.Tasks;

namespace Tiempos_FE.Pages.Vendor.Sells
{
    public class RaffleSellsPageModel : PageModel
    {

        [BindProperty]
        public ApiAccess.RaffleTicketModel RaffleTicket { get; set; }
        readonly RaffleTicketClient raffleTicketClient = new(new HttpClient());

        public void OnGet()
        {

        }

        public JsonResult OnPostCreateRaffleTicket(RaffleTicketModel dataToSend)
        {
            var result = dataToSend;
            return new JsonResult(result);
        }

    }
}

我在网上尝试了几种解决方案，但它们似乎都不适合我，例如将数据附加到请求正文并使用 [FromBody] RaffleTicketModel dataToSend 检索它，并将对象作为完整字符串传递和接收，方法是替换contentType: 'text/plain' 的 Ajax contentType，但仍然为空

如下图所示，ASP.Net Core 没有将模型与参数对象绑定（只要我知道 ASP.Net Core 会这样做）：

这是我的请求负载：

我做错了什么或错过了什么？非常感谢您的帮助。

注意事项：

• 请注意，我正在传递导航属性为 null 的对象（使用实体框架）这会影响它吗？

在 RaffleTicketnumbers 的属性 amoutPaid 中也有一个小错字，但模型有相同的错字，所以它应该也能正常工作。我将包括模型

仅供参考：

public class RaffleTicketModel
{

    [Key]
    [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
    public int RaffleTicketId { get; set; }

    [ForeignKey("RaffleSchedule")]
    public int RaffleScheduleId { get; set; }

    [ForeignKey("UserModel")]
    public string UserId { get; set; }

    [Required]
    public DateTime DatePaid { get; set; }

    [Required]
    public bool Status { get; set; }

    [Required]
    public bool Active { get; set; }

    [Required]
    public double AmountPaid { get; set; }

    public UserModel UserModel { get; set; }

    public RaffleScheduleModel RaffleScheduleModel { get; set; }

    public ICollection<RaffleTicketNumberModel> RaffleTicketNumberModel { get; set; }

}

Answer 1

RaffleTicketId是int类型，但是你使用RaffleTicketId: null,你需要将它设置为int类型，例如RaffleTicketId: 0,你需要在handler中使用[FromBody]。这是一个工作演示：

查看：

<button onclick="PostData()">click</button>

js:

function PostData() {
        var numbers = [];
        numbers[0] = { raffleNumber: 5, amountPaid: 2000 };
        numbers[1] = { raffleNumber: 4, amountPaid: 2000 };
        numbers[2] = { raffleNumber: 3, amountPaid: 2000 };

        const dataToSend = {
            RaffleTicketId: 0,
            RaffleScheduleId: 0,
            UserId: "",
            DatePaid: new Date().toISOString(),
            Status: true,
            Active: true,
            AmountPaid: 0,
            UserModel: null,
            RaffleScheduleModel: null,
            RaffleTicketNumberModel: numbers
        };
        $.ajax({
            type: 'POST',
            url: 'RaffleSellsPage?handler=CreateRaffleTicket',
            contentType: 'application/json',
            beforeSend: function (xhr) {
                xhr.setRequestHeader('XSRF-TOKEN',
                    $('input:hidden[name="__RequestVerificationToken"]').val());
            },
            data: JSON.stringify(dataToSend)
        }).then(function () {
            // ...
        });
    }

处理程序：

public JsonResult OnPostCreateRaffleTicket([FromBody]RaffleTicketModel dataToSend)
        {
            var result = dataToSend;
            return new JsonResult(result);
        }

型号：

public class RaffleTicketModel
    {
      
        [Key]
        [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
        public int RaffleTicketId { get; set; }

        [ForeignKey("RaffleSchedule")]
        public int RaffleScheduleId { get; set; }

        [ForeignKey("UserModel")]
        public string UserId { get; set; }

        [Required]
        public DateTime DatePaid { get; set; }

        [Required]
        public bool Status { get; set; }

        [Required]
        public bool Active { get; set; }

        [Required]
        public double AmountPaid { get; set; }

        public UserModel UserModel { get; set; }

        public RaffleScheduleModel RaffleScheduleModel { get; set; }

        public ICollection<RaffleTicketNumberModel> RaffleTicketNumberModel { get; set; }

    }
    public class RaffleTicketNumberModel {
        public int RaffleNumber { get; set; }

        public int AmountPaid { get; set; }
    }
    public class UserModel { }
    public class RaffleScheduleModel { }

结果：