Before proceeding further I recommend reading my previous angularJS articles, so that you can understand AngularJS very well.

Getting Started

MVC template

Now add a new model class in the model directory.

  1. public class Friend
  2. {
  3. [Key]
  4. [DatabaseGeneratedAttribute(DatabaseGeneratedOption.Identity)]
  5. public int FriendId { get; set; }
  6. public string FirstName { get; set; }
  7. public string LastName { get; set; }
  8. public string Address { get; set; }
  9. public string City { get; set; }
  10. public string PostalCode { get; set; }
  11. public string Country { get; set; }
  12. public string Notes { get; set; }
  13. }

Now add a context class.

  1. public class FriendsContext : DbContext
  2. {
  3. public FriendsContext()
  4. : base("name=DefaultConnection")
  5. {
  6. base.Configuration.ProxyCreationEnabled = false;
  7. }
  8. public DbSet<Friend> Friends { get; set; }
  9. }

Now add a controller in the controller directory.

  1. public class FriendController : ApiController
  2. {
  3. private FriendsContext db = new FriendsContext();
  5. // GET api/<controller>
  6. [HttpGet]
  7. public IEnumerable<Friend> Get()
  8. {
  9. return db.Friends.AsEnumerable();
  10. }
  11. // GET api/<controller>/5
  12. public Friend Get(int id)
  13. {
  14. Friend friend = db.Friends.Find(id);
  15. if (friend == null)
  16. {
  17. throw new HttpResponseException(Request.CreateResponse(HttpStatusCode.NotFound));
  18. }
  20. return friend;
  21. }
  22. // POST api/<controller>
  23. public HttpResponseMessage Post(Friend friend)
  24. {
  25. if (ModelState.IsValid)
  26. {
  27. db.Friends.Add(friend);
  28. db.SaveChanges();
  30. HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.Created, friend);
  31. response.Headers.Location = new Uri(Url.Link("DefaultApi", new { id = friend.FriendId }));
  32. return response;
  33. }
  34. else
  35. {
  36. return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState);
  37. }
  38. }
  39. // PUT api/<controller>/5
  40. public HttpResponseMessage Put(int id, Friend friend)
  41. {
  42. if (!ModelState.IsValid)
  43. {
  44. return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState);
  45. }
  47. if (id != friend.FriendId)
  48. {
  49. return Request.CreateResponse(HttpStatusCode.BadRequest);
  50. }
  52. db.Entry(friend).State = EntityState.Modified;
  54. try
  55. {
  56. db.SaveChanges();
  57. }
  58. catch (DbUpdateConcurrencyException ex)
  59. {
  60. return Request.CreateErrorResponse(HttpStatusCode.NotFound, ex);
  61. }
  63. return Request.CreateResponse(HttpStatusCode.OK);
  64. }
  65. // DELETE api/<controller>/5
  66. public HttpResponseMessage Delete(int id)
  67. {
  68. Friend friend = db.Friends.Find(id);
  69. if (friend == null)
  70. {
  71. return Request.CreateResponse(HttpStatusCode.NotFound);
  72. }
  74. db.Friends.Remove(friend);
  76. try
  77. {
  78. db.SaveChanges();
  79. }
  80. catch (DbUpdateConcurrencyException ex)
  81. {
  82. return Request.CreateErrorResponse(HttpStatusCode.NotFound, ex);
  83. }
  85. return Request.CreateResponse(HttpStatusCode.OK, friend);
  86. }
  87. protected override void Dispose(bool disposing)
  88. {
  89. db.Dispose();
  90. base.Dispose(disposing);
  91. }
  92. }

Now add AngularJS using Manage Nuget Package Manager and search AngularJS.

search AngularJS

