Creating CRUD Application with ASP.NET MVC 5, AngularJS, BootStrap 3, and HTML5 - Part 5

Part 5 – The Add, Update, and Delete modules

We already have the skeleton and we already tried pulling data from the back end.  The next things would be easier. All we have to do is add more  functions to our existing modules.

Complete Series:
Part 1 – Preparing the Skeleton
Part 2 – Preparing the views of the Contact Page using HTML5, BootStrap 3, and AngularJS
Part 3 : Creating the Back End Using ASP.NET MVC
Part 4 : Communicating with ASP.NET MVC
Part 5 – The Add, Update, and Delete modules

Download the Complete Source Code

Lets get going:

1. On the ContactController.cs (ASP.NET MVC - back end). Add the methods for AddContact, UpdateContact, and DeleteContact.
   See the code snippet below.
2. Under the App->DataService folder, edit the contactDataService.js to support add, edit, and update functions.
   See the code snippet below.
3. Under the App->contact->controller folder, edit/replace the contactController.js with code snippet blow.
   
   
4. Open the contactForm.html under App->contact->html. You can replace it with the code snippet below or edit the Cancel, Save and Delete portion to work with the contactController.
5. Open the clientRoute.js under App folder.
   Add the controller for the contactForm. After this, you can start adding contacts.

Finalizing the Edit Module

1. Open the contactsList.html under App->contact->html folder.
   Go to the Table tag add 1 column for the Edit button. See code snippet below.
2. Open the clientRoute.js under App folder.
   Add the route for the edit function.

Finalizing the Delete Module
The delete module is incorporated in the edit module. The delete button will show as long as the user does not  edit any data. It uses modal for confirmation.

Let's finalize it.
Add the deleteModal.html template under App->contact->html folder.

Ok. Finally. It's Done.

I hope this is a great help specially if your starting with Angular and ASP.NET MVC. Please leave comments.