Tutorial 32 - Angularjs MVC RESTful Web Service example

 Angularjs MVC RESTful Web Service example

This example shows how to create a simply web application using angularjs, mvc, RESTful Web Service and ORM Entity Framework, I named it is “manage customer”.


List of features:

•     List customer
•     Edit customer
•     Create new customer
•     Delete customer

List of projects of “manage customer” application:

1.     CustomerEntities (Entity Framework 6.0.0.0)
2.     CustomerDAL (c# class library)
3.     CustomerBLL (c# class library)
4.     CustomerAPI (RESTful web service)
5.     CustomerUI (AngularJs, MVC)

Notes that in customer UI will be no C# controller file, it is be replaced by angularjs script file. CustomerAPI will works with CustomerBLL to controll business logic, CustomerBLL reference data layer (CustomerDAL) and CustomerDAL works CustomerEntities to query data.
OK now we focus step by step to know it.

Step 1: Create database for “manage customer” application
In this example I don’t using “code first” method so we need to create database first. This database has one “Customer” table with structure as following


Step 2:  Create CustomerEntities project using Entity Framework.

CustomerEntities be using orm Entity Framework to work with database.
On visual studio 2013 add a Class Library via name is “CustomerEntities”
Step 2.1:  File=> New project => Visual c# => Class Library=>input CustomerEntities to “Name:” => OKA class library project via named “CustomerEntities” is created.
Step 2.2:  Add an “Entities” folder to “CustomerEntities”, remove “Class1.cs” files
Step 2.3:  Right click “Entities” => add new item=> Data => ADO.Net Enity Data Model=>Add=> EF Designer from database => Click next =>

Click OK =>

Click next

Choose tables
=> Click “Finish”
Step 2.4: Add a partial class DbContext, in this case it is “ManageCustomersEntities” class
This class is added to Entities folder via following definition

 using System;   
  using System.Collections.Generic;   
  using System.Linq;   
  using System.Text;   
  using System.Threading.Tasks;   
  namespace CustomerEntities.Entities   
  {   
    public partial class ManageCustomersEntities   
    {   
     public ManageCustomersEntities(string connectionString)   
      : base(connectionString)   
     {   
     }   
    }   
  }   

Now project structure will be.




Step 3:  Create CustomerDAL project
On visual studio 2013 add a ClassLibrary via name is “CustomerDAL”
Step 3.1:  File=> New project => Visual c# => Class Library=>input CustomerDAL to “Name:” => OK
=>A class libaray project via named “CustomerDAL” is created.
Step 3.2:  Add reference “CustomerEntities” project to this.
Step 3.3:  Add “BaseDal” class to project to initial the ManageCustomersEntities.

 using System;   
  using System.Collections.Generic;   
  using System.Linq;   
  using System.Text;   
  using System.Threading.Tasks;   
  using CustomerEntities.Entities;   
  using System.Configuration;   
  namespace CustomerDAL   
  {   
   class BaseDal   
   {   
    public ManageCustomersEntities _entities;   
    static string _connectionString;   
    public static string ConnectionString   
    {   
     get   
     {   
      if (string.IsNullOrEmpty(_connectionString) == false)   
       return _connectionString;   
      _connectionString = System.Configuration.ConfigurationManager.ConnectionStrings["ManageCustomersEntities"].ConnectionString; //   
      return _connectionString;   
     }   
    }   
    public BaseDal()   
    {   
     _entities = new ManageCustomersEntities(ConnectionString);   
    }   
   }   
  }   

Step 3.4 Add “CustomerDal” which inherit from BaseDal
-    The first, using Magane Nutget Package to install EntityFramework for CustomerDAL
-    Add CustomerDal via following code:

 using System;   
  using System.Collections.Generic;   
  using System.Linq;   
  using System.Text;   
  using System.Threading.Tasks;   
  using CustomerEntities.Entities;   
  namespace CustomerDAL   
  {   
   class CustomerDal   
   {   
    public Customer[] GetALL()   
    {   
     ManageCustomersEntities ctx = new ManageCustomersEntities();   
     return ctx.Customers.ToArray();   
    }   
    public Customer GetByID(int id)   
    {   
     ManageCustomersEntities ctx = new ManageCustomersEntities();   
     return ctx.Customers.Where(c => c.ID == id).ToArray()[0] as Customer;   
    }   
    public bool Insert(Customer cus)   
    {   
     try   
     {   
      ManageCustomersEntities ctx = new ManageCustomersEntities();   
      ctx.Customers.Add(cus);   
      ctx.SaveChanges();   
      return true;   
     }   
     catch   
     {   
      return false;   
     }   
    }   
    public bool Update(int id, Customer cus)   
    {   
     try   
     {   
      using (ManageCustomersEntities ctx = new ManageCustomersEntities())   
      {   
       var _ob = ctx.Customers.SingleOrDefault(b => b.ID == id);   
       if (_ob != null)   
       {   
        _ob.Name = cus.Name.Trim();   
        _ob.Phone = cus.Phone.Trim();   
        _ob.Email = cus.Email.Trim();   
        _ob.Address = cus.Address.Trim();   
        ctx.SaveChanges();   
       }   
      }   
      return true;   
     }   
     catch   
     {   
      return false;   
     }   
    }   
    public bool Delete(int id)   
    {   
     try   
     {   
      using (ManageCustomersEntities ctx = new ManageCustomersEntities())   
      {   
       var _ob = ctx.Customers.SingleOrDefault(b => b.ID == id);   
       if (_ob != null)   
       {   
        ctx.Customers.Remove(_ob);   
        ctx.SaveChanges();   
       }   
      }   
      return true;   
     }   
     catch   
     {   
      return false;   
     }   
    }   
   }   
  }   

Step 4:  Create CustomerBLL project

On visual studio 2013 add a Class Library via name is “CustomerDAL”
Step 4.1:  File=> New project => Visual c# => Class Library=> input CustomerBLL to “Name:” => OK
=> A class library project via named “CustomerBLL” is created.
Step 4.2:  Add reference “CustomerEntities” and “CustomerDAL” projects to this.
Step 4.3 Add “CusBLL” class via following code

 using System;   
  using System.Collections.Generic;   
  using System.Linq;   
  using System.Text;   
  using System.Threading.Tasks;   
  using CustomerEntities.Entities;   
  using CustomerDAL;   
  namespace CustomerBLL   
  {   
   public class CusDLL   
   {   
    public Customer[] GetAll()   
    {   
     CustomerDal CusDAL = new CustomerDal();   
     return CusDAL.GetALL();   
    }   
    public Customer GetById(int id)   
    {   
     CustomerDal CusDAL = new CustomerDal();   
     return CusDAL.GetByID(id);   
    }   
    public void Insert(Customer cus)   
    {   
     CustomerDal CusDAL = new CustomerDal();   
    }   
    public void Update(Customer cus, int id)   
    {   
     CustomerDal CusDAL = new CustomerDal();   
     CusDAL.Update( id,cus);   
    }   
    public void Delete(int id)   
    {   
     CustomerDal CusDAL = new CustomerDal();   
     CusDAL.Delete(id);   
    }   
   }   
  }   

The solution will be as below:

Step 5: Create CustomerAPI (RESTful web service)
On visual studio 2013 add a ClassLibrary via name is “CustomerDAL”
File=> New project => Visual c# => Class Library=> input CustomerAPI to “Name:” => OK
Step 5.1: Add references
•    Add “CustomerEntities” and CustomerBLL project to this
•    Add System.Web.Http and System.Net.Http
Step 5.2:  Add “Controllers” folder and then add “CustomerAPIController.cs” to this folder.
Step 5.3 In “CustomerAPIController.cs” implement Get, Post, Delete RESTful webservice methods.
Code of this class as below:

 using System;   
  using System.Collections.Generic;   
  using System.Linq;   
  using System.Text;   
  using System.Threading.Tasks;   
  using System.Web.Http;   
  using System.Net.Http;   
  using CustomerEntities.Entities;   
  using CustomerBLL;   
  namespace CustomerAPI.Controllers   
  {   
   public class CustomerAPIController : ApiController   
   {   
    public CustomerAPIController()   
    {   
    }   
    [AllowAnonymous]   
    public Customer[] Get()   
    {   
     var cusDLL = new CusDLL();   
     return cusDLL.GetAll();   
    }   
    [HttpPost]   
    public HttpResponseMessage Post(Customer customer)   
    {   
     var cusDLL = new CusDLL();   
     if (customer.ID == 0)   
     {   
      cusDLL.Insert(customer);   
     }   
     else   
     {   
      cusDLL.Update( customer,customer.ID);   
     }   
     HttpResponseMessage response = Request.CreateResponse<Customer>(System.Net.HttpStatusCode.Created, customer);   
     return response;   
    }   
    // DELETE api/values/5   
    [HttpDelete]   
    public virtual HttpResponseMessage Delete(int id)   
    {   
     var cusDLL = new CusDLL();   
     if (id != 0)   
     {   
      cusDLL.Delete(id);   
     }   
     HttpResponseMessage response = Request.CreateResponse<int>(System.Net.HttpStatusCode.Created, id);   
     return response;   
    }   
    // GET api/values/5   
    public string Get(int id)   
    {   
     return "value";   
    }   
    // PUT api/values/5   
    [HttpPut]   
    public void Put(int id, [FromBody]string value)   
    {   
    }   
   }   
  }   

OK now I’ve done CustomerAPI (RESTful web service), next step will UI of application.

Step 6: CustomerUI (AngularJs, MVC)

Step 6.1:  File=> New project => Visual c# => ASP.Net Web Application=> input CustomerUI to “Name:” => OK

Choose Web API anf then click OK
Now solution structure will be as below:

Step 6.1: Move c# controller to CustomerAPI class library.

Our goal is no c# controller and model files in CustomerUI, so we will move all of c# controller  and model  files to CustomerAPI
Now have no controller and model in CustomerUI.

Step 6.2: On CustomerAPI add SetupController.cs at root

 using System;   
  using System.Collections.Generic;   
  using System.Linq;   
  using System.Text;   
  using System.Threading.Tasks;   
  using System.Web.Routing;   
  using System.Web.Mvc;   
  namespace CustomerAPI   
  {   
   public class SetupController   
   {   
    public static void Setup()   
    {   
     SetupControllers();   
    }   
    private static void SetupControllers()   
    {   
     ControllerBuilder.Current.DefaultNamespaces.Add("CustomerAPI.Controllers");   
    }   
   }   
  }   

This code will make controller builder for namespace "CustomerAPI.Controllers" which is namesapce of HomeController  and ValuesController.

Step 6.3: On CustomerUI modify Global.asax.cs as following code

 using System;   
  using System.Collections.Generic;   
  using System.Linq;   
  using System.Web;   
  using System.Web.Http;   
  using System.Web.Mvc;   
  using System.Web.Optimization;   
  using System.Web.Routing;   
  using CustomerAPI;   
  namespace CustomerUI   
  {   
   public class WebApiApplication : System.Web.HttpApplication   
   {   
    protected void Application_Start()   
    {   
     CustomerAPI.SetupController.Setup();   
     AreaRegistration.RegisterAllAreas();   
     GlobalConfiguration.Configure(WebApiConfig.Register);   
     FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);   
     RouteConfig.RegisterRoutes(RouteTable.Routes);   
     BundleConfig.RegisterBundles(BundleTable.Bundles);   
    }   
   }   
  }   

Step 6.4: Run CustomerUI make sure that home page is displayed without error.

Step 7:  Add angularJs and build UI for application

Now we ready to build UI for this application

Step 7.1:  Add angularJs to application
Find View->Shared-> _Layout.cshtml
Add following code in <head> tag

 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>  

Step 7.2:  Modify _Layout.cshtml
-    Change application name

@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })

Change to
@Html.ActionLink("Manage Customer", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })

-    Add Customer Action link

 <ul class="nav navbar-nav">   
       <li>@Html.ActionLink("Home", "Index", "Home", new { area = "" }, null)</li>   
       <li>@Html.ActionLink("API", "Index", "Help", new { area = "" }, null)</li>   
  </ul   

>
Change to

 <ul class="nav navbar-nav">   
       <li>@Html.ActionLink("Home", "Index", "Home", new { area = "" }, null)</li>   
       <li>@Html.ActionLink("API", "Index", "Help", new { area = "" }, null)</li>   
       <li>@Html.ActionLink("Customers", "Index", "Customer", new { area = "" }, null)</li>   
  </ul>   

Step 7.3:  Add Customer controller for “Manage cutomer” action link
On CustomerAPI project  add CustomerController.cs to Controller folder

 using System;   
  using System.Collections.Generic;   
  using System.Linq;   
  using System.Web;   
  using System.Web.Mvc;   
  namespace CustomerUI.Controllers   
  {   
   public class CustomerController : Controller   
   {   
    public ActionResult Index()   
    {   
     ViewBag.Title = "Customer Page";   
     return View();   
    }   
   }   
  }   

Step 7.4:  Add view for “Manage cutomer” action link

On CustomerUI add Index.cshtml “View-> Customer-> Index.cshtml”
The Index.cshtml will be contains two parts: one is list of customer and one is create or edit form, so I’ll create two html files:  “list_.html “ will be list of customers and “Create_.html” will be create new or edit customer.
And the Index.cshtml code will be as below:

 @{   
   ViewBag.Title = "Index";   
   Layout = "~/Views/Shared/_Layout.cshtml";   
  }   
  <br />   
  <br />   
  <div ng-app="mycustomersApp" ng-controller="customersCtrl">   
   <div class="container">   
    <div ng-include="'/Templates/list_.html'">aa</div>   
    <div ng-include="'/Templates/Create_.html'">aab</div>   
   </div>   
  </div>   
  <script src="~/AppScripts/customer.js"></script>   

