TexasJetter
.NET Development Examined

MVC and DataTables Part III Page 3


Monday, December 19, 2011

The final piece of the selection process it the fnGetSelected function.

//--------------------------------------------------------------------------- // Function to get the rows which are currently selected //--------------------------------------------------------------------------- function fnGetSelected(oTableLocal) { var aReturn = new Array(); var aTrs = oTableLocal.fnGetNodes(); for (var i = 0; i < aTrs.length; i++) { if ($(aTrs[i]).hasClass('row_selected')) { aReturn.push(aTrs[i]); } } return aReturn; }

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.

//--------------------------------------------------------------------------- // Add JavaScript to handle AJAX post actions for Edit/Update //--------------------------------------------------------------------------- $('#ajax-edit-form').ajaxForm({ clearForm: true, resetForm: true, beforeSubmit: function () { //Disable dialog and throw up wait animation $("#dialog-edit").block({ message: '<img src="/Content/images/loadera32.gif" alt="Saving"> Saving...', overlayCSS: { backgroundColor: '#E4E8EC'} }); }, success: function (result) { //Reset and Close the upload dialog $("#dialog-edit").unblock(); $('#dialog-edit').dialog('close'); //Update the existing fields with the new values var id = result.EmployeeID; if ($('#row-' + id).text() == "") { //This is a new item, add it to the end display table oTable.fnDraw(); } else { //This is an existing item, update it - http://datatables.net/ref#fnUpdate var anSelected = fnGetSelected(oTable); oTable.fnUpdate(result, anSelected[0],0,false,false); } }, error: function () { window.alert('error'); $("#dialog-edit").unblock(); } });

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 delete form handler is very similar:

//--------------------------------------------------------------------------- // Add JavaScript to handle AJAX post actions for Delete //--------------------------------------------------------------------------- $('#ajax-delete-form').ajaxForm({ clearForm: true, resetForm: true, beforeSubmit: function () { //Disable dialog and throw up wait animation $("#dialog-delete").block({ message: '<img src="/Content/images/loadera32.gif" alt="Saving" /> Deleting...', overlayCSS: { backgroundColor: '#E4E8EC'} }); }, success: function (result) { //Reset and Close the upload dialog $("#dialog-delete").unblock(); $('#dialog-delete').dialog('close'); //Replace existing row with deleted indicator var id = result; $('#row-' + id).replaceWith("*Deleted**Deleted**Deleted**Deleted*"); }, error: function () { window.alert('error'); $("#dialog-delete").unblock(); } }); //---------------------------------------------------------------------------

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.

Next Page


Comments

Add Comment