2

I'm trying to use jQuery Datatables 1.10 with server side processing and ASP.NET MVC 5. Unfortunately, Datatables 1.10 writes to the server by serializing a complex hierarchy of objects into a param string (Content-Type: application/x-www-form-urlencoded), which breaks the MVC ModelBinder.

Is there any way, in MVC, to bind a complex hierarchy of objects passes as a serialized parameter list? Perhaps a custom ModelBinder that someone has written?

Note:

Setting traditional = true in the ajax call doesn't work, because that doesn't support hierarchies of objects. I end up with something like:

draw=1&
columns=[object Object]&
columns=[object Object]&
order=[object Object]&
start=0&
length=10&
search=[object Object]

If the data was sent by DataTables as JSON, then I assume all would be well. The issue stems from the fact that the data is sent as a parameter list.

Also Note

Code for wiring up the table:

$("#serverTable").DataTable({
    serverSide: true,
    ajax: {
        url: '/Home/GetTableData',
        type: 'POST'
    }
});
Community
  • 1
  • 1
Eric
  • 5,842
  • 7
  • 42
  • 71

3 Answers3

4

Disclaimer: I'm the author of the mentioned DataTables.MVC project on GitHub

The problem with DataTables 1.10 (new API) is that it's request structure is not entirely compatible with ASP.NET MVC binding engine.

You can either write your own binder or manually handle every single parameter sent from DataTables inside either your QueryString (GET) or Form (POST). You can override it to support other methods.

The whole ideia behind my project is to relief you from handling request parameters over and over again. Just set the binder and use the model: https://github.com/ALMMa/datatables-mvc

On the very first page from the project on GitHub there's a sample code for both setting the binder and handling column ordering/sorting.


As described on the project, the sorting info sent by DataTables is useful on some cases (direct SQL command) but might not be that good if you're using static lists/enumerations or regular linq (although you can use Dynamic Linq to help on this).


Today I've just commited some new code to help you customize/extend the regular binder or to create your JSON binder in a more friendly way and to help getting filtered/sorted columns right from the model.

Community
  • 1
  • 1
Anderson Matos
  • 3,132
  • 1
  • 23
  • 33
  • Hi @ALMMa, thanks for your awesome project. Just a question - what would be the best way to pass in custom data without effecting your code? Ie I can pass in more params in the Ajax function of DataTables, but then your binder wont pick them up... – dalcam May 13 '14 at 14:14
  • Just published an update with support for custom properties. Docs were updated to explain on how to map aditional properties into your model. – Anderson Matos May 13 '14 at 18:55
2

Give this a try: https://github.com/ALMMa/datatables-mvc

It's a custom ModelBinder implementation for the new DataTable 1.10 input. I just discovered it yesterday and I'm still working on my implementation. So I can't say how well it works; I haven't reached the point of testing. But it looks good and I plan to use it.

Lloyd
  • 101
  • 1
  • 5
2

I came accross the same problem a few days ago and the solution is pretty straight forward. You can read here more about it.

You just have to pass in a function as callback for the ajax data property. The callback function returns the data as JSON string:

var opts =
    {
        'ajax'    :
        {
            'url': 'serverSideTableProviderPage',
            'type': 'POST',
            'contentType': 'application/json; charset=utf-8',
            'data':function(data)
             {
                   return data = JSON.stringify(data);
             }
        },
        'pagingType': 'simple',
        [more options ...]
    }
$('table').dataTable(opts);

The data is now send as Json and the ModelBinder will fill in your deep nested object properties. Don't forget to set the contentType to "application/json; charset=utf-8"

Leo Gerber
  • 485
  • 6
  • 15