Note that: appscripts/customers.js will be created in next step. This script will be dedine AngularJS app as “mycustomersApp” and angularJs controller as “customersCtrl”.

Step 7.5:  Add “customers.js”
On CustomerUI project create “AppScripts” folder
Add “customers.js” to this folder via below code:

 var module = angular.module('mycustomersApp', []);   
  module.controller('customersCtrl', function ($scope, $http) {   
   // Get customer list   
   $http.get("/api/customerapi")   
   .success(function (response) {   
    $scope.Customer = response   
   });   
   // Initial   
   $scope.edit = true;   
   $scope.error = false;   
   $scope.incomplete = false;   
   // Edit   
   $scope.editCustomer = function (id) {   
    if (id == 'new') {   
     $scope.edit = true;   
     $scope.incomplete = true;   
     $scope.ID = 0;   
     $scope.Name = '';   
     $scope.Phone = '';   
     $scope.Address = '';   
     $scope.Email = '';   
    } else {   
     $scope.edit = false;   
     $scope.ID = $scope.Customer[id].ID;   
     $scope.Name = $scope.Customer[id].Name.trim();   
     $scope.Phone = $scope.Customer[id].Phone.trim();   
     $scope.Address = $scope.Customer[id].Address.trim();   
     $scope.Email = $scope.Customer[id].Email.trim();   
     $("#idEmail").val($scope.Email.trim());   
     $scope.incomplete = false;   
    }   
   };   
   // Update or add new one    
   $scope.PostCustomer = function () {   
    $.post("api/customerapi",   
       $("#cusForm").serialize(),   
       function (value) {   
        // Refresh list   
        $http.get("/api/customerapi")   
        .success(function (response) {   
         $scope.Customer = response   
        });   
        alert("Saved successfully.");   
       },   
       "json"   
      );   
   }   
   // Delete one customer based on id.   
   $scope.delCustomer = function (id) {   
    if (confirm("Are you sure you want to delete this customer?")) {   
     // todo code for deletion   
     $http.delete("api/customerapi/" + id).success(function () {   
      alert("Deleted successfully.");   
      // Refresh list   
      $http.get("/api/customerapi")   
      .success(function (response) {   
       $scope.Customer = response   
      });   
     }).error(function () {   
      alert("Error.");   
     });   
    }   
   };   
  });   

