Converting Ajax MVC call to new API naming convention

Hello again,

DataTables Debugger: ucehuw

I am converting working 1.9.4 code to 1.10.2 and am having trouble. I don't have the ajax portion working yet.

I can't set up aDataTables Live or JS fiddle because I'm working with MVC and am not using a stagnant data source...

Here is the working 1.9.4 JS code:

var oSimpleSearchTable;
var oSearchString = "";

oSimpleSearchTable = $('#simpleSearchResult').dataTable({
    "bJQueryUI": true,
    "bPaginate": true,
    "sPaginationType": "full_numbers",
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "Home/Search",//sUrl,
    "sServerMethod": "POST",
    "fnServerData": function (url, data, callback, oSettings) {
        data.push({ "name": "searchString", "value": $("#quickSearchInput").val().toString() });
        data.push({ "name": "searchType", "value": $("#radiosearchby :radio:checked").attr('id') });
        data.push({ "name": "baseFilter", "value": $("#radiooptions :radio:checked").attr('id') });
        data.push({ "name": "sort", "value": $("#radiosort :radio:checked").attr('id') });
        oSettings.jqXHR = $.ajax({
            "url": url,
            "data": data,
            "success": callback,
            "contentType": "application/x-www-form-urlencoded; charset=utf-8",//"contentType": "application/json",
            "dataType": "json", 
            "type": "POST",
            "cache": false,
            "error": function (msg) {
                alert(msg.responseText);
            }
        });
    },
    "aoColumns": [
        {
            "sTitle": "<input type='checkbox' id='SimpleSelectAll' />",
            "mData": [0],
            "bSortable": false,
            "mRender": function (data, type, row) {//data, type, full
                return '<input type="checkbox" name="check1" value="' + data + '" class="checkbox-simpletr" />';
            }
        },

...

Here is what I have so far as a conversion: var oSimpleSearchTable; var oSearchString = "";

oSimpleSearchTable = $('#simpleSearchResult').DataTable({
    "jQueryUI": true,
    "paging": true,
    "pagingType": "full_numbers",
    "processing": true,
    "serverSide": true,
    "ajax" : {
        url: "Home/Search",
        data: "{ 'searchString': '" + $("#quickSearchInput").val().toString() + "','searchType':  '" + $("#radiosearchby :radio:checked").attr('id') + "','baseFilter': '" + $("#radiooptions :radio:checked").attr('id') + "','sort': '" + $("#radiosort :radio:checked").attr('id') + "'}",
        dataType: "json",
        type: "POST",
        contentType : "application/x-www-form-urlencoded; charset=utf-8",
        cache : false,
        success : callback,
        error: function (msg) {
            alert(msg.responseText);
        }
    },
    "aoColumns": [
        {
            "sTitle": "<input type='checkbox' id='SimpleSelectAll' />",
            "mData": [0],
            "bSortable": false,
            "mRender": function (data, type, row) {//data, type, full
                return '<input type="checkbox" name="check1" value="' + data + '" class="checkbox-simpletr" />';
            }
        },

...

Here is the JS calling the DataTable.Draw() method. I only changed .fnDraw to .draw():

Old Code:

$("#doSearch").click(function (e) { e.stopImmediatePropagation(); DoSearch(); }); function DoSearch() { $('.alert').hide(100); $('#simpleSearchDiv').show(); $('#navSearchDiv').hide(); $('#searchDiv').hide(); var searchstring = $('#quickSearchInput').val(); if (searchstring == '') { $('#alertmsg').html('Please enter a search term.'); } else { oSimpleSearchTable.fnDraw(); $('#myTab a[href="#home"]').tab('show'); } };

New Code:

$("#doSearch").click(function (e) { e.stopImmediatePropagation(); DoSearch(); }); function DoSearch() { $('.alert').hide(100); $('#simpleSearchDiv').show(); $('#navSearchDiv').hide(); $('#searchDiv').hide(); var searchstring = $('#quickSearchInput').val(); if (searchstring == '') { $('#alertmsg').html('Please enter a search term.'); } else { oSimpleSearchTable.draw(); $('#myTab a[href="#home"]').tab('show'); } };

When the controller receives the call, none of the parameters are populated with the exception of the datatable parameter itself. Here is the Signature for the Controller Method:

public ActionResult Search(JSDataTable dataTable, string searchString, String searchType, String baseFilter, String sort)

I feel like the ajax portion of the initialization code is wrong. Can you help?