.NET Development Examined

MVC and DataTables Part III

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.

<!-- Form for Editing record --> <div id="dialog-edit" title="Edit/Create item"> <form id="ajax-edit-form" action="@Url.Action("AjaxCreateOrEdit", "Edit")" method="post" data-ajax="true"> <input id="edit-EmployeeID" name="edit-EmployeeID" type="hidden" /> <table> <tr> <td>Name</td> <td> <input id="Name" name="Name" type="text" value="" style="width:200px" data-val="true" data-val-length="Must be under 50 characters" data-val-length-max="50" data-val-required="<br>* Required" /> <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span> </td> </tr> <tr> <td>Email</td> <td> <input id="Email" name="Email" type="text" value="" style="width:200px" data-val="true" data-val-length="Must be under 50 characters" data-val-length-max="50" data-val-required="<br>* Required" data-val-regex="<br>Not valid - must be in format 'john@doe.com'" data-val-regex-pattern="^([a-zA-Z0-9_\-\.]+)@@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$" /> <span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span> </td> </tr> <tr> <td>Phone</td> <td> <input id="Phone" name="Phone" type="text" value="" style="width:200px" data-val="true" data-val-length="Expecting Phone number 999-999-9999" data-val-length-max="12" data-val-required="<br>* Required" /> <span class="field-validation-valid" data-valmsg-for="Phone" data-valmsg-replace="true"></span> </td> </tr> <tr> <td></td> <td> <input type="submit" value="Save" /> </td> </tr> </table> </form> </div>

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.

Next we have the inputs for Name, Email, and Phone. These inputs are decorated with the HTML5 data- attributes to trigger client side validation. Note, to complete the validation we will also need to include some JavaScript libraries (we’ll do that later). Take a moment to look at the different data- tags. We can see that to make a field required we simply add the data-val=”true”. The error message for a required values is determined by the data-val-required=”error message” tag. We can also see how to handle length, and regular expression validation, each with their own error message.

The delete form is much simpler, but follows the same format:

<!-- Form for deleting record --> <div id="dialog-delete" title="Delete Player"> <form id="ajax-delete-form" action="@Url.Action("AjaxDelete", "Edit")" method="post" data-ajax="true"> <input id="delete-EmployeeID" name="delete-EmployeeID" type="hidden" /> Are you sure you want to delete the record:<br /> "<span id="delete-name" ></span>" <p></p> <input type="submit" value="Delete" /> </form> </div>

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.

Next Page


Add Comment