How to display returned records from JsonResult in MVC.Net?

drchanix

I have a method in a controller that returns a JsonResult. I call the method using ajax.
It has problems rendering the returned records in Firefox, IE, and Chrome.
In Firefox and IE, the display returns fine first but when the page is refreshed it wont.
The first row displays "No data available in table", and in the succeeding rows, the records returned from json are displayed.
In Chrome, it is not working. It always displays "No data available in table" in the first row and then the succeeding rows are the records returned from json.
There are samples that uses the "sAjaxSource" but they are all php. Any .Net samples?
Here is my script. Did I miss something or am I doing it the wrong way?
Any help is greatly appreciated.


$.getJSON("GetMethod", "", function (data) {
$.each(data, function (value) {
$(""
+ value["FirstName"]
+ ""
+ value["LastName"]
+ ""
+ value["Email"]
+ "")
.appendTo("#tbody");
});
});

$(document).ready(function () {
var oTable = $('#tableList').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers"
});
});


Here is my table:



First Name
Last Name
Email







Any help is so much appreciated.

Thanks.

alexandremarques

I still don't understand why cant you use sAjaxSource. Datatables doesnt care about url extension but the data returned.

drchanix

Thanks for the response.

Okay, I have used the "sAjaxSource".

$(document).ready(function () {
$('#tableList').dataTable({
"bJQueryUI": true,
"bProcessing": true,
"sPaginationType": "full_numbers",
"iDisplayLength": 25,
"bServerSide": true,
sAjaxSource: "GetMethod"
});
});

New error returns.
aData is undefined.

Any thoughts?

allan

What is the JSON that is being required? If you are using server-sid processing, you must follow the requirements laid out in the documentation: http://datatables.net/usage/server-side .

This blog post might be of interest to you as well: http://datatables.net/blog/Extended_data_source_options_with_DataTables

Allan

drchanix

It's just a basic requirement. All I need is to display the records returned from the database through a JsonResult. "GetMethod" is a JsonResult method in my controller.
Anyway, I'll look into this.

Thanks.

allan

Sorry - I didn't mean to say "required" I meant "returned". What is the server sending you back from your request?

Allan

drchanix

The server is sending back an array of objects.

Response looks like this:
[
{"Firstname":"FirstnameA","Lastname":"LastnameA","Email":"a@test.com"},
{"Firstname":"FirstnameB","Lastname":"LastnameB","Email":"b@test.com"},
{"Firstname":"FirstnameC","Lastname":"LastnameC","Email":"c@test.com"}
]

JSON:

0 Object {Firstname="FirstnameA",Lastname="LastnameA",Email="a@test.com"}
1 Object {Firstname="FirstnameB",Lastname="LastnameB",Email="b@test.com"}
2 Object {Firstname="FirstnameC",Lastname="LastnameC",Email="c@test.com"}

Thanks.

allan

Set sAjaxDataProp to an empty string and use mDataProp as indicated in the blog post I linked to and that should do it :-)

Allan

drchanix

I'm getting the error "aData is undefined".
Here is my latest script.
$(document).ready(function () {
$('#tableList').dataTable({
"bJQueryUI": true,
"bProcessing": true,
"sPaginationType": "full_numbers",
"iDisplayLength": 25,
"bServerSide": true,
"sAjaxSource": "GetMethod",
"sAjaxDataProp": "",
"aoColumns": [
{ "mDataProp": "Firstname" },
{ "mDataProp": "Lastname" },
{ "mDataProp": "Email" }
]
});
});

I debug my code in firebug and put a breakpoint to the error.
It is pointing me to _fnAjaxUpdateDraw and as hover the variables in this line:
var aData = _fnGetObjectDataFn( oSettings.sAjaxDataProp )( json ), here are the results:

aData --> undefined
sAjaxDataProp --> ""
json --> [Object {Firstname="FirstnameA", Lastname="LastnameA", Email="a@test.com"}, Object {Firstname="FirstnameB", Lastname="LastnameB",Email="b@test.com"}, Object {Firstname="FirstnameC", Lastname="LastnameC",Email="c@test.com"}]

