How can I get ASP.NET C# to load AJAX json data returned from the server?

gbison

Hello all,

My first time to these forums and Datatables. I'm new to all of the web development, but not programming. I was creating a project to help acclimate myself to data presentation and database work in ASP.NET, simply using SQLite and originally the Gridview control and I was successful in this attempt. Now, I have opted to try Datatables since its format looks very robust.

However, I cannot get anything to work that's derived from Ajax as prescribed from the online examples. I can create a basic array and feed it from static data, but what I would like to do is extract a dataset from my SQLite DB, which I have done, convert that into a JSON string and provide access to it through a web method return ( Default.apsx/GetJson ). I have all of this working, even went so far as writing a file to the server side with the JSON output that's being passed back to the client. Checked with JSONLINT to validate that the output was legitimate JSON, and it passed (the actual JSON file output is attached).

I set up alerts and error callbacks for the AJAX using the data tables implementation and then using my own ajax implementation and feeding it to Datables as a source, again, I'm at my wits end here as I see no solution to getting this to work with ASP. NET and AJAX under these circumstances. I'm usually pretty adept at researching this and figuring things out on my own, but my frustration is about to get the best of me and I feel I have to be missing something. So as a last ditch effort to continue working with Datatables I'm asking for some guidance here...

Below is the code I'm currently using to retrieve the data on the client side, you should know that the alert in success callback fires and the alert displays the valid JSON (also in the image) and that no error call back ever fires. Everything seems to work successfully.

Here is the C# for those of you interested in seeing how the web method is set up.

Here is the C# that gathers the data this web method calls.

I would certainly appreciate any guidance you can provide about what's wrong because I'm not getting any errors, everything appears to work, yet the Datables page simply says "Loading..." but never populates the data.

Thanks,
Bryan

kthorngren

Take a look at the browser's console for errors.

The ajax docs state this about using the success function:

success - Must not be overridden as it is used internally in DataTables. To manipulate / transform the data returned by the server use ajax.dataSrc (above), or use ajax as a function (below).

Doing this may be causing the "Loading" to be displayed and Datatables stopping there.

In the success function you are alerting data.d and that is showing the expected Datatables structure. I think its an ASP.NEt thing (not sure though) that the data is returned in the d object. I think you will need to change the ajax.dataSrc to dataSrc: "data.d.data. If that doesn't work try dataSrc: "data.d.

Also your error ajax function is outside the ajax option so it is not doing anything. Move it inside the option.

HTH,

Kevin

gbison

Thanks for the response Kevin, I have tried all of your recommendations with no success. The thing just doesn't want to work. I even tried creating a class that each record derived from, add each records data to an instance of the class, then added each object to a list, punted that to an array and fed it to Datatables with no luck. Sadly, it seems this framework isn't .NET friendly :-(

kthorngren

Is it possible to post a link to your page to take a look?

If you need to keep the info private you can send the link directly to the developer: @allan.

Kevin

gbison

I have some good news. I made a breakthrough last night in the wee hours of the morning and after an unusually significant amount of research.

I got it to work, but it certainly wasn't as straight forward as I thought, and the Datatables site seems to offer no general direction regarding .NET - I find it odd with this frameworks popularity. Once you understand the process (which I confirmed with several other sources), it's not that complicated, but maybe I expected it to be too simple - Gridview spoils us I suppose.

Regardless, the most accurate way of doing this through ASP.net seems to be the use of a web service or ASMX file. The process for my experiment was as follows.

First, create a web service to represent the procedure for populating your table as shown below:

After this, you want to validate the functionality of your ASP.net service page, focus the page, then run it and invoke the method which will populate your page, it should return a valid response back to the HTTP stream.

and your response should be similar based on your data.....

Next, you'll want to ensure your $(document).Ready() functionality is wired up correctly. The following method proved to be the most beneficial for my circumstance, your mileage may vary...

Finally, the result I had been waiting for.

For those needing to perform the same procedures in .NET, I hope you find this beneficial.

For some reason, JSON.net would not work appropriately here or at least I could not find a formal method, and as .NET developers, that is our "goto" framework (Newtonsoft). The significance in events came from changing to the Javascript serializer and using string names in the arrays as shown throughout the code.

I'm still not sure why the valid JSON returned here by JSON.net is not accepted by Datatables, but never the less, the above functionality will get it working nicely in VS 2017 under .NET 4.6.2.

Thanks,
Bryan

allan

Can you show me the raw JSON that didn't work please? My guess from the above is that you didn't have ajax.dataSrc set to be an empty string to use just a plain array of data, but I'm not certain.

Allan

cjohnedisson

just change this

you need to return data on dataSrc and can use $.parseJSON(data.d)