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.

   	namespace Contacts.Models
   	{
   	public class Contact
   	{
   	public int Id {get;set;}
   	public string FirstName { get; set; }
   	public string LastName { get; set; }
   	public string Email { get; set; }
   	public string Mobile { get; set; }
   	}
   	}

   view raw Contact.cs hosted with ❤ by GitHub
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.

   	using Newtonsoft.Json;
   	using Newtonsoft.Json.Serialization;
   	using System;
   	using System.Net;
   	using System.Web.Mvc;
   	namespace Contacts.Helpers
   	{
   	public class JsonController : Controller
   	{
   	//
   	// GET: /Json/
   	public new ActionResult Json(object data, JsonRequestBehavior behavior)
   	{
   	var jsonSerializerSetting = new JsonSerializerSettings
   	{
   	ContractResolver = new CamelCasePropertyNamesContractResolver()
   	};
   	if (Request.RequestType == WebRequestMethods.Http.Get && behavior == JsonRequestBehavior.DenyGet)
   	{
   	throw new InvalidOperationException("GET is not permitted for this request.");
   	}
   	var jsonResult = new ContentResult
   	{
   	Content = JsonConvert.SerializeObject(data, jsonSerializerSetting),
   	ContentType = "application/json"
   	};
   	return jsonResult;
   	}
   	}
   	}

   view raw JsonController.cs hosted with ❤ by GitHub
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.

   	using Contacts.Helpers;
   	using Contacts.Models;
   	using System.Web.Mvc;
   	namespace Contacts.Controllers
   	{
   	public class ContactController : JsonController
   	{
   	private ContactContext ContactsDB = new ContactContext();
   	public ActionResult GetContacts()
   	{
   	var Contacts = ContactsDB.Contacts;
   	return Json(Contacts, JsonRequestBehavior.AllowGet);
   	}
   	}
   	}

   view raw ContactController.cs hosted with ❤ by GitHub

   Notice that this controller inherits from the JsonController which is the Json camelcase resolver.

Part 4 : Communicating with ASP.NET MVC