How do I debug JQuery-BootGrid data api to NancyFX

Question

Question edited:

I wrote a page with jquery-bootgrid data API.

Its should be calling with AJAX to my NancyFX REST API, but it isn't.

1. Client side:

I'm serving the bootgrid from a local repo:

<script src="~/scripts/jquery.bootgrid.min.js"></script>

Maybe I shouldn't be using the .min.js file but rather the open one for debugging? If so, could you walk me through what to do, or point me in the direction?

The page code is

...
data-toggle="bootgrid" data-ajax="true" 
data-url="/cars/0" data-method="GET"

2. Server side:

I have the html page served by NancyFx and is seen ok, except for the grid which is empty. There's an API module with a breakpoint in Visual Studio (running on localhost), with the following:

Get["/cars/{status:int}?current={current}&rowCount={rowCount}"] = parameters => ...

This code is never called. How can I force the debugger to catch ANY call before the routing is checked, and show me what's coming into the server?

I'm using the chrome debugger.

Answer 1

The current URL is not valid by Nancy standards. We don't add query string params to the route.

You would want to write something along the lines of:

Get["/cars/{status:int}"] = parameters => 
{
    var status = (int)parameters.status;
    var current = (string)parameters.current.TryParse("");
    var rowCount = (int)parameters.current.TryParse(10);

    ...
}

Along those lines. (written off the top of my head)

An alternative approach is to bind the request like so:

Get["/cars/{status:int}"] = parameters => 
{
    var request = this.Bind<MyRequest>();

    ...
}

public class MyRequest
{
    public MyRequest()
    {
        RowCount = 10;
    }

    public int Status {get;set;}
    public string Current {get;set;}
    public int RowCount {get;set;}
}

Answer 2

Changing the nancy to Get["/cars/{status:int}"] = parameters => did the trick of catching the request.

The ajax wasn't being called because I lost the JQuery first line... $(document).ready(function() {

To get the current and rowCount you need to use

var current = (int)Request.Form["current"];
var rowCount = (int)Request.Form["rowCount];

By the way, the Get wasn't working (I think its a Bootgrid bug) so I changed it to POST.

Answer 3

The simplest way to debug any jQuery library is by using the in-built debugger, it's kinda difficult for me to use chrome for that , so I use Firefox but if you are habitual of chrome then use it, the functionality is almost the same, but with Firefox you can directly switch to the events associated with any element in the html (in the inspect section) Once you get into the debugger, set the breakpoint and refresh the page either by F5 or Ctrl+F5 if you selected the valid breakpoint you can see all the values associated with every variable also with every function. Secondly, use the step-in option in the debugger to see where the exact line is pointing, if it's refering to any other file it will pop open automatically in the debugger menu. Firefox's spider monkey is much good at debugging and relating codes (that's totally my opinion). 3- for the api calls, the reason for data not being processed or not displayed, very much lies within the structure of the library,(on what parameters the data is called/fetched/retrieved), for this try to use the "watch expressions" option in debugger and try implementing the code on loaded dom in console section with trigger on the node which you think is bugged or which should display the value.