This takes the supplied table variable, loops through all the nodes in the table, and returns an array with any nodes that currently have the ‘row_selected’ class. Since we are only allowing single selection the array will only have one element, but you can see how multi row selection could be supported here.

Running the project now will allow you to select a row, and then show the edit/delete links populate the forms with their current values, but no actions have been defined yet.

Here we see our edit/update form JavaScript. The beforeSubmit function is optional, but here we are using the jQuery BlockUI library to put an animated wait image on the form while it is processing.

The success function first calls the BlockUI’s unblock function, which removes the animated icon, then closes the form. Next is tries to find an existing row by using the jQuery ID selector, if no existing match is found we know this is a new item (create) so we trigger a redraw of the table. If we do find a match we know this is an existing item that has been updated, so we use are fnGetSelected function to find the selected row, then use the DataTables fnUpdate function to update the existing record. In this case we are passing the entire upated row, however DataTables will allow you to update a specific cell (see http://datatables.net/ref#fnUpdate for more on fnUpdate).

The last part of the edit form handler is the error function. Here we simply display a message ‘error’ and unblock the form.

The major difference here is the success function. Here we take the result of the controller action and replace the row with *Deleted* placeholders for the row.

That takes care of all the code for the Index.cshtml, but we need to add our controller functions. If you recall we set the action properties of our forms to “AjaxCreateOrEdit” and “AjaxDelete”. Open the EditController so we can add these actions.