Ajax POST request fails with status code 400 but I have no idea why

Ajax POST request fails with status code 400 but I have no idea why

marcusb123marcusb123 Posts: 3Questions: 1Answers: 0

I am making a Ajax POST request for DataTables like so:

 var table = $('#ops-br-table').DataTable({
                serverSide: true,
                pageLength: 25,
                processing: true,
                language: {
                    loadingRecords: "Loading...",
                    processing: "Loading..."
                },
                ajax: {
                    url: '/mywebsite/requests/filter',
                    type: 'POST',
                    contentType: "application/json;",
                    dataType: 'json',
                    traditional: true,
                    data: function (d) {
                        return JSON.stringify(d);
                    }
                },
                columns: [
                    {
                        data: 'propertyName1',
                        visible: false
                    },
                    {
                        data: 'propertyName2',
                        className: 'nowrap',
                        type: 'date',
                        render: function (data, type, row) { return doStuff(data); }
                    },
                    {
                        data: 'propertyName3',
                        render: function (data, type, row) { return doStuff(data); }
                    },
                    {
                        data: 'tourId',
                        width: "5%",
                        render: function (data, type, row) { return doStuff(data); }
                    },
                    {
                        data: 'tourDetail.tourName',
                        width: "10%",
                        render: function (data, type, row) { return doStuff(data); }
                    },
                    {
                        data: 'userComment',
                        render: function (data, type, row) { return doStuff(data); }
                    },
                    {
                        data: 'user.friendlyIdentifier',
                        width: "10%",
                        render: function (data, type, row) { return doStuff(data); }
                    },
                    {
                        data: 'user.email',
                        render: function (data, type, row) { return doStuff(data); }
                    },
                    {
                        data: 'sentDate',
                        className: 'nowrap',
                        type: 'date',
                        render: function (data, type, row) { return doStuff(data); }
                    },
                    {
                        data: 'firstChaseDate',
                        className: 'nowrap',
                        type: 'date',
                        render: function (data, type, row) { return doStuff(data); }
                    },
                    {
                        data: 'secondChaseDate',
                        className: 'nowrap',
                        type: 'date',
                        render: function (data, type, row) { return doStuff(data); }
                    },
                    {
                        data: function (row, type, val, meta) { return doStuff(row); }
                    },
                    {
                        data: function (row, type, val, meta) { return doStuff(row); }
                        className: 'nowrap'
                    },
                    {
                        data: function (row, type, val, meta) { return doStuff(row); }
                        className: 'nowrap'
                    }
                ],
                order: [
                    [ 1, "desc"]
                ],
                initComplete: function () {
                    var api = this.api();

                    new $.fn.dataTable.Buttons(api, {
                        buttons: [
                            {
                                text: 'Thing Done',
                                className: 'btn-primary btn-sm',
                                action: function (e, dt, node, config) {
                                    tap.operations.brochurerequests.index.brochureSent(dt);
                                }
                            },
                            {
                                text: 'First Chase Sent',
                                className: 'btn-primary btn-sm',
                                action: function (e, dt, node, config) {
                                    doStuff(dt);
                                }
                            },
                            {
                                text: 'Second Chase Sent',
                                className: 'btn-primary btn-sm',
                                action: function (e, dt, node, config) { 
                                    doStuff(dt);
                                }
                            }
                        ]
                    });
                },
                drawCallback: function (settings) {
                    doStuff.colourRows(new $.fn.dataTable.Api(settings));
                    $('[data-toggle="tooltip"]').tooltip(); 
                }
            });

I have an ASP.net view that calls the POST request above:

<div class="page-interactions-br-search">
    <div class="header header-page">
        <div>
            <h2>Requests</h2>
        </div>
    </div>

    <table id="ops-br-table" class="table-full-width table table-striped table-narrow-col">
        <thead>
            <tr>
                <th></th>
                <th>Requested</th>
                <th>Company</th>
                <th>Product Id</th>
                <th>Product Name</th>
                <th>Comments</th>
                <th>Name</th>
                <th>Email</th>
                <th>Contact Sent</th>
                <th>Email Sent</th>
                <th>2nd Email Sent</th>
                <th>Booked</th>
                <th>Due</th>
                <th>Overdue</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

</div>

@section Scripts {
    <script type="text/javascript">
        $(document).ready(function () {
            mywebsite.requests.index.load(); // This calls a script that fires off the POST request above
        });
    </script>
}

The post request should go via my controller, which looks like this, but the breakpoint in my controller's post method is never hit:

    [Route("MyWebsite/Requests")]
    public class RequestsController : Controller
    {
        private readonly RequestService requestService;

        public BrochureRequestsController(RequestService requestService)
        {
            this.requestService = requestService;
        }

        // GET: requests
        public IActionResult Index()
        {
            return View();
           // Returns the view above
        }

        // POST: requests/filter
        [Route("filter")]
        public IActionResult Filter([FromBody]DataTablesRequest request)
        {
            //     This is never hit, I get an HTTP 400 Bad Request error before this is hit or maybe something is preventing this 
            //     breakpoint from being reached. I am confused.

I have no idea why I can't hit the breakpoint in my controller and why the request fails before that.

It looks like there is some invalid configuration in my POST request but I am new to this and I have no idea what's going wrong.

Any help would be VASTLY appreciated as I am losing a lot of time to this issue!

Let me know if I can provide more info.

Answers

  • marcusb123marcusb123 Posts: 3Questions: 1Answers: 0

    this is what the request headers look like:

    Request URL: https://localhost:5001/requests/filter
    Request Method: POST
    Status Code: 400 Bad Request
    Remote Address: [::1]:5001
    Referrer Policy: no-referrer-when-downgrade
    Content-Length: 0
    Date: Mon, 18 May 2020 10:23:07 GMT
    Server: Kestrel
    Accept: application/json, text/javascript, */*; q=0.01
    Accept-Encoding: gzip, deflate, br
    Accept-Language: en-GB,en-US;q=0.9,en;q=0.8
    Cache-Control: no-cache
    Connection: keep-alive
    Content-Length: 1600
    Content-Type: application/json;
    Host: localhost:5001
    Origin: https://localhost:5001
    Pragma: no-cache
    Referer: https://localhost:5001/requests
    Sec-Fetch-Dest: empty
    Sec-Fetch-Mode: cors
    Sec-Fetch-Site: same-origin
    User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36
    X-Requested-With: XMLHttpRequest
    
  • marcusb123marcusb123 Posts: 3Questions: 1Answers: 0

    ok never mind, my issue was actually that my breakpoint was never being hit in Visual Studio as I didn't launch my app with IIS Express - weird.

    There was no issue with the above Ajax call, the problem was obviously purely server-side as the HTTP error suggests, I just wasn't able to follow the call into the server which was intensely confusing.

This discussion has been closed.