Ajax 将空数据传递给 razor 页面处理程序

时间:2021-04-03 02:12:22

标签: ajax asp.net-core razor-pages

所以我有这个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 () {
    // ...
});

它成功命中处理程序,但问题是在剃刀页面处理程序(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,但仍然为 null

如下图所示,ASP.Net Core 并未将模型与参数对象绑定(只要我知道 ASP.Net Core 会这样做):

Debugger when hits

这是我的请求负载:

Request Payload

我是否做错了什么或遗漏了什么?非常感谢您的帮助。

注意事项:

  • 请注意,我将带有导航属性的对象传递为 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; }

}

1 个答案:

答案 0 :(得分:1)

RaffleTicketId 是 int 类型,但是使用 RaffleTicketId: null, 需要将其设置为 int 类型,例如,RaffleTicketId: 0, 并且您需要在处理程序中使用[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 { }

结果: enter image description here