将数组从 datatables.net JavaScript 传递到 asp.net Razor 页面

Passing Array from datatables.net JavaScript to asp.net Razor pages

提问人:confusedUser1 提问时间:11/18/2023 最后编辑:confusedUser1 更新时间:11/20/2023 访问量:28

问:

我正在使用 Visual Studio 2022 asp.net Razor 页面项目,并尝试将选定记录的 DataTables.net 表中的数组传递回 OnPostRemove.cshtml.cs。似乎正在传递数组,有效负载看起来正确,并且 OnPostRemove 参数具有正确的计数,但所有字段都为 null。

OnPostRemove 显示空列表

public List<RemoveAirports> ListAirports = new List<RemoveAirports>();

public void OnPostRemove([FromBody] List<RemoveAirports> removeAirports)
{
   
   if(removeAirports == null)
    {
        Console.WriteLine("Empty");
    }
    Console.WriteLine("Not Empty");
}

公共类 RemoveAirports

public class RemoveAirports
{
    public string continentName;
    public string countryName;
    public string regionName;
    public string regionCode;
    public string airport;
    public string airportName;

}

用于 datatables.net 表的 JavaScript

 <script>
     $(document).ready(function () {
        
         var table = $('#assignedAirports').DataTable({
             columns: [
                 {name: "id", title: "Select"},
                 { name: "continentName", title: "Continent Name"},
                 { name: "countryName", title: "Country Name" },
                 { name: "regionName", title: "Region Name"},
                 { name: "regionCode", title: "Region Code" },
                 { name: "airport", title: "Airport" },
                 { name: "airportName", title: "Airport Name" }

             ],
             dom: 'Bfrtip',
             buttons: [
                 {
                     className: "btn-outline-danger",
                     text: "Remove All Selected Airports",
                     action: function (e, dt, node, config) {
                         
                         var removeAirports = dt.rows({ selected: true }).data().toArray();

                         removeAirports = JSON.stringify(removeAirports);
                         $.ajax({
                             type: "POST",
                             url: window.location.href + "&handler=Remove",
                             data: removeAirports,
                             dataType: "json",
                             headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
                             contentType: "application/json; charset=utf-8",
                             success: function (data) {
                             }
                         });
                     }
                 }
             ],
             columnDefs: [{
                 
                 targets: 0,
                 data: null,
                 defaultContent: '',
                 orderable: false,
                 className: 'select-checkbox',
             },
             {
                 targets: 1,
                 visible: true
             }],
             select: {
                 style: 'multi',
                 selector: 'td:first-child'
             },
             order: [[1, 'asc']]
         });

         $(document).ready(function () {
             var DT1 = $('#assignedAirports').DataTable();
             $(".selectAll").on("click", function (e) {
                 if ($(this).is(":checked")) {
                     DT1.rows({ search: 'applied' }).select();
                 } else {
                     DT1.rows({ search: 'applied' }).deselect();
                 }

             });
         })
     });
 </script>

Payload 显示数组,但当它到达 OnPostRemove 时,值均为 NULL。这是我的第一个项目,所以我希望我只是错过了一些明显的东西。

调试网络负载

JavaScript 数组 Datatables Razor-Pages

评论


答:

0赞 confusedUser1 11/20/2023 #1

通过向每个类项添加 {get; set;} 解决了此问题:

    public class RemoveAirports
    {
        public string id { get; set; }
        public string continentName { get; set; }
        public string countryName { get; set; }
        public string regionName { get; set; }
        public string regionCode { get; set; }
        public string airport { get; set; }
        public string airportName { get; set; }

    }