如何从Ajax渲染函数中调用邮政处理程序并传递值

Question

这是我的代码。渲染函数中的后处理程序未被调用。单击时，它会不断进入Get Handler。 A HREF标签工作正常，但我不想传递URL中的ID值。因此，我想打电话给帖子，然后重定向。

@section Scripts {
        <script>
 
            $(document).ready(function () {
               
                    $.ajax({
                        serverSide: true,
                        type: "Get",
                        url: "/SRes?handler=Json",
                        dataType: "json",
                        success: OnSuccess,
                        beforeSend: function () {
                            console.log('before send')
                            $('#loadModal').show();
                        },
                        complete: function () {
                            console.log('complete send')
                            $('#loadModal').hide();
 
                        }
 
                    });
 
 
            });
 
 
            function OnSuccess(response) {
                console.log(response.data)
 
                $('#myTable').DataTable(
                    {
                        "dom": '<"top"Blf>rt<"bottom"rip><"clear">',
                        buttons: [
 
                            'excel', 'pdf', 'print'
                        ],
 
                        scrollY: "400",
                        pageLength: 25,
                        data: response.data,
                        columns: [{
                            className: 'details-control',
                            orderable: false,
                            data: null,
                            defaultContent: ''
 
                        },
 
                        {
                            "data": "Id",
                            "render": function (data, type, row, meta) {
                                if (type === 'display') {
                                    /* data = '<a target="_blank" href="/details?id=' + data + '">' + data + '</a>';*/
                                    /*  data = '<asp:LinkButton ID="LinkButton1" runat="server" OnClick="Details">Test</asp:LinkButton>';*/
                                    data = '<form asp-page-handler=”Details” method=”post”><button type=”submit” class=”btn btn-default”>Save Data</button></form>';
                                }
 
                                return data;
                            }
 
                        },
                        { "data": "name" },
                        { "data": "desc" },
                        { "data": "address" },
                        { "data": "Type" },
                            /* { "data": "status" }*/
                        ],
 
                        initComplete: function (settings, json) {
 
                            $('#myTable').DataTable().columns.adjust();
                            $('#myTable').DataTable().fixedHeader.adjust();
                        },
 
                    });
 
 
                $('#myTable tbody').on('click', 'td.details-control', function () {
                    var table = $('#myTable').DataTable();
                    var tr = $(this).closest('tr');
                    var row = table.row(tr);
 
                    if (row.child.isShown()) {
                        row.child.hide();
                        tr.removeClass('shown');
                    }
                    else {
                        row.child(format(row.data())).show();
                        tr.addClass('shown');
                    }
                });
 
 
            };
 
            function format(rowData) {
                //var div = $('<div/>')
 
                //div.append(rowData.DOB);
                //div.append(rowData.filingDate);
                //div.append(rowData.type);
                // `d` is the original data object for the row
                return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
                    '<tr>' +
                    '<td>Case Filing Date:</td>' +
                    '<td>' + rowData.recDate + '</td>' +
                    '</tr>' +
                    '<tr>' +
                    '<td>Case Type:</td>' +
                    '<td>' + rowData.type + '</td>' +
                    '</tr>' +
                    '<tr>' +
                    '<td>Date of Birth:</td>' +
                    '<td>'+ rowData.DOB + '</td>' +
                    '</tr>' +
                    '</table>';
 
 
                return div;
            }
 
 
        </script>
    }
 
 

这是我的代码。我想将ID的值传递给此功能。我正在使用剃须刀页面。

  public IActionResult OnPostDetails()
            {
                return RedirectToPage("./cust");
            }

Answer 1

您需要在dataTable中使用HTML代码而不是标记助手。它不会自动生成HTML代码。当使用邮政表单中的操作时，formergerytoken将不包括在表单中。因此，您需要要将其添加到initcomplete的表单中。尝试使用以下代码：
HTML：

<div id="AntiForgeryToken">
    @Html.AntiForgeryToken()
</div>
...

JS：

$('#myTable').DataTable(
                    {
                        "dom": '<"top"Blf>rt<"bottom"rip><"clear">',
                        buttons: [
 
                            'excel', 'pdf', 'print'
                        ],
 
                        scrollY: "400",
                        pageLength: 25,
                        data: response.data,
                        columns: [{
                            className: 'details-control',
                            orderable: false,
                            data: null,
                            defaultContent: ''
 
                        },
 
                        {
                            "data": "Id",
                            "render": function (data, type, row, meta) {
                                if (type === 'display') {
                                  
                                    data = '<form name="testForm" action="?handler=Details" method="post"><input name="id" hidden value="'+data+'" /><button type="submit" class="btn btn-default">Save Data</button></form>';
                                }
 
                                return data;
                            }
 
                        },
                        { "data": "name" },
                        { "data": "desc" },
                        { "data": "address" },
                        { "data": "Type" },
                            /* { "data": "status" }*/
                        ],
 
                        initComplete: function (settings, json) {
                             $("form[name='testForm']").each(function (index) {
                            $("form[name='testForm']")[index].innerHTML = $("form[name='testForm']")[index].innerHTML + document.getElementById("AntiForgeryToken").innerHTML;
                        })
                            $('#myTable').DataTable().columns.adjust();
                            $('#myTable').DataTable().fixedHeader.adjust();
                        },
 
                    });

OnpostDetails：

public IActionResult OnPostDetails(int id)
            {
                return RedirectToPage("./cust");
            }