Now add a new JavaScript file in the scripts directory and add angular functions.

  1. function friendController($scope, $http) {
  2. $scope.loading = true;
  3. $scope.addMode = false;
  5. //Used to display the data
  6. $http.get('/api/Friend/').success(function (data) {
  7. $scope.friends = data;
  8. $scope.loading = false;
  9. })
  10. .error(function () {
  11. $scope.error = "An Error has occured while loading posts!";
  12. $scope.loading = false;
  13. });
  15. $scope.toggleEdit = function () {
  16. this.friend.editMode = !this.friend.editMode;
  17. };
  18. $scope.toggleAdd = function () {
  19. $scope.addMode = !$scope.addMode;
  20. };
  22. //Used to save a record after edit
  23. $scope.save = function () {
  24. alert("Edit");
  25. $scope.loading = true;
  26. var frien = this.friend;
  27. alert(emp);
  28. $http.put('/api/Friend/', frien).success(function (data) {
  29. alert("Saved Successfully!!");
  30. emp.editMode = false;
  31. $scope.loading = false;
  32. }).error(function (data) {
  33. $scope.error = "An Error has occured while Saving Friend! " + data;
  34. $scope.loading = false;
  36. });
  37. };
  39. //Used to add a new record
  40. $scope.add = function () {
  41. $scope.loading = true;
  42. $http.post('/api/Friend/', this.newfriend).success(function (data) {
  43. alert("Added Successfully!!");
  44. $scope.addMode = false;
  45. $scope.friends.push(data);
  46. $scope.loading = false;
  47. }).error(function (data) {
  48. $scope.error = "An Error has occured while Adding Friend! " + data;
  49. $scope.loading = false;
  51. });
  52. };
  54. //Used to edit a record
  55. $scope.deletefriend = function () {
  56. $scope.loading = true;
  57. var friendid = this.friend.FriendId;
  58. $http.delete('/api/Friend/' + friendid).success(function (data) {
  59. alert("Deleted Successfully!!");
  60. $.each($scope.friends, function (i) {
  61. if ($scope.friends[i].FriendId === friendid) {
  62. $scope.friends.splice(i, 1);
  63. return false;
  64. }
  65. });
  66. $scope.loading = false;
  67. }).error(function (data) {
  68. $scope.error = "An Error has occured while Saving Friend! " + data;
  69. $scope.loading = false;
  71. });
  72. };
  74. }

Now open the _Layout.cshtml page from the Shared folder and add these two lines to render AngularJS and empjs in the application.

  1. @Scripts.Render("~/bundles/jquery")
  2. @Scripts.Render("~/bundles/bootstrap")
  3. @Scripts.Render("~/bundles/angularjs")
  4. @Scripts.Render("~/bundles/empjs")

