Sending data to the server with fnServerParams and aoData for jquery DataTable does not work in MVC4

Question

I want to send extra data to serverside (ASP.Net MVC4) for my jquery datatable. There are many examples on how to this client side, but I can't get it to work on the serverside.

Here's the code:

javascript:

$(document).ready(function () {    
    var oTable = $('#myDataTable').dataTable({
        "bServerSide": true,
        "sAjaxSource": "SearchPatient/DataHandler",        
        "fnServerParams": function (aoData) {
            alert('in fnServerParams');
            aoData.push( { "name": "more_data", "value": "my_value" } );
        }

    });
});

Note: the alert goes off, so the function itself is working.

My model class:

    /// <summary>
    /// Class that encapsulates most common parameters sent by DataTables plugin
    /// </summary>
    public class JQueryDataTableParamModel
    {
        /// <summary>
        /// fnServerparams, this should be an array of objects?
        /// </summary>        
        public object[] aoData { get; set; }

        /// <summary>
        /// Request sequence number sent by DataTable, same value must be returned in response
        /// </summary>       
        public string sEcho { get; set; }

        /// <summary>
        /// Text used for filtering
        /// </summary>
        public string sSearch { get; set; }

        /// <summary>
        /// Number of records that should be shown in table
        /// </summary>
        public int iDisplayLength { get; set; }

        /// <summary>
        /// First record that should be shown(used for paging)
        /// </summary>
        public int iDisplayStart { get; set; }

        /// <summary>
        /// Number of columns in table
        /// </summary>
        public int iColumns { get; set; }

        /// <summary>
        /// Number of columns that are used in sorting
        /// </summary>
        public int iSortingCols { get; set; }

        /// <summary>
        /// Comma separated list of column names
        /// </summary>
        public string sColumns { get; set; }

        /// <summary>
        /// Text used for filtering
        /// </summary>
        public string oSearch { get; set; }

    }

and finally my Controller:

   public ActionResult DataHandler(JQueryDataTableParamModel param)
    {
        if (param.aoData != null)
        {
            // Get first element of aoData.  NOT working, always null              
            string lSearchValue = param.aoData[0].ToString();

            // Process search value
            // ....
        }


        return Json(new
        {                
            sEcho = param.sEcho,
            iTotalRecords = 97,
            iTotalDisplayRecords = 3,
            aaData = new List<string[]>() {
                new string[] {"1", "IE", "Redmond", "USA", "NL"},
                new string[] {"2", "Google", "Mountain View", "USA", "NL"},
                new string[] {"3", "Gowi", "Pancevo", "Serbia", "NL"}
                }
        },
        JsonRequestBehavior.AllowGet);
    }

Note: the action handler gets hit, so the ajax call to get data is also working and my datatable gets filled with 3 rows..

The problem is: aoData is always null. I expect the first element to hold "my_value".

Any help is much appreciated!

Answer 1

After searching for hours to find the answer finally posted it here. Only to come up with the answer in minutes:

This does the trick:

Add this line serverside in the DataHandler:

var wantedValue = Request["more_data"];

So the value is in the request and not in the model.

Thanks.

Answer 2

The value(s) are indeed in the model, but they are passed as individual fields, not as elements of aoData:

public class JQueryDataTableParamModel {
    /// The "more_data" field specified in aoData
    public string more_data { get; set; }

    public string sEcho { get; set; }
    public string sSearch { get; set; }
    public int    iDisplayLength { get; set; }
    public int    iDisplayStart { get; set; }
    public int    iColumns { get; set; }
    public int    iSortingCols { get; set; }
    public string sColumns { get; set; }
    public string oSearch { get; set; }
}

Usage:

public ActionResult DataHandler(JQueryDataTableParamModel param) {
    /// Reference the field by name, not as a member of aoData
    string lSearchValue = param.more_data;

    return Json( 
        new {                
            sEcho = param.sEcho,
            iTotalRecords = 97,
            iTotalDisplayRecords = 3,
            aaData = new List<string[]>() {
                new string[] {"1", "IE", "Redmond", "USA", "NL"},
                new string[] {"2", "Google", "Mountain View", "USA", "NL"},
                new string[] {"3", "Gowi", "Pancevo", "Serbia", "NL"}
            }
        },
        JsonRequestBehavior.AllowGet
    );
}

Answer 3

I will post another answer just to show a way to avoid code duplication.

You can also make your JQueryDataTableParamModel as a base class for others. Datatables will send the custom data in the same object, so you can't make the model bind it directly, unless your C# View Model matches exactly the DataTables sent object.

This can be achieved as @SetFreeByTruth answered, but you could have some code duplication if you want it to be used in a whole project. This table has more_data, what if you have another table with only a property called custom_data? You would need to fill your object with multiple fields or create several datatables view models, each with your custom data.

For your scenario, you could use inheritance. Create a new class like this:

//Inheritance from the model will avoid duplicate code
public class SpecificNewParamModel: JQueryDataTableParamModel
{
    public string more_data { get; set; }
}

Using it like this in a controller:

public JsonResult ReportJson(SpecificNewParamModel Model)
{
    //code omitted code for clarity
    return Json(Return);
}

If you send the DataTables request and inspect the Model, you can see that it's filled with your custom data (more_data) and the usual DataTables data.