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

Part 3 : Creating the Back End Using ASP.NET MVC

The are 2 ways we can pass data to and from ASP.NET MVC to Angular:
1. By BootStrapping = Using cshtml
2. By Angular $http Service = In this tutorial, we will use this.

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

NOTE: We are not going to use Web Api. We will use the Controller to communicate with the AngularJS.

The File Structure
This is how we are going to structure our project.



Creating ASP.NET MVC BACK END

1. Create the Contact.cs POCO
   Create this file under the Models folder. This will be use to store contact information.
2. Install the EntityFramework
   Using Manage NuGet Package, install the EntityFramework.
3. Create the ContactContext.cs
   Create this file under Models folder. 
4. Create Json Camelcase Resolver to convert JSON to Camelcase format.
   The AngularJS uses camelcase so we need to a Json converter to convert Pascal case (from C#) to camelcase.
   Create a Helper folder (as shown in the file structure above) and add a controller named JsonController.cs.
5. Create the ContactController.cs
   This is where we will be having data exchange with AngularJS.
   Under the Controllers folder. Right click on it and add empty controller. Name it as ContactController. Notice that this controller inherits from the JsonController which is the Json camelcase resolver.

Part 4 : Communicating with ASP.NET MVC