如何使用 Ajax 将 $('#form').serializeArray() 转换为 c# class 对象？

Question

我有一个名为 Location 的模型 class：

  public class Location
  {
    [Key]
    public int Id { get; set; }
    public string Name { get; set; }
    public int Number { get; set; }
    public int? Floor { get; set; }
    public string ImgURL { get; set; }
    public string Type { get; set; }
    public double Longitude { get; set; }
    public double Latitude { get; set; }
  }

在我的 .cshtml.cs Razor 页面中，我有一个名为 MapLocationModel 的 PageModel 和一个名为 CurrentLocation 的属性 :

    [BindProperty]
    public Location CurrentLocation { get; set; }

我在模态形式中使用这个属性 :

<form id="locationForm" method="post">
               
     <!--CurrentLocation.Name-->
     <div class="form-group col-md-9">
         <label asp-for="CurrentLocation.Name" class="control-label"></label>
         <input asp-for="CurrentLocation.Name" class="form-control" />
         <span asp-validation-for="CurrentLocation.Name" class="text-danger"></span>
     </div>

     // Here all other properties
                  
</form>
        
  <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      <input type="button" id="buttonSubmit" value="Submit" class="btn btn-primary" />
  </div>

现在我想要实现的是将 CurrentLocation 传递给 ajax post。到目前为止，我已经编写了 ajax 函数：

var button = $("#buttonSubmit");
button.on('click', function () {
    var location = $('#locationForm').serializeArray();
    $.ajax({
        type: "POST",
        url: "/Map/MapLocation?handler=AsyncMyLocationAjax",
        headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
        data: { currentLocation: location },
        success: function (response) {
            alert(response);
        }
    });
});

但我的处理程序总是 return null :

    public ActionResult OnPostAsyncMyLocationAjax(Location currentLocation)
    {
        Console.WriteLine(currentLocation);
        // currentLocation is always null
    }

我认为问题在于 RequestVerificationToken 是序列化的一部分：

我已经阅读了很多关于如何使用 ajax 传递数据的 post，但我仍然不明白该怎么做。

我做错了什么？如何在 Location 对象中转换 var location = $('#locationForm').serializeArray();？

Answer 1

serializeArray和serialize都会生成__RequestVerificationToken，你需要post形式的数据而不是通过json.So改变[=14] =] 到 data: location 如下所示：

var button = $("#buttonSubmit");
button.on('click', function () {
    var location = $('#locationForm').serializeArray();
    console.log(location);
    $.ajax({
        type: "POST",
        url: "/Map/MapLocation?handler=AsyncMyLocationAjax",
        headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
        data: location,
        success: function (response) {
            alert(response);
        }
    });
});

结果：

如何使用 Ajax 将 $('#form').serializeArray() 转换为 c# class 对象？

How to convert a $('#form').serializeArray() to c# class object with Ajax?

c#

ajax

asp.net-core

razor-pages