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>
  4. <head>
  5. <title></title>
  6. <meta charset="utf-8" />
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>
  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()">
  19. <i class="fa fa-plus tc-btn"></i> Add Cricketer
  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
  43. </a> </td>
  44. <td> <a href="cricketer#/detail/{{v.Id}}">
  46. Detail
  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>
  58. {{headingtext}}
  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()">
  83. <i class="fa fa-pencil-square tc-btn"></i> {{updateButtonText}}
  85. </button> <button type="submit" class="btn-submit" ng-click="cancel()">
  87. <i class="fa fa-remove tc-btn"></i> Cancel
  89. </button> </div>
  90. </div>
  91. </script>
  92. </body>
  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>
  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>
  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.