Server-side processing and ASP.Net Web Forms

lac616

Firstly, I must give an awesome shout-out to Allan for creating/maintaining one of the best Jquery plug-ins I've ever worked with...thank you Allan.

This post is not a question, rather an information sharing of how I managed to get Server-side processing working with ASP.NET Web Forms.

I recently upgraded to 1.10.3 version of Datatables and decided to give server-side processing with asp.net web forms a try. One of the biggest challenges with server-side processing to-date was the fact that Asp.Net will render all JSON objects in a "d" node, which drove me nuts in terms of properly parsing and instantiating Datatables with the proper JSON hierarchy. I saw the enhanced AJAX functionality in 1.10.3, and thought...this may actually work for my needs...

So I created the following Datatable:

'''

var baseUrl = location.protocol + "//" + location.host;

$('#tblReportDisplay').DataTable({
'processing': true,
'serverSide': true,
'ajax': {
type: 'POST',
dataType: "json",
contentType: "application/json; charset=utf-8",
url: baseUrl + '/CustomsData/ReportDisplaySS.aspx/GetReportData',
data: function (d) {
return "{'requestModel' : " + JSON.stringify(d) + "}";
},
dataSrc: function (json) {

                var parsedJson = $.parseJSON(JSON.stringify(json.d));

                return json = parsedJson;
            }
        },
        'columns': [
            { "data": "Test1" },
            { "data": "Test2" }

        ]
    });

'''

Notice the new property of "dataSrc" - this is where I needed to capture and parse my "d" node that Datatables needs to render the data properly.

HOWEVER, it still did not work. I kept getting "no data available". I looked at the JSON in my console and I can see that the horrible "d" node -- my nemesis.

So after some debugging, I came across the function _fnAjaxUpdateDraw in the dataTables js file. I realized that none of the JSON nodes could be read because they were still encapsulated in the "d" node. So where was the new "dataSrc" configuration coming into play? In my situation, it was not read properly with the following function call:

var data = _fnAjaxDataSrc(settings, json);

This returned my proper JSON and eliminated the "d" node - not the data node within the necessary structure. The data variable had the JSON in it's entirety.

I modified the function as identified below with the "LAR" comments and Server-side processing worked smoothly thereafter. Time will tell if there are long term issues with this modification, so please treat this like an "as-is" post and offer up any suggestions for improvement.

'''

function _fnAjaxUpdateDraw(settings, json) {
// v1.10 uses camelCase variables, while 1.9 uses Hungarian notation.
// Support both

    //LAR 10/15/2014 - check if dataSrc property exists with modified JSON before reading JSON properties. 
    json = _fnAjaxDataSrc(settings, json);
    var compat = function (old, modern) {
        return json[old] !== undefined ? json[old] : json[modern];
    };

    var draw = compat('sEcho', 'draw');
    var recordsTotal = compat('iTotalRecords', 'recordsTotal');
    var rocordsFiltered = compat('iTotalDisplayRecords', 'recordsFiltered');
    //LAR 10/15/2014 - now that proper JSON is returned, should be able to ready property 'data' directly from it
    var data = compat('aoData', 'data'); 

    if (draw) {
        // Protect against out of sequence returns
        if (draw * 1 < settings.iDraw) {
            return;
        }
        settings.iDraw = draw * 1;
    }

    _fnClearTable(settings);
    settings._iRecordsTotal = parseInt(recordsTotal, 10);
    settings._iRecordsDisplay = parseInt(rocordsFiltered, 10);

    //LAR 10/15/2014 - commented as per notes above
    //var data = _fnAjaxDataSrc(settings, json);


    for (var i = 0, ien = data.length; i < ien; i++) {
        _fnAddData(settings, data[i]);
    }
    settings.aiDisplay = settings.aiDisplayMaster.slice();

    settings.bAjaxDataGet = false;
    _fnDraw(settings);

    if (!settings._bInitComplete) {
        _fnInitComplete(settings, json);
    }

    settings.bAjaxDataGet = true;
    _fnProcessingDisplay(settings, false);
}

'''

My Test Code-behind function :

'''

<WebMethod()>
Public Shared Function GetReportData(ByVal requestModel As JqueryDataTables.DefaultDataTablesRequest) As JqueryDataTables.DataTablesReponse
Dim jq As New JqueryDataTables.DataTablesReponse
Dim col As New JqueryDataTables.Column
'Dim serializer As New JavaScriptSerializer

'requestModel has all Sent Parameters identified in Server-Side Processing manual
'...

    jq.draw = 1
    jq.recordsTotal = 2
    jq.recordsFiltered = 2


    jq.data = New List(Of JqueryDataTables.RowData)
    Dim rd As New ReportDisplayRowData
    rd.DT_RowId = 1
    rd.Test1 = "Awesome!!!"
    rd.Test2 = "Sweet!!!"
    jq.data.Add(rd)

    rd = New ReportDisplayRowData
    rd.DT_RowId = 2
    rd.Test1 = "Awesome Again!!!"
    rd.Test2 = "Sweet Again!!!"
    jq.data.Add(rd)

    'Dim s As String = serializer.Serialize(jq)

    Return jq
End Function

'''

lac616

Having trouble with Markdown, let me know if I can fix?

irco

I have been trying to figure this out for a while, thanks for the clues, I still get Ajax error whenever i attempt to use your solution...this is driving me insane