How do I call a post handler in the render function for a datatable column

dsand

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 () {
                                serverSide: true,
                                    $.ajax({
                                        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>
                    }



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

kthorngren

I guess you are referring to this statement:

data = '<form asp-page-handler=”Details” method=”post”><button type=”submit” class=”btn btn-default”>Save Data</button></form>';

That looks like it should send a post request. Have you used the browser's network inspector tool to see if the request method is GET or POST?

Line 5 (serverSide: true,) in your code snippet seems out of place.

Datatables is only displaying the button. Its not changing the behavior of the button or form. I suspect the problem is not a Datatables issue. However if you have questions about the interaction between Datatables and your form please post a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Additionally you can test your form by creating one outside of Datatables to see if it works as expected.

Kevin

dsand

Thanks Kevin. I fixed the serverside tag which was out of place. Yes, it is the statement that I am referring to. I want to call a handler method in my code when they click on the button. I would like to pass that value to the method as well. How do i do that? I am using razor pages.

kthorngren

I would like to pass that value to the method as well. How do i do that?

What value do you want to pass?

I assume you want to pass something from the row clicked. See this example using delegated events. You can modify the selector to be the button instead of the tr. Use a jQuery ajax() POST request to send the row data to the server.

Kevin