400 error after I sort and then click on a column that calls a Post handler in razor pages

dsand

Can you please help me. I have posted the issue on Stack Oveflow. The datagrid retrieves data fine and when I click on the first column it calls the handler and redirects to another page. But when I click on sort for the column and then click on the value in the column, it does not find the handler method and gives me a 400 error.

https://stackoverflow.com/questions/72875948/how-to-call-a-post-handler-from-a-ajax-render-function-and-pass-the-value

kthorngren

The 400 bad request error is being returned by the server. You will need to look at the server logs to find out why its returning this error. There is no way to tell by looking at the client side code.

Kevin

kthorngren

Looking closer at your config you are using jQuery ajax() to fetch the data. Datatables is not sending an ajax request or any other redirection.

Kevin

dsand

Sorry, here's my latest code. It calls a post handler and then I redirect it to another page in that handler.

<script>

        $(document).ready(function () {

         $.ajax({
         serverSide: false,
         url: '?handler=Json',
         type: "POST",
         dataType: "json",
         success: OnSuccess,
         beforeSend: function (xhr) {
         console.log('before send')
         xhr.setRequestHeader("XSRF-TOKEN",  $('input:hidden[name="__RequestVerificationToken"]').val());

          //   $('#loadModal').show();
               $('#modal').show();
                },
                complete: function () {
                console.log('complete send')
               // $('#loadModal').hide();
                $('#modal').hide();
                }
                });
                });

                 function OnSuccess(response) {
                  console.log(response.data)

                 ('#myTable').DataTable(
                 {
                    "dom": '<"top"Blf>rt<"bottom"rip><"clear">',
                     buttons: [
                    'excel', 'pdf', 'print', 'colvis'
                     ],
                     deferRender: true,
                     autoWidth:false,
                     scrollY: "500",
                     scrollX: true,
                     pageLength: 50,
                     data: response.data,
                     /*  order: [[1, 'desc']],*/
                     columns: [{
                     className: 'details-control',
                     orderable: false,
                     data: null,
                     defaultContent: ''
                     },
                     {
                       "data": "Id",
                        "title": "Number",
                        "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-link">' + data  + '</button> </form>';
                         }
                        return data;
                        }
                        },
                         { "data": "name" },
                          { "data": "desc" },
                          { "data": "address" },
                          { "data": "Type" },
                          ],

                         initComplete: function (settings, json) {
                          $('#dt_container').show();
                          var btns = $('.dt-button');
                          btns.addClass('btn btn-success btn-sm');
                          btns.removeClass('dt-button');
                          $('#srchDiv').show();
                          $('#srchAcc').show();
                          $("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();
                          },
                       });

                     $('#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) {

            return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
            '<tr>' +
            '<td>Date:</td>' +
            '<td>' + rowData.Date + '</td>' +
             '</tr>' +
            '<tr>' +
           '<td>Type:</td>' +
            '<td>' + rowData.type + '</td>' +
            '</tr>' +
            '<tr>' +
            '<td>DateEnd:</td>' +
           '<td>'+ rowData.DateEnd + '</td>' +
           '</tr>' +
           '</table>';
           return div;
           }

           $(document).ready(function () {
             $('#sidebarCollapse').on('click', function () {
             $('#sidebar').toggleClass('active');
             });
             });
            </script>
           }

colin

I see there's a solution on SO, so glad all sorted,

Colin

dsand

HI Colin, It still does not work.

kthorngren

Did you look at the server logs to see why its returning the 400 error? Let us know what you find.

Kevin

dsand

This is what I found in the server logs
400 0 0 150

dsand

It does not say anything else. Could it be because I am not using the XSRF token properly?

kthorngren

Hmm. Maybe you need to enable more detailed logging for the web server you are using. The error can happen for any number of reasons. Here are some ideas:
https://kinsta.com/knowledgebase/400-bad-request/

Kevin

dsand

I figured it out. It was not including the antiforgery token when it sorts. So, I had to take it out of the init complete and put it in the draw event function

  $('#myTable').on('draw.dt', function () {
            $("form[name='testForm']").each(function (index) {
                $("form[name='testForm']")[index].innerHTML = $("form[name='testForm']")[index].innerHTML + document.getElementById("AntiForgeryToken").innerHTML;
            })
        });