[FIXED] How to call a post handler from a ajax render function and pass the value

Issue

Here's my code. The post handler in the render function does not get called. It keeps going to the GET handler when clicked. The a href tag works fine but i dont want to pass the id value in the url. So, I want to call a post and then do a redirect.

@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>
    }
 
 

Here's my code behind. I would like to pass the value of the id to this function. I am using razor pages.

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

Solution

You need to use html code rather than tag helper in DataTable.It will not be generated to html code automatically.When using action in post form,the AntiForgeryToken will not be included in the form.So you need to add it to the forms in initComplete.Try to use the following code: 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");
            }

Answered By - Yiyi You

Answer Checked By - David Goodson (PHPFixing Volunteer)