Thanks.

allan

Do you really want server-side processing ( "bServerSide": true )? See: http://datatables.net/usage/#data_sources . I'd suggest you probably don't and should remove that line.

Allan

drchanix

Nice job, Allan! It worked.
I just removed the ("bServerSide": true) line.
Thanks for the perseverance.

clint

My example is a little more complex. I get a failed, 200 error. Here is my script code:

$(document).ready(function() {

$('#ajaxTest').dataTable({
"bJQueryUI": true,
"bProcessing": true,
"bServerSide": true,
"sPaginationType": "full_numbers",
"iDisplayLength": 25,
"sAjaxSource": "test.aspx/DoProc",
"fnServerData": function (){
$.ajax({
"type": "POST",
"url": "test.aspx/DoProc",
"contentType": "application/json; charset=utf-8",
"data": '{"procName":"procGetAllContacts","parmsVals":"","procType":"Select"}',
"dataFilter": function(data){
var msg = eval('(' + data + ')');
AjaxContactDataTable(msg.d);
},
"error": AjaxFailed
});
},
"sAjaxDataProp": "",
"aoColumns": [
{ "mDataProp": "ID" },
{ "mDataProp": "Name" },
{ "mDataProp": "FirstName" },
{ "mDataProp": "LastName" },
{ "mDataProp": "Email" }
]
});

});

function AjaxContactDataTable(result) {

var test = $.parseJSON(result);

$("#ajaxTest").html(test);
}


------------------------------------------------

Here is my html:




ID
Name
First Name
Last Name
Email








---------------------------------------------

Here is the json returned:
[{"ID":3,"AddressID":2,"ContactType":184,"Code":"Daily","FirstName":"Ed","LastName":"McReady","Initial":" ","Email":"ed.mcready@yyyyy.com","JobTitle":"","SVID":6,"Name":"Test Company","NAMCCode":196,"NAMC":"YYYYY"},{"ID":107,"AddressID":165,"ContactType":185,"Code":"Executive","FirstName":"Greg","LastName":"Hall","Initial":" ","Email":"htest@xxxx.com","JobTitle":"","SVID":264,"Name":"A-1 Inc.","NAMCCode":191,"NAMC":"XXXX"}]


Any help would be appreciated. The data is being returned and I can bind it to another control. Im just not sure how to bind to the datatable.

allan

If you are going to use server-side processing ( "bServerSide": true, ) then you must send the data to the server that DataTables requires - specifically the second parameter passed to fnServerData . I would suggest not using fnServerData here, but rather to use fnServerParams and sServerMethod to add your extra data and set the type to post.

Allan

clint

Thanks for the response. Im pretty new to your plugin (very sharp by the way), so I am grabbing at straws on how to do this. Here is what I changed it:

[code]
$(document).ready(function() {

$('#ajaxTest').dataTable({
"bJQueryUI": true,
"bProcessing": true,
"bServerSide": true,
"sPaginationType": "full_numbers",
"iDisplayLength": 25,
"sAjaxSource": "test.aspx/DoProc",
"fnServerParams": function(aoData) { aoData.push({ "procName": "procGetAllContacts", "parmsVals": "", "procType": "Select" }); },
"sServerMethod": "POST",
"sAjaxDataProp": "",
"aoColumns": [
{ "mDataProp": "ID" },
{ "mDataProp": "Name" },
{ "mDataProp": "FirstName" },
{ "mDataProp": "LastName" },
{ "mDataProp": "Email" }
]
});

oTable = $('#example').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers"
});

});
[/code]

Here is the error I get:
DataTables warning (table id = 'ajaxTest'): DataTables warning: JSON data from server could not be parsed. This is caused by a JSON formatting error.


Im sure Im doing something stupid, but its all guesswork on my end.

clint

I hope Im using the fnServerParams correctly.

"sAjaxSource": "test.aspx/DoProc" makes a call that will return my data in json format.