Monday, December 19, 2011
Last time we looked at getting DataTables to work with AJAX to retrieve just the records we are interested in viewing. This allowed us to minimize the traffic sent across the wire to our client. It also increased the responsiveness of our UI. But data is seldom static, so we need a way to create/update/ delete our information. All together now, say ‘aw CRUD!'
If you look at the DataTable documentation is has a sample (not MVC) showing how to use jEditable for in place updating. This technique essentially allows you to click on any “cell” and edit it. I wanted to go a different route and have a “pop-up” editing form displayed. To accomplish this I utilized the jQuery Form plug-in. This plug-in allows us to define an edit and delete form which is initially hidden, and only displayed when we are performing a create/update/delete action. There will be a fair amount of code when we are done, so this may take a couple of posts. The first thing to do is fire up Visual Studio and get coding!
(If you can't wait until the end you can download the code here)
Most of the work will be done on our Index page. First we need to get our data entry forms established, so at the end of the page (after the table place holder) add a new form for editing.
Lets’ take a minute and look at the form. We wrap the entire form in a <div> tag, which is what the jQuery Form plug-in will use to locate and hide the form. Next we define the <form> with an action which points to the AjaxCraeteOrEdit method that we will create in our Edit controller. We also need to decorate it with the ‘data-ajax=true’ property, otherwise when we submit the form it will trigger a full post back.
Next we have <input> tag for the employee id, which we decorate with the hidden property. This will allow us to have access to the employee id when the form is submitted, but it will not be visible on the screen.
The delete form is much simpler, but follows the same format:
The major difference here (aside from the id names) is the action points to the ‘AjaxDelete’ and we are just showing the Name for confirmation.
If we run the project now we would see both the create/update form and the delete form below our table. Obviously we don’t want to see these unless we are actively using them, so let’s fire up some jQuery magic.