Asp.net using JQuery Datatables 1.10 plugin and AJAX

Have you ever tried using the latest version of the datatables JQuery plugin together with ASP.net? You might get frustated!

If you are using the datatables plugin together with ASP.net MVC and don’t use any AJAX calls, you probably won’t run into any troubles. The plugin is super easy to use. To add it to your tables on your site you only need one line of JQuery:

$('table').dataTable();

You will find a pretty good examples on the datatables project website.

Datatables-JQuery-Plugin

So what’s the problem here?

If you try to use the datatables version 1.10 plugin in conjunction with AJAX it gets a little bit difficult. You might try something like this:

Javascript:

var cssRocks =	{    
	'opts':	{
		'tables':	{ 
			'ajax':	{
				'url': 'serverSideTableProviderPage',
				'type': 'POST',
			},
			'pagingType':	'simple',
			'order':		[[0,'asc']],
			'pageLength': 100,
			'columns':	{[
				'data':    'column1',
				'data':    'column2'
			]}
		}
	},
	'makeTablesAwsome':    function(opts) {
		$('table').dataTable(opts);
	}
} 
$(document).ready(function () {
    cssTricks.makeTablesAwsome(cssTricks.opts.tables);
});

C#:

namespace cssRocks.Controllers
{
    public class RockController : Controller
    {
        public ActionResult serverSideTableProviderPage()
        {
            //load the table
            
            return View(tableModel);
        }
        [HttpPost]
        public JsonResult serverSideTableProviderPage(ViewModel tableData)
        {
            //process tableData
            
            return Json(tableModel,JsonRequestBehavior.DenyGet);
        }
    }
}

namespace cssRocks.Models
{
    public class ViewModel
    {
        public IEnumerable<DTColumn> columns {get; set;}
        public int draw { get; set; }
        public int length { get; set; }
        public IEnumerable<DTOrder> order { get; set; }
        public DTSearch search { get; set; }
    }
    public class DTSearch
    {
        public bool regex {get; set;}
        public string value {get; set;}
    }
    [...]
}

What you would expect is that the data that is send to the action “serverSideTableProviderPage” and the POST parameters coming from the datatables plugin are getting mapped to the “ViewModel”.

What actually happens is that only the fields “draw” and “length” receive values. The rest of the fields – the deep nested ones- are all receiving null as value from the default ModelBinder.

What’s the source of all problems?

ASP can’t process the data that is send by the datatables plugin. The data has the followering format:


columns[0][data]            column1
columns[0][name]
columns[0][orderable]        true
columns[0][search][regex]    false
columns[0][search][value]
columns[0][searchable]        true
columns[1][data]            column2
columns[1][name]
columns[1][orderable]        true
columns[1][search][regex]    false
columns[1][search][value]
columns[1][searchable]        true
draw                        1
length                        100
order[0][column]            0
order[0][dir]                asc
search[regex]                false
search[value]
start                        0

The datatables plugin sends the POST parameters with indexes that ASP.net can’t process.

Let’s take a look at the data field search

The search field was mapped as a complex type in our model. And we can see that it has two subfields: value and regex.
But ASP.net is actually seeing two fields named “search[value]” and “search[regex]”. ASP.net doesn’t recognize the search field as field with two subfields. And that’s why our complexType search doesn’t receive any data.

 

The Solution

The solution is super simple and easy to implement. You just have to transform the data that is send by the datatables plugin to the right form. Sounds difficult? It isn’t!

Javascript:

var cssRocks =	{    
	'opts':	{
		'tables':	{ 
			'ajax':	{
				'url': 'serverSideTableProviderPage',
				'type': 'POST',
				'data':function(data)
                 {
                       return data = JSON.stringify(data);
                 }
			},
			'pagingType':	'simple',
			'order':		[[0,'asc']],
			'pageLength': 100,
			'columns':	{[
				'data':    'column1',
				'data':    'column2'
			]}
		}
	},
	'makeTablesAwsome':    function(opts) {
		$('table').dataTable(opts);
	}
} 
$(document).ready(function () {
    cssTricks.makeTablesAwsome(cssTricks.opts.tables);
});

This way, the data is send as JSON string. The rest is “magic”. Just kidding. ASP.net will notice that you are sending the data as JSON. The data will be mapped correctly to your fields in your model. Even the deep nested fields!

UPDATE
I will post a fully working example which shows how to put all this together in the next days. Having the data from DataTables in your receiving model is one step. How to query your DBModel is another problem which has to be solved. Stay tuned!

Css3 Content Slider with Pagination

Css3 Content Slider with Pagination

By Leo Gerber

Css3 is a big step forward for people building the web. Still many developers think that css3 is just about adding some nice borders and shadows to your elements on a site. Others might think, oh yeah cool they have animations, but honestly who cares?

But did you know that those animations could replace your javascript code for content sliders? Did you know that css3 animations are running smoother than javascript and even smoother as butter? Hell Yes!

css3 content slider playing

css3 content slider playing

To build a content slider in css we have to use some tricks and one has to say that the css code is pretty long compared to the code needed for the one or other content slider written in javascript. Browser coverage is also a big concern. The content slider we are going to build, will only run in Firefox and Chrome. The Internet Explorer 9 and Opera in it’s latest version(11.62) are not supported, allthough at least the pagination works in both. Opera introduces keyframe animation in version 12, which means the slider should run in later versions of Opera too.

The css of the content slider is based on two ideas. The first idea is from smashingmagazine.com and comes from an article by Alessio Atzeni. He has build a content slider, which is already having all the nice animation stuff we would like to have. But there is one thing missing: controls!

This will lead to the second idea on which the content slider is based on: creativejuiz.fr (the site is in english) . This content slider made by Geoffrey Crofte has navigation in it, although it is not really behaving the way we would like to have it. When clicking on the play pause buttons after choosing a page the autoplay animation starts on a different sheet. That could be quite confusing for a user. But the technique used for the slider – which is explained here – enables the possibility to us, to react on the behavior of the user.

Css3 Content Slider Paused

Css3 Content Slider Paused

Combining the two techniques, we get a content slider which has the followering features:

  • play
  • pause
  • go to _nth sheet
  • nice smooth animation
  • no javascript

If you read the articles linked above and check the code for the content slider, you will pretty fast understand the way it works. That’s the reason why I am not going to make a tutorial out of this article. Anyway if you guys really need/want a tutorial, leave a comment below. I’ ll try to write one.

Go to the Preview

Download the Content Slider