MVC with jEditable and dataTables plugin for jQuery

Sunday, February 12, 2012

DataTables is a great tool for web developers to present snazzy grid of data to the users. It turns a plain old HTML table to a highly interactive spreadsheet-like interface.

And adding an "edit-in-place" interface would certainly make it more user-friendly than the standard scaffolder-generated interfaces...We will use jEditable for this purpose.

Data Model For Code-First Approach

Our data model looks like this:
model

Scaffolder Output

Using MVC's scaffolder, we will then be able to obtain a working web page that lists our model in a tabular form, with CRUD functions.

which was generated by the Index method of our controller

Now Enter dataTables and jEditable

DataTables' parameter

Then, we will create a placeholder for receiving dataTables' request parameters documented here.

View Changes

In order to make dataTables and jEditable work, we need to reference some scripts

We also need to make changes to our .cshtml file
Before:

After:

New Controller Method For dataTables

As documented in dataTables website, we need to create a method that returns a JSON object for our datatable to consume. Scott Gu has just blogged about the release of MVC 4 Beta wherein it includes a new feature called ASP .Net Web API. These methods would be a very good candidate to be ported into this new style of developing consumable methods. Anyway, here is the method to return a list of our data model

Since we are using Code-First approach, I wasn't able to make the search component to use a compiled LINQ approach. Apparently, this is still a limitation that will soon be resolved???