This script define all actions for customer page (get list, add new, edit and delete customer)

Step 7.6:  Add “list_.html” and “Create_.html'
On CustomerUI project create “Templates” folder
-    Add “list_.html” to this folder via below code:

 <h3>List Customers</h3>   
  <table class="sample-show-hide table ">   
   <thead>   
    <tr>   
     <th>Edit</th>   
     <th>Name</th>   
     <th>Phone</th>   
     <th>Address</th>   
     <th>Email</th>   
    </tr>   
   </thead>   
   <tbody>   
    <tr ng-repeat="c in Customer">   
     <td ng-class-odd="'odd'">   
      <button class=" btn" ng-click="editCustomer($index)">   
       <span class="glyphicon glyphicon-pencil" style="color:blue"></span>&nbsp;&nbsp;Edit   
      </button>   
      <button class="btn" ng-click="delCustomer(c.ID)">   
       <span class="glyphicon glyphicon-remove" style="color:red"></span>&nbsp;&nbsp;Delete   
      </button>   
     </td>   
     <td ng-class-odd="'odd'">{{ c.Name }}</td>   
     <td ng-class-odd="'odd'">{{ c.Phone }}</td>   
     <td ng-class-odd="'odd'">{{ c.Address }}</td>   
     <td ng-class-odd="'odd'">{{ c.Email }}</td>   
    </tr>   
   </tbody>   
  </table>   