Now let's work on the View.

  1. @{
  2. ViewBag.Title = "FriendView";
  3. Layout = "~/Views/Shared/_Layout.cshtml";
  4. }
  6. <h2>Friends View</h2>
  7. <style>
  8. #mydiv {
  9. position: absolute;
  10. top: 0;
  11. left: 0;
  12. width: 100%;
  13. height: 100%;
  14. z-index: 1000;
  15. background-color: grey;
  16. opacity: .8;
  17. }
  19. .ajax-loader {
  20. position: absolute;
  21. left: 50%;
  22. top: 50%;
  23. margin-left: -32px; /* -1 * image width / 2 */
  24. margin-top: -32px; /* -1 * image height / 2 */
  25. display: block;
  26. }
  27. </style>
  28. <div data-ng-app data-ng-controller="friendController" class="container">
  29. <strong class="error">{{ error }}</strong>
  30. <div id="mydiv" data-ng-show="loading">
  31. <img src="Images/ajax-loader.gif" class="ajax-loader" />
  32. </div>
  33. <p data-ng-hide="addMode"><a data-ng-click="toggleAdd()" href="javascript:;" class="btn btn-primary">Add New</a></p>
  34. <form name="addFriend" data-ng-show="addMode" style="width:600px;margin:0px auto;">
  35. <label>FirstName:</label><input type="text" data-ng-model="newfriend.FirstName" required />
  36. <label>LastName:</label><input type="text" data-ng-model="newfriend.LastName" required />
  37. <label>Address:</label><input type="text" data-ng-model="newfriend.Address" required />
  38. <label>City:</label><input type="text" data-ng-model="newfriend.City" required />
  39. <label>PostalCode:</label><input type="text" data-ng-model="newfriend.PostalCode" required />
  40. <label>Country:</label><input type="text" data-ng-model="newfriend.Country" required />
  41. <label>Notes:</label><input type="text" data-ng-model="newfriend.Notes" required />
  42. <br />
  43. <br />
  44. <input type="submit" value="Add" data-ng-click="add()" data-ng-disabled="!addFriend.$valid" class="btn btn-primary" />
  45. <input type="button" value="Cancel" data-ng-click="toggleAdd()" class="btn btn-primary" />
  46. <br /><br />
  47. </form>
  48. <table class="table table-bordered table-hover" style="width:800px">
  49. <tr>
  50. <th>#</th>
  51. <td>FirstName</td>
  52. <th>LastName</th>
  53. <th>Address</th>
  54. <th>City</th>
  55. <th>PostalCode</th>
  56. <th>Country</th>
  57. <th>Notes</th>
  58. </tr>
  60. <tr data-ng-repeat="friend in friends">
  61. <td><strong data-ng-hide="friend.editMode">{{ friend.FriendId }}</strong></td>
  62. <td>
  63. <p data-ng-hide="friend.editMode">{{ friend.FirstName }}</p>
  64. <input data-ng-show="friend.editMode" type="text" data-ng-model="friend.FirstName" />
  65. </td>
  66. <td>
  67. <p data-ng-hide="friend.editMode">{{ friend.LastName }}</p>
  68. <input data-ng-show="friend.editMode" type="text" data-ng-model="friend.LastName" />
  69. </td>
  70. <td>
  71. <p data-ng-hide="friend.editMode">{{ friend.Address }}</p>
  72. <input data-ng-show="friend.editMode" type="text" data-ng-model="friend.Address" />
  73. </td>
  74. <td>
  75. <p data-ng-hide="friend.editMode">{{ friend.City }}</p>
  76. <input data-ng-show="friend.editMode" type="text" data-ng-model="friend.City" />
  77. </td>
  78. <td>
  79. <p data-ng-hide="friend.editMode">{{ friend.PostalCode }}</p>
  80. <input data-ng-show="friend.editMode" type="text" data-ng-model="friend.PostalCode" />
  81. </td>
  82. <td>
  83. <p data-ng-hide="friend.editMode">{{ friend.Country }}</p>
  84. <input data-ng-show="friend.editMode" type="text" data-ng-model="friend.Country" />
  85. </td>
  86. <td>
  87. <p data-ng-hide="friend.editMode">{{ friend.Notes }}</p>
  88. <input data-ng-show="friend.editMode" type="text" data-ng-model="friend.Notes" />
  89. </td>
  90. <td>
  91. <p data-ng-hide="friend.editMode"><a data-ng-click="toggleEdit(friend)" href="javascript:;">Edit</a> | <a data-ng-click="deletefriend(friend)" href="javascript:;">Delete</a></p>
  92. <p data-ng-show="friend.editMode"><a data-ng-click="save(friend)" href="javascript:;">Save</a> | <a data-ng-click="toggleEdit(friend)" href="javascript:;">Cancel</a></p>
  93. </td>
  94. </tr>
  95. </table>
  96. <hr />
  98. </div>
Run the application to see the output:

output

Click on the Add New Button:

edit link

Click on the edit link:

New Button

For more information download the attached sample.

Conclusion

In this article we have learned how to do CRUD operations in MVC 5 using the Web API and AngularJS. If you have any question or comments then put a line in the c-sharcorner comments section.