Post
Ask Question

AngularJS CRUD Operations With Web API Using SQL Database

In this article, we will learn so many things like how to achieve CRUD operations in AngularJS with Web API using SQL Server database. This article will explain basic architecture when we work on real time project. This can be very useful for developers who are working on projects with MVC.

Getting Started

Create a new MVC project in Visual Studio 2015.

First of all, let me share my database diagram.


Now add a new Class Library using right click on solutions and select Add new project and Add New Class Library.


Select class library and give appropriate name and browse saved location.


Add connection string in App.Config

  1. <connectionStrings>  
  2.     <add name="CricketerDBEntities" connectionString="metadata=res://*/Models.CricketerModel.csdl|res://*/Models.CricketerModel.ssdl|res://*/Models.CricketerModel.msl;provider=System.Data.SqlClient;provider connection string="data source=.;initial catalog=CricketerDB;integrated security=True;MultipleActiveResultSets=True;App=EntityFramework"" providerName="System.Data.EntityClient" /> </connectionStrings>  
  3. <entityFramework>  
  4.     <defaultConnectionFactory type="System.Data.Entity.Infrastructure.SqlConnectionFactory, EntityFramework" />  
  5.     <providers>  
  6.         <provider invariantName="System.Data.SqlClient" type="System.Data.Entity.SqlServer.SqlProviderServices, EntityFramework.SqlServer" /> </providers>  
  7. </entityFramework>   

Now add a new model and context class, 

  1. public class ConnCricketerContext: DbContext   
  2. {  
  3.     public ConnCricketerContext(): base("name=CricketerDBEntities") {}  
  4.     public virtual DbSet < Cricketer_Details > Cricketer_Details {  
  5.         get;  
  6.         set;  
  7.     }  
  8.     public virtual DbSet < Cricketer_ODI_Statistics > Cricketer_ODI_Statistics {  
  9.         get;  
  10.         set;  
  11.     }  
  12.     public virtual DbSet < Cricketer_Test_Statistics > Cricketer_Test_Statistics {  
  13.         get;  
  14.         set;  
  15.     }  
  16.     public virtual DbSet < Cricketer > Cricketers {  
  17.         get;  
  18.         set;  
  19.     }  
  20. }   

These are my model classes,

  1. public partial class Cricketer {  
  2.     [Key]  
  3.     public int ID {  
  4.         get;  
  5.         set;  
  6.     }  
  7.     public string Name {  
  8.         get;  
  9.         set;  
  10.     }  
  11.     public Nullable < int > ODI {  
  12.         get;  
  13.         set;  
  14.     }  
  15.     public Nullable < int > Test {  
  16.         get;  
  17.         set;  
  18.     }  
  19. }  
  20. public partial class Cricketer_Details {  
  21.     [Key]  
  22.     public int Details_ID {  
  23.         get;  
  24.         set;  
  25.     }  
  26.     public Nullable < int > Cricketer_ID {  
  27.         get;  
  28.         set;  
  29.     }  
  30.     public string Team {  
  31.         get;  
  32.         set;  
  33.     }  
  34.     public Nullable < int > ODI_Runs {  
  35.         get;  
  36.         set;  
  37.     }  
  38.     public Nullable < int > Test_Runs {  
  39.         get;  
  40.         set;  
  41.     }  
  42.     public Nullable < int > Wickets {  
  43.         get;  
  44.         set;  
  45.     }  
  46.     public virtual Cricketer Cricketer {  
  47.         get;  
  48.         set;  
  49.     }  
  50. }  
  51. public partial class Cricketer_ODI_Statistics {  
  52.     [Key]  
  53.     public int ODI_ID {  
  54.         get;  
  55.         set;  
  56.     }  
  57.     public Nullable < int > Cricketer_ID {  
  58.         get;  
  59.         set;  
  60.     }  
  61.     public string Name {  
  62.         get;  
  63.         set;  
  64.     }  
  65.     public Nullable < int > Half_Century {  
  66.         get;  
  67.         set;  
  68.     }  
  69.     public Nullable < int > Century {  
  70.         get;  
  71.         set;  
  72.     }  
  73.     public virtual Cricketer Cricketer {  
  74.         get;  
  75.         set;  
  76.     }  
  77. }  
  78. public partial class Cricketer_Test_Statistics {  
  79.     [Key]  
  80.     public int Test_ID {  
  81.         get;  
  82.         set;  
  83.     }  
  84.     public Nullable < int > Cricketer_ID {  
  85.         get;  
  86.         set;  
  87.     }  
  88.     public string Name {  
  89.         get;  
  90.         set;  
  91.     }  
  92.     public Nullable < int > Half_Century {  
  93.         get;  
  94.         set;  
  95.     }  
  96.     public Nullable < int > Century {  
  97.         get;  
  98.         set;  
  99.     }  
  100.     public virtual Cricketer Cricketer {  
  101.         get;  
  102.         set;  
  103.     }  
  104. }   
I think let’s use View Model also J. Create a new view model class, 
  1. public class CricketerViewModel {  
  2.     public int ? Id {  
  3.         get;  
  4.         set;  
  5.     }  
  6.     public string Name {  
  7.         get;  
  8.         set;  
  9.     }  
  10.     public int ? ODI {  
  11.         get;  
  12.         set;  
  13.     }  
  14.     public int ? Test {  
  15.         get;  
  16.         set;  
  17.     }  
  18.     public Boolean Update {  
  19.         get;  
  20.         set;  
  21.     }  
  22. }  
  23. public class CricketerDetailViewModel {  
  24.     public int Id {  
  25.         get;  
  26.         set;  
  27.     }  
  28.     public int Cricketer_Id {  
  29.         get;  
  30.         set;  
  31.     }  
  32.     public string Team {  
  33.         get;  
  34.         set;  
  35.     }  
  36.     public int ODI_Runs {  
  37.         get;  
  38.         set;  
  39.     }  
  40.     public int Test_Runs {  
  41.         get;  
  42.         set;  
  43.     }  
  44.     public int Wickets {  
  45.         get;  
  46.         set;  
  47.     }  
  48. }  
  49. public class CricketerODIStatsViewModel {  
  50.     public int Id {  
  51.         get;  
  52.         set;  
  53.     }  
  54.     public int Cricketer_Id {  
  55.         get;  
  56.         set;  
  57.     }  
  58.     public string Name {  
  59.         get;  
  60.         set;  
  61.     }  
  62.     public int Half_Century {  
  63.         get;  
  64.         set;  
  65.     }  
  66.     public int Century {  
  67.         get;  
  68.         set;  
  69.     }  
  70. }  
  71. public class CricketerTestStatsViewModel {  
  72.     public int Id {  
  73.         get;  
  74.         set;  
  75.     }  
  76.     public int Cricketer_Id {  
  77.         get;  
  78.         set;  
  79.     }  
  80.     public string Name {  
  81.         get;  
  82.         set;  
  83.     }  
  84.     public int Half_Century {  
  85.         get;  
  86.         set;  
  87.     }  
  88.     public int Century {  
  89.         get;  
  90.         set;  
  91.     }  
  92. }   
Now let’s add data in view model. Let’s add one more class and add LINQ queries.
  1. using System.Collections.Generic;  
  2. using System.Linq;  
  3. using MVCUsingWebAPIWithAngularJS.BR.Models;  
  4. using MVCUsingWebAPIWithAngularJS.DataLayer.Models;  
  5. namespace MVCUsingWebAPIWithAngularJS.DataLayer {  
  6.     public class Cricketer {  
  7.         private ConnCricketerContext _dbCricketer;  
  8.         public Cricketer() {  
  9.                 //    
  10.                 _dbCricketer = new ConnCricketerContext();  
  11.             }  
  12.             /// <summary>    
  13.             /// Get Cricketers    
  14.             /// </summary>    
  15.             /// <returns></returns>    
  16.         public List < CricketerViewModel > GetCricketers() {  
  17.                 var cricketer = new List < CricketerViewModel > ();  
  18.                 cricketer = (from x in _dbCricketer.Cricketers select new CricketerViewModel() {  
  19.                     Id = x.ID,  
  20.                         Name = x.Name,  
  21.                         ODI = x.ODI,  
  22.                         Test = x.Test,  
  23.                         Update = true  
  24.                 }).ToList();  
  25.                 return cricketer;  
  26.             }  
  27.             /// <summary>    
  28.             /// Delete cricketer    
  29.             /// </summary>    
  30.             /// <param name="cricketerId"></param>    
  31.         public void DeleteCricketer(int Id) {  
  32.                 _dbCricketer.Cricketers.RemoveRange(_dbCricketer.Cricketers.Where(x => x.ID == Id));  
  33.                 _dbCricketer.SaveChanges();  
  34.             }  
  35.             /// <summary>    
  36.             /// Update cricketer    
  37.             /// </summary>    
  38.             /// <param name="assesmentViewModel"></param>    
  39.             /// <returns></returns>    
  40.         public int UpdateCricketer(CricketerViewModel cricketerViewModel) {  
  41.                 MVCUsingWebAPIWithAngularJS.BR.Models.Cricketer cricketer =  
  42.                     default (MVCUsingWebAPIWithAngularJS.BR.Models.Cricketer);  
  43.                 if (cricketerViewModel.Update) {  
  44.                     cricketer = _dbCricketer.Cricketers.Find(cricketerViewModel.Id);  
  45.                 } else {  
  46.                     cricketer = new MVCUsingWebAPIWithAngularJS.BR.Models.Cricketer();  
  47.                 }  
  48.                 //add cricketer value    
  49.                 cricketer.Name = cricketerViewModel.Name;  
  50.                 cricketer.ODI = cricketerViewModel.ODI;  
  51.                 cricketer.Test = cricketerViewModel.Test;  
  52.                 if (!cricketerViewModel.Update) {  
  53.                     _dbCricketer.Cricketers.Add(cricketer);  
  54.                 }  
  55.                 _dbCricketer.SaveChanges();  
  56.                 return cricketer.ID;  
  57.             }  
  58.             /// <summary>    
  59.             /// Detail    
  60.             /// </summary>    
  61.             /// <param name="cricketerId"></param>    
  62.             /// <returns></returns>    
  63.         public CricketerDetailViewModel Detail(int cricketerId) {  
  64.                 CricketerDetailViewModel cricketer = new CricketerDetailViewModel();  
  65.                 cricketer = (from p in _dbCricketer.Cricketer_Details.Where(x => x.Cricketer_ID == cricketerId).DefaultIfEmpty() select new CricketerDetailViewModel {  
  66.                     Cricketer_Id = (int) p.Cricketer_ID,  
  67.                         Team = p.Team,  
  68.                         ODI_Runs = (int) p.ODI_Runs,  
  69.                         Test_Runs = (int) p.Test_Runs,  
  70.                         Wickets = (int) p.Wickets  
  71.                 }).FirstOrDefault();  
  72.                 return cricketer;  
  73.             }  
  74.             /// <summary>    
  75.             /// ODI Stats    
  76.             /// </summary>    
  77.             /// <param name="cricketerId"></param>    
  78.             /// <returns></returns>    
  79.         public CricketerODIStatsViewModel ODIStats(int cricketerId) {  
  80.                 CricketerODIStatsViewModel cricketer = new CricketerODIStatsViewModel();  
  81.                 cricketer = (from p in _dbCricketer.Cricketer_ODI_Statistics.Where(x => x.Cricketer_ID == cricketerId).DefaultIfEmpty() select new CricketerODIStatsViewModel {  
  82.                     Cricketer_Id = (int) p.Cricketer_ID,  
  83.                         Name = p.Name,  
  84.                         Half_Century = (int) p.Half_Century,  
  85.                         Century = (int) p.Century  
  86.                 }).FirstOrDefault();  
  87.                 return cricketer;  
  88.             }  
  89.             /// <summary>    
  90.             /// Test Stats    
  91.             /// </summary>    
  92.             /// <param name="cricketerId"></param>    
  93.             /// <returns></returns>    
  94.         public CricketerTestStatsViewModel TestStats(int cricketerId) {  
  95.             CricketerTestStatsViewModel cricketer = new CricketerTestStatsViewModel();  
  96.             cricketer = (from p in _dbCricketer.Cricketer_Test_Statistics.Where(x => x.Cricketer_ID == cricketerId).DefaultIfEmpty() select new CricketerTestStatsViewModel {  
  97.                 Cricketer_Id = (int) p.Cricketer_ID,  
  98.                     Name = p.Name,  
  99.                     Half_Century = (int) p.Half_Century,  
  100.                     Century = (int) p.Century  
  101.             }).FirstOrDefault();  
  102.             return cricketer;  
  103.         }  
  104.     }  
  105. }  
We are done here with data model and business relation model. 

Now let’s add a new Web API in Controller folder in MVC project and add references of other created projects.

This is my Web API code.

  1. using System.Collections.Generic;  
  2. using System.Web.Http;  
  3. using MVCUsingWebAPIWithAngularJS.DataLayer;  
  4. using MVCUsingWebAPIWithAngularJS.DataLayer.Models;  
  5. //[Authorize]    
  6. [RoutePrefix("api/cricketer")]  
  7. public class CricketerAPIController: ApiController {  
  8.     // GET api/CricketerAPI/    
  9.     [HttpGet]  
  10.     [Route("getcricketers/")]  
  11.     public List < CricketerViewModel > GetCricketers() {  
  12.             Cricketer cricketerDataLayer = new Cricketer();  
  13.             return cricketerDataLayer.GetCricketers();  
  14.         }  
  15.         // GET api/CricketerAPI/Detail/1111    
  16.         [HttpGet()]  
  17.         [Route("cricketerdetail/{cricketerId}")]  
  18.     public CricketerDetailViewModel GetDetail(int cricketerId) {  
  19.             Cricketer cricketerDataLayer = new Cricketer();  
  20.             return cricketerDataLayer.Detail(cricketerId);  
  21.         }  
  22.         [HttpPost()]  
  23.         [Route("updatecricketer")]  
  24.     public int UpdateCricketer([FromBody()] CricketerViewModel cricketer) {  
  25.             Cricketer cricketerDataLayer = new Cricketer();  
  26.             return cricketerDataLayer.UpdateCricketer(cricketer);  
  27.         }  
  28.         [HttpGet()]  
  29.         [Route("deletecricketer/{cricketerId}")]  
  30.     public void DeleteCricketer(int cricketerId) {  
  31.             Cricketer cricketerDataLayer = new Cricketer();  
  32.             cricketerDataLayer.DeleteCricketer(cricketerId);  
  33.         }  
  34.         // GET api/CricketerAPI/Detail/1111    
  35.         [HttpGet()]  
  36.         [Route("cricketerdetail/ODIStats/{cricketerId}")]  
  37.     public CricketerODIStatsViewModel GetODIStats(int cricketerId) {  
  38.             Cricketer cricketerDataLayer = new Cricketer();  
  39.             return cricketerDataLayer.ODIStats(cricketerId);  
  40.         }  
  41.         // GET api/CricketerAPI/Detail/1111    
  42.         [HttpGet()]  
  43.         [Route("cricketerdetail/TestStats/{cricketerId}")]  
  44.     public CricketerTestStatsViewModel GetTestStats(int cricketerId) {  
  45.         Cricketer cricketerDataLayer = new Cricketer();  
  46.         return cricketerDataLayer.TestStats(cricketerId);  
  47.     }  
  48. }  
Now let’s work on Angular part like service, controller, module. 

Angular Service

  1. app.service("CricketerService", function($http) {  
  2.     this.GetCricketers = function() {  
  3.         var req = $http.get('api/cricketer/getcricketers/');  
  4.         return req;  
  5.     }  
  6.     this.CricketerDetail = function(cricketerId) {  
  7.         var req = $http.get('api/cricketer/cricketerdetail/' + cricketerId);  
  8.         return req;  
  9.     }  
  10.     this.UpdateCricketer = function(cricketer) {  
  11.         var req = $http.post('api/cricketer/updatecricketer', cricketer);  
  12.         return req;  
  13.     }  
  14.     this.DeleteCricketer = function(Id) {  
  15.         var req = $http.get('api/cricketer/deletecricketer/' + Id + '');  
  16.         return req;  
  17.     }  
  18.     this.CricketerODIStats = function(cricketerId) {  
  19.         var req = $http.get('api/cricketer/cricketerdetail/ODIStats/' + cricketerId);  
  20.         return req;  
  21.     }  
  22.     this.CricketerTestStats = function(cricketerId) {  
  23.         var req = $http.get('api/cricketer/cricketerdetail/TestStats/' + cricketerId);  
  24.         return req;  
  25.     }  
  26. });  
Angular Controller 
  1. app.controller('CricketerController', function($scope, $uibModal, CricketerService, $window) {  
  2.     var serv = CricketerService.GetCricketers();  
  3.     serv.success(function(cricketers) {  
  4.         $scope.heading = "Cricketers List";  
  5.         $scope.displayMessage = false;  
  6.         $scope.cricketers = cricketers  
  7.     }).error(function(data, status, headers, config) {  
  8.         $scope.message = "Oops... something went wrong";  
  9.     });  
  10.     $scope.addCricketer = function() {  
  11.         var cricketer = {  
  12.             ID: 0,  
  13.             Name: "",  
  14.             ODI: "",  
  15.             Test: "",  
  16.             Update: false  
  17.         };  
  18.         $scope.editCricketer(cricketer);  
  19.     }  
  20.     $scope.editCricketer = function(cricketer) {  
  21.         var modalInstance = $uibModal.open({  
  22.             animation: $scope.animationsEnabled,  
  23.             templateUrl: 'cricketerModal.html',  
  24.             controller: 'CricController',  
  25.             resolve: {  
  26.                 cricketer: function() {  
  27.                     return cricketer;  
  28.                 }  
  29.             }  
  30.         });  
  31.         modalInstance.result.then(function(cricketer) {  
  32.             //alert(cricketer.Update);    
  33.             //If it was deleted    
  34.             if (!cricketer.Update) {  
  35.                 $scope.cricketers.push(cricketer);  
  36.             }  
  37.         }, function() {  
  38.             //$log.info('Modal dismissed at: ' + new Date());    
  39.         });  
  40.     }  
  41.     $scope.deleteCricketer = function(Id, index) {  
  42.         if ($window.confirm("Are you sure you want to Delete this player?")) {  
  43.             var serv = CricketerService.DeleteCricketer(Id);  
  44.             serv.success(function() {  
  45.                 $scope.cricketers.splice(index, 1);  
  46.             }).error(function(data, status, headers, config) {  
  47.                 $scope.displayMessage = true;  
  48.                 $scope.message = "Oops... something went wrong";  
  49.             });  
  50.         } else {}  
  51.     };  
  52. });  
  53. app.controller('CricController', function($scope, $uibModalInstance, $filter, CricketerService, cricketer) {  
  54.     //alert(cricketer.Update);    
  55.     $scope.displayMessage = false;  
  56.     $scope.cricketer = cricketer;  
  57.     // debugger;    
  58.     if (cricketer.Update) {  
  59.         $scope.updateButtonText = "Update";  
  60.         $scope.headingtext = "Edit";  
  61.     } else {  
  62.         $scope.updateButtonText = "Add";  
  63.         $scope.headingtext = "Add";  
  64.     }  
  65.     $scope.update = function() {  
  66.         if ($scope.validate()) {  
  67.             $scope.cricketer.Name = $scope.cricketer.Name;  
  68.             $scope.cricketer.ODI = $scope.cricketer.ODI;  
  69.             $scope.cricketer.Test = $scope.cricketer.Test;  
  70.             var serv = CricketerService.UpdateCricketer($scope.cricketer);  
  71.             serv.success(function(ID) {  
  72.                 $scope.cricketer.Id = ID;  
  73.                 //$scope.$parent.assessments.push($scope.assessment);    
  74.                 $uibModalInstance.close($scope.cricketer);  
  75.             }).error(function(data, status, headers, config) {  
  76.                 $scope.displayMessage = true;  
  77.                 $scope.message = "Oops... something went wrong";  
  78.             });  
  79.         }  
  80.     }  
  81.     $scope.validate = function() {  
  82.         var valid = true;  
  83.         var errorMessage = "";  
  84.         if ($scope.cricketer.Name == "") {  
  85.             errorMessage += "-Name\n";  
  86.         }  
  87.         if ($scope.cricketer.ODI == "") {  
  88.             errorMessage += "-ODI\n";  
  89.         }  
  90.         if ($scope.cricketer.Test == "") {  
  91.             errorMessage += "-Test\n";  
  92.         }  
  93.         if (errorMessage != "") {  
  94.             errorMessage = "Please enter the following.\n" + errorMessage  
  95.                 //alert(errorMessage);    
  96.             $scope.displayMessage = true;  
  97.             $scope.message = errorMessage;  
  98.             valid = false;  
  99.         }  
  100.         return valid;  
  101.     }  
  102.     $scope.cancel = function() {  
  103.         $uibModalInstance.dismiss('cancel');  
  104.     };  
  105. });  
  106. app.controller('DetailController', function($scope, CricketerService, $routeParams) {  
  107.     var serv = CricketerService.CricketerDetail($routeParams.id);  
  108.     serv.success(function(details) {  
  109.         $scope.displayMessage = false;  
  110.         $scope.detail = details;  
  111.     }).error(function(data, status, headers, config) {  
  112.         $scope.displayMessage = true;  
  113.         $scope.message = "Oops... something went wrong";  
  114.     });  
  115.     var odistats = CricketerService.CricketerODIStats($routeParams.id);  
  116.     odistats.success(function(stats) {  
  117.         $scope.displayMessage = false;  
  118.         $scope.ODIStats = stats;  
  119.     }).error(function(data, status, headers, config) {  
  120.         $scope.displayMessage = true;  
  121.         $scope.message = "Oops... something went wrong";  
  122.     });  
  123.     var teststats = CricketerService.CricketerTestStats($routeParams.id);  
  124.     teststats.success(function(stats) {  
  125.         $scope.displayMessage = false;  
  126.         $scope.TestStats = stats;  
  127.     }).error(function(data, status, headers, config) {  
  128.         $scope.displayMessage = true;  
  129.         $scope.message = "Oops... something went wrong";  
  130.     });  
  131. });  
  132. Angular App  
  133. var app = angular.module('cricketerapp', ['ngRoute', 'ngAnimate', 'ui.bootstrap'])  
  134.     //// configure routes    
  135. app.config(function($routeProvider) {  
  136.     debugger;  
  137.     $routeProvider.when('/', {  
  138.         templateUrl: 'Angular/Controllers/CricketerView.html',  
  139.         controller: 'CricketerController'  
  140.     }).when('/detail/:id', {  
  141.         templateUrl: 'Angular/Controller/DetailView.html',  
  142.         controller: 'DetailController'  
  143.     }).otherwise({  
  144.         redirectTo: '/'  
  145.     });  
  146. });   
Let’s start work on view part now. Add a HTML page and provide the name of angular module and angular controller and add function of add, edit, detail and delete. When edit and add new item I am using bootstrap popup window. 

CricketerList.HTML

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title></title>  
  6.     <meta charset="utf-8" />  
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>  
  8.   
  9. <body ng-app="cricketerapp" ng-controller="CricketerController">  
  10.     <div class="row" ng-show="displayMessage">  
  11.         <div class="panel panel-default">  
  12.             <div class="panel-heading"> {{message}} </div>  
  13.         </div>  
  14.     </div>  
  15.     <div>  
  16.         <h1>{{heading}}</h1>  
  17.         <div> <button type="submit" class="button" ng-click="addCricketer()">    
  18.     
  19. <i class="fa fa-plus tc-btn"></i>    Add Cricketer    
  20.     
  21. </button> </div>  
  22.     </div>  
  23.     <div><br /></div>  
  24.     <div>  
  25.         <div class="dataTable_wrapper">  
  26.             <table class="table table-striped table-bordered table-hover table-condensed table-responsive cell-border appointments" id="dataTables-Schedule">  
  27.                 <tr>  
  28.                     <th ng-click="sort('Id')"> ID </th>  
  29.                     <th ng-click="sort('Name')"> Player Name </th>  
  30.                     <th ng-click="sort('ODI')"> Total ODI Played </th>  
  31.                     <th ng-click="sort('Test')"> Total Test Played </th>  
  32.                     <th></th>  
  33.                     <th></th>  
  34.                     <th></th>  
  35.                 </tr>  
  36.                 <tr ng-repeat="v in cricketers |orderBy:sortKey:reverse">  
  37.                     <td>{{v.Id}}</td>  
  38.                     <td> <a href="cricketer#/detail/{{v.Id}}">{{v.Name}}</a> </td>  
  39.                     <td>{{v.ODI}}</td>  
  40.                     <td>{{v.Test}}</td>  
  41.                     <td> <a href="#" ng-model="updateButtonText" ng-click="editCricketer(v)">Edit    
  42.     
  43. </a> </td>  
  44.                     <td> <a href="cricketer#/detail/{{v.Id}}">    
  45.     
  46. Detail    
  47.     
  48. </a> </td>  
  49.                     <td> <a href="#" ng-click="deleteCricketer(v.Id,$index)" confirm="Are you sure you want to Delete this player?">Delete</a> </td>  
  50.                 </tr>  
  51.             </table>  
  52.         </div>  
  53.     </div>  
  54.     <div ng-view></div>  
  55.     <script type="text/ng-template" id="cricketerModal.html">  
  56.         <h3>    
  57.     
  58. {{headingtext}}    
  59.     
  60. </h3>  
  61.         <div class="modal-body">  
  62.             <div class="row" ng-show="displayMessage">  
  63.                 <div class="panel panel-default">  
  64.                     <div class="panel-heading"> {{message}} </div>  
  65.                 </div>  
  66.             </div>  
  67.             <table>  
  68.                 <tr>  
  69.                     <td class="bodyText10">Name</td>  
  70.                     <td class="bodyText10"> <input id="Text1" type="text" ng-model="cricketer.Name" /> </td>  
  71.                 </tr>  
  72.                 <tr>  
  73.                     <td class="bodyText10">ODI</td>  
  74.                     <td class="bodyText10"> <input type="text" class="input" ng-model="cricketer.ODI" /> </td>  
  75.                 </tr>  
  76.                 <tr>  
  77.                     <td class="bodyText10">Test</td>  
  78.                     <td class="bodyText10"> <input type="text" ng-model="cricketer.Test" /> </td>  
  79.                 </tr>  
  80.             </table>  
  81.             <div class="modal-footer"> <button type="submit" class="btn-submit" ng-click="update()">    
  82.     
  83. <i class="fa fa-pencil-square tc-btn"></i>    {{updateButtonText}}    
  84.     
  85. </button> <button type="submit" class="btn-submit" ng-click="cancel()">    
  86.     
  87. <i class="fa fa-remove tc-btn"></i>    Cancel    
  88.     
  89. </button> </div>  
  90.         </div>  
  91.     </script>  
  92. </body>  
  93.   
  94. </html>  
Let’s see the output, 


When click on add button,


Click on Edit link,


When click on detail or name of player then we are loading overall stats and ODI stats and Text stats.

DetailView.html

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Overall Stats</title><meta charset="utf-8" />  
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0"><meta charset="utf-8" />  
  6. </head>  
  7. <body>  
  8.     <div>  
  9.         <h4>Overall Stats</h4>  
  10.         <hr />  
  11.         <div ng-app="cricketerapp" ng-controller="CricketerController">  
  12.             <div class="row" ng-show="displayMessage">  
  13.                 <div class="panel panel-default">  
  14.                     <div class="panel-heading">  
  15.                         {{message}}  
  16.                     </div>  
  17.                 </div>  
  18.             </div>  
  19.             <div class="dataTable_wrapper">                  
  20.                 <table class="table table-striped table-bordered table-hover table-condensed table-responsive cell-border appointments" id="dataTables-Schedule">  
  21.                     <tr>  
  22.                         <th>  
  23.                             ID  
  24.                         </th>  
  25.                         <th>  
  26.                             Team  
  27.                         </th>  
  28.                         <th>  
  29.                             ODI Runs  
  30.                         </th>  
  31.                         <th>  
  32.                             Test Runs  
  33.                         </th>  
  34.                         <th>  
  35.                             Wickets  
  36.                         </th>                        
  37.                     </tr>  
  38.                     <tr>                          
  39.                         <td>{{detail.Cricketer_Id}}</td>  
  40.                         <td>{{detail.Team}}</td>  
  41.                         <td>{{detail.ODI_Runs}}</td>  
  42.                         <td>{{detail.Test_Runs}}</td>  
  43.                         <td>{{detail.Wickets}}</td>  
  44.                     </tr>  
  45.                 </table>  
  46.             </div>  
  47.         </div>  
  48.     </div>  
  49.   
  50.     <div>  
  51.         <h4>ODI Stats</h4>  
  52.         <hr />  
  53.         <div ng-app="cricketerapp" ng-controller="CricketerController">  
  54.             <div class="row" ng-show="displayMessage">  
  55.                 <div class="panel panel-default">  
  56.                     <div class="panel-heading">  
  57.                         {{message}}  
  58.                     </div>  
  59.                 </div>  
  60.             </div>  
  61.             <div class="dataTable_wrapper">  
  62.                 <table class="table table-striped table-bordered table-hover table-condensed table-responsive cell-border appointments" id="dataTables-Schedule">  
  63.                     <tr>  
  64.                         <th>  
  65.                             ID  
  66.                         </th>  
  67.                         <th>  
  68.                             Name  
  69.                         </th>  
  70.                         <th>  
  71.                             Half Century  
  72.                         </th>  
  73.                         <th>  
  74.                             Century  
  75.                         </th>  
  76.                     </tr>  
  77.                     <tr>  
  78.                         <td>{{ODIStats.Cricketer_Id}}</td>  
  79.                         <td>{{ODIStats.Name}}</td>  
  80.                         <td>{{ODIStats.Half_Century}}</td>  
  81.                         <td>{{ODIStats.Century}}</td>  
  82.                     </tr>  
  83.                 </table>  
  84.             </div>  
  85.         </div>  
  86.     </div>  
  87.   
  88.     <div>  
  89.         <h4>Test Stats</h4>  
  90.         <hr />  
  91.         <div ng-app="cricketerapp" ng-controller="CricketerController">  
  92.             <div class="row" ng-show="displayMessage">  
  93.                 <div class="panel panel-default">  
  94.                     <div class="panel-heading">  
  95.                         {{message}}  
  96.                     </div>  
  97.                 </div>  
  98.             </div>  
  99.             <div class="dataTable_wrapper">  
  100.                 <table class="table table-striped table-bordered table-hover table-condensed table-responsive cell-border appointments" id="dataTables-Schedule">  
  101.                     <tr>  
  102.                         <th>  
  103.                             ID  
  104.                         </th>  
  105.                         <th>  
  106.                             Name  
  107.                         </th>  
  108.                         <th>  
  109.                             Half Century  
  110.                         </th>  
  111.                         <th>  
  112.                             Century  
  113.                         </th>  
  114.                     </tr>  
  115.                     <tr>  
  116.                         <td>{{TestStats.Cricketer_Id}}</td>  
  117.                         <td>{{TestStats.Name}}</td>  
  118.                         <td>{{TestStats.Half_Century}}</td>  
  119.                         <td>{{TestStats.Century}}</td>  
  120.                     </tr>  
  121.                 </table>  
  122.             </div>  
  123.         </div>  
  124.     </div>  
  125. </body>  
  126. </html>   


Conclusion

In this article, we have learnt the crud operation using Web API and AngularJS in MVC with SQL Server database using entity framework. If you have any question or comments, you can download attached sample application or post me a comment in C# Corner comments section.


Similar Articles