-    Add “Create_.html” to this folder via below code:

 <button class="btn btn-success" ng-click="editCustomer('new')">   
   <span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;Create New Customer   
  </button>   
  <hr>   
  <h3 ng-show="edit">Create Customer:</h3>   
  <h3 ng-hide="edit">Edit Customer:</h3>   
  <form id="cusForm" name="cusForm" class="form-horizontal" method="post" >   
   <input type="text" hidden="hidden" ng-model="ID" name="ID">   
   <div class="form-group">   
    <label class="col-sm-2 control-label">Name:</label>   
    <div class="col-sm-10">   
     <input type="text" ng-model="Name" placeholder="Customer name" name="Name" class="my-input" required>   
     {{Name}}   
    </div>   
   </div>   
   <div class="form-group">   
    <label class="col-sm-2 control-label">Phone:</label>   
    <div class="col-sm-10">   
     <input type="text" ng-model="Phone" placeholder="Phone" name="Phone" class="my-input" required>   
    </div>   
   </div>   
   <div class="form-group">   
    <label class="col-sm-2 control-label">Address:</label>   
    <div class="col-sm-10">   
     <input type="text" ng-model="Address" placeholder="Address" name="Address">   
    </div>   
   </div>   
   <div class="form-group">   
    <label class="col-sm-2 control-label">Email:</label>   
    <div class="col-sm-10">   
     <input type="email" ng-model="Email" name="Email" placeholder="Email" id="idEmail" required class="my-input">   
     <span class="error" ng-show="myForm.input.$error.required">   
      Required!   
     </span>   
     <span class="error" ng-show="myForm.input.$error.email">   
      Not valid email!   
     </span>   
    </div>   
   </div>   
   <hr>   
  </form>   
  <button id="saveChange" class="btn btn-success" ng-disabled="error" ng-click="PostCustomer()">   
   <span class="glyphicon glyphicon-save"></span>&nbsp;&nbsp;Save Changes   
  </button>   

Step 7.7:  Link CustomerAPI to CustomerUI
Because Controller ang ControllerAPI move CustomerAPI project, so to in this step we will answer the question “How CustomerUI use CustomerAPI as its controller?”.  Please follow steps
-    Add CustomAssemblyResolver.cs in App_Start via below code:

 using System;   
  using System.Collections.Generic;   
  using System.Linq;   
  using System.Web;   
  using System.Web.Http.Dispatcher;   
  using System.Reflection;   
  using CustomerAPI.Controllers;   
  namespace CustomerUI.App_Start   
  {   
   public class CustomAssemblyResolver : IAssembliesResolver   
   {   
    public ICollection<Assembly> GetAssemblies()   
    {   
     List<Assembly> baseAssemblies = AppDomain.CurrentDomain.GetAssemblies().ToList();   
     var controllersAssembly = Assembly.LoadFrom(@"CustomerAPI.dll");   
     baseAssemblies.Add(controllersAssembly);   
     return baseAssemblies;   
    }   
   }   
  }   

-    Modify Global.asax.cs by add 

 GlobalConfiguration.Configuration.Services.Replace(typeof(IAssembliesResolver), new CustomAssemblyResolver());   

Step 7.8:  Add more CSS for “list_.html” and “Create_.html'.
Add “CustomerPage.css” file to “Content” folder of CustomerUI project

 td {   
   padding-right: 30px;   
  }   
  .red {   
   padding: 20px;   
   background-color: red;   
   color: #FFF;   
  }   
  .border {   
   border: solid 1px blue;   
  }   
  .base-class {   
   -webkit-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;   
   transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;   
  }   
   .base-class.my-class {   
    color: red;   
    font-size: 3em;   
   }   
  .odd {   
   color: #0094ff;   
  }   
  .rowEvent {   
   color: #808080;   
  }   
  .my-input {   
   -webkit-transition: all linear 0.5s;   
   transition: all linear 0.5s;   
   background: transparent;   
  }   
   .my-input.ng-invalid {   
    color: #a50e0e;   
    background: #6f041e;   
   }   
  .sample-show-hide {   
   -webkit-transition: all linear 0.5s;   
   transition: all linear 0.5s;   
   background: transparent;   
  }   

-    Modify View\Shared\_Layout.cshtml by add following code to <Head> tag.
<link href="~/Content/CustomerPage.css" rel="stylesheet" />

Step 7.9:  Add connection string to web.config of CustomerUI.
Open App.confg of CustomerEntities, copy the “connectionstrings “tag paste override exist “Connectionstirngs” of CustomerUI.
It will be like below:

 <connectionStrings>   
   <add name="ManageCustomersEntities" connectionString="metadata=res://*/Entities.Model1.csdl|res://*/Entities.Model1.ssdl|res://*/Entities.Model1.msl;provider=System.Data.SqlClient;provider connection string=&quot;data source=EZITWK106\LOCALSQL2008R2;initial catalog=ManageCustomers;persist security info=True;user id=sa;password=855554;MultipleActiveResultSets=True;App=EntityFramework&quot;" providerName="System.Data.EntityClient" />   
  </connectionStrings>   

Step 7.10: security notes.
At this application I don’t care about security for RESTFul webservice, encrypt and decrypt connection string… you can do it more to your application.
Done – Following is screen shot of Customer page.

Download soure code on GitHub angularjs mvc entity framework restful example

Thanks for your time reading. Let show your idea to me if you have and if you want.