Introduction
Web API is the best fit to create a resource-oriented service using HTTP/Restful and it works well with MVC-based applications. For more details, visit this link.
Description
In this session, I will show you CRUD operations using ASP.NET Web API in MVC, AngularJS.
Before going through this session, visit my previous sessions,
Note
It supports Single Page Applications; that is, at first the entire page is loaded in the client by the initial request, after that, the subsequent action has to be updated by Ajax request and there is no need to reload the entire page. The SPA reduces the response time to user actions and the result is a more fluid experience. Then I will show you how to create SPA and CRUD by using ASP.NET Web API, AngularJS.
Steps to be followed.
Step 1
Create a table called 'Customer'.
Sql Syntax
  1. CREATE TABLE [dbo].[Customer1](
  2. [Id] [int] NOT NULL,
  3. [Name] [nvarchar](50) NULL,
  4. [Address] [nvarchar](50) NULL,
  5. [City] [nvarchar](50) NULL,
  6. [Country] [nvarchar](50) NULL,
  7. [DateOfBirth] [datetime] NULL,
  8. [Age] [int] NULL,
  9. CONSTRAINT [PK_Customer] PRIMARY KEY CLUSTERED
  10. (
  11. [Id] ASC
  12. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS =
  13. ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
  14. ) ON [PRIMARY]
  16. GO
Step 2
Create a MVC web application named CRUDWebAPI.
Step 3
Create Entity Frame Work Model Object named "CrystalGranite2016.edmx" by taking above mentioned table name.
Step 4
Then create a Web API 2 controller named "CustomerController.cs" .
Code Ref
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Data.Entity;
  4. using System.Data.Entity.Infrastructure;
  5. using System.Linq;
  6. using System.Net;
  7. using System.Net.Http;
  8. using System.Web.Http;
  10. namespace CRUDWebAPI.Controllers
  11. {
  12. public class CustomerController : ApiController
  13. {
  14. CrystalGranite2016Entities1 db = new CrystalGranite2016Entities1();
  16. //get all customer
  17. [HttpGet]
  18. public IEnumerable<Customer> Get()
  19. {
  20. return db.Customers.AsEnumerable();
  21. }
  23. //get customer by id
  24. public Customer Get(int id)
  25. {
  26. Customer customer = db.Customers.Find(id);
  27. if (customer == null)
  28. {
  29. throw new HttpResponseException(Request.CreateResponse(HttpStatusCode.NotFound));
  30. }
  31. return customer;
  32. }
  34. //insert customer
  35. public HttpResponseMessage Post(Customer customer)
  36. {
  37. if (ModelState.IsValid)
  38. {
  39. db.Customers.Add(customer);
  40. db.SaveChanges();
  41. HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.Created, customer);
  42. response.Headers.Location = new Uri(Url.Link("DefaultApi", new { id = customer.Id }));
  43. return response;
  44. }
  45. else
  46. {
  47. return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState);
  48. }
  49. }
  51. //update customer
  52. public HttpResponseMessage Put(int id, Customer customer)
  53. {
  54. if (!ModelState.IsValid)
  55. {
  56. return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState);
  57. }
  58. if (id != customer.Id)
  59. {
  60. return Request.CreateResponse(HttpStatusCode.BadRequest);
  61. }
  62. db.Entry(customer).State = EntityState.Modified;
  63. try
  64. {
  65. db.SaveChanges();
  66. }
  67. catch (DbUpdateConcurrencyException ex)
  68. {
  69. return Request.CreateErrorResponse(HttpStatusCode.NotFound, ex);
  70. }
  71. return Request.CreateResponse(HttpStatusCode.OK);
  72. }
  74. //delete customer by id
  75. public HttpResponseMessage Delete(int id)
  76. {
  77. Customer customer = db.Customers.Find(id);
  78. if (customer == null)
  79. {
  80. return Request.CreateResponse(HttpStatusCode.NotFound);
  81. }
  82. db.Customers.Remove(customer);
  83. try
  84. {
  85. db.SaveChanges();
  86. }
  87. catch (DbUpdateConcurrencyException ex)
  88. {
  89. return Request.CreateErrorResponse(HttpStatusCode.NotFound, ex);
  90. }
  91. return Request.CreateResponse(HttpStatusCode.OK, customer);
  92. }
  94. //prevent memory leak
  95. protected override void Dispose(bool disposing)
  96. {
  97. db.Dispose();
  98. base.Dispose(disposing);
  99. }
  100. }
  101. }
Code Description
In the above mentioned code, I have described code functionality with a green comment line.
  1. //prevent memory leak
  2. protected override void Dispose(bool disposing)
  3. {
  4. db.Dispose();
  5. base.Dispose(disposing);
  6. }
Step 5
Support Single page application interface.
Open the Package Manager Console from Tools > Library Package Manager. Type the following command to install the AngularJS.Core NuGet package.
  1. Install-Package AngularJS.Core
In my system, I have installed AngularJS.Core.1.6.8.
Step 6
In Solution Explorer, right-click the Scripts folder, select Add | New Folder. Name the folder app and press Enter. Right-click the app folder you just created and select Add | JavaScript File named "customerCtrl.js".
Code Ref
  2. (function () {
  3. 'use strict';
  5. //create angularjs controller
  6. var app = angular.module('app', []);//set and get the angular module
  7. app.controller('customerController', ['$scope', '$http', customerController]);
  9. //angularjs controller method
  10. function customerController($scope, $http) {
  12. //declare variable for mainain ajax load and entry or edit mode
  13. $scope.loading = true;
  14. $scope.addMode = false;
  16. //get all customer information
  17. $http.get('/api/Customer/').success(function (data) {
  18. $scope.customers = data;
  19. $scope.loading = false;
  20. })
  21. .error(function () {
  22. $scope.error = "An Error has occured while loading posts!";
  23. $scope.loading = false;
  24. });
  26. //by pressing toggleEdit button ng-click in html, this method will be hit
  27. $scope.toggleEdit = function () {
  28. this.customer.editMode = !this.customer.editMode;
  29. };
  31. //by pressing toggleAdd button ng-click in html, this method will be hit
  32. $scope.toggleAdd = function () {
  33. $scope.addMode = !$scope.addMode;
  34. };
  36. //Inser Customer
  37. $scope.add = function () {
  38. $scope.loading = true;
  39. $http.post('/api/Customer/', this.newcustomer).success(function (data) {
  40. alert("Added Successfully!!");
  41. $scope.addMode = false;
  42. $scope.customers.push(data);
  43. $scope.loading = false;
  44. }).error(function (data) {
  45. $scope.error = "An Error has occured while Adding Customer! " + data;
  46. $scope.loading = false;
  47. });
  48. };
  50. //Edit Customer
  51. $scope.save = function () {
  52. alert("Edit");
  53. $scope.loading = true;
  54. var frien = this.customer;
  55. alert(frien);
  56. $http.put('/api/Customer/' + frien.Id, frien).success(function (data) {
  57. alert("Saved Successfully!!");
  58. frien.editMode = false;
  59. $scope.loading = false;
  60. }).error(function (data) {
  61. $scope.error = "An Error has occured while Saving customer! " + data;
  62. $scope.loading = false;
  63. });
  64. };
  66. //Delete Customer
  67. $scope.deletecustomer = function () {
  68. $scope.loading = true;
  69. var Id = this.customer.Id;
  70. $http.delete('/api/Customer/' + Id).success(function (data) {
  71. alert("Deleted Successfully!!");
  72. $.each($scope.customers, function (i) {
  73. if ($scope.customers[i].Id === Id) {
  74. $scope.customers.splice(i, 1);
  75. return false;
  76. }
  77. });
  78. $scope.loading = false;
  79. }).error(function (data) {
  80. $scope.error = "An Error has occured while Saving Customer! " + data;
  81. $scope.loading = false;
  82. });
  83. };
  84. }
  85. })();
Code Description
In the above-mentioned code, I have described code functionality with a green comment line.
  1. //get all customer information
  2. $http.get('/api/Customer/').success(function (data) {
  3. $scope.customers = data;
  4. $scope.loading = false;
  5. })
  6. .error(function () {
  7. $scope.error = "An Error has occured while loading posts!";
  8. $scope.loading = false;
  9. });
Step 7
Modify _Layout.cshtml page as mentioned below.
Code Ref
  1. <!DOCTYPE html>
  2. <html data-ng-app="app">
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>@ViewBag.Title - My ASP.NET Application</title>
  7. @Styles.Render("~/Content/css")
  8. @Scripts.Render("~/bundles/modernizr")
  10. </head>
  11. <body>
  12. <div class="navbar navbar-inverse navbar-fixed-top">
  13. <div class="container">
  14. <div class="navbar-header">
  15. <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  16. <span class="icon-bar"></span>
  17. <span class="icon-bar"></span>
  18. <span class="icon-bar"></span>
  19. </button>
  20. @Html.ActionLink("Application name", "Index", "Home", null, new { @class = "navbar-brand" })
  21. </div>
  22. <div class="navbar-collapse collapse">
  23. <ul class="nav navbar-nav">
  24. <li>@Html.ActionLink("Home", "Index", "Home")</li>
  25. <li>@Html.ActionLink("About", "About", "Home")</li>
  26. <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
  27. @Html.Partial("_LoginPartial")
  28. </ul>
  29. </div>
  30. </div>
  31. </div>
  32. <div class="container body-content">
  33. @RenderBody()
  34. <hr />
  35. <footer>
  36. @*<p>© @DateTime.Now.Year - My ASP.NET Application</p>*@
  37. <p style="background-color: Yellow; font-weight: bold; color:blue; text-align: center; font-style: oblique">© @DateTime.Now.ToLocalTime()</p>
  38. </footer>
  39. </div>
  41. @Scripts.Render("~/bundles/jquery")
  42. @Scripts.Render("~/bundles/bootstrap")
  43. @Scripts.Render("~/bundles/angularjs")
  44. @Scripts.Render("~/bundles/appjs")
  46. @RenderSection("scripts", required: false)
  47. </body>
  48. </html>
Code Description
Here, I have mentioned the path of Javascript references.
  1. <html data-ng-app="app">
  1. @Scripts.Render("~/bundles/jquery")
  2. @Scripts.Render("~/bundles/bootstrap")
  3. @Scripts.Render("~/bundles/angularjs")
  4. @Scripts.Render("~/bundles/appjs")
Step 8
Modify code In BundleConfig.cs file, path is App_Start> BundleConfig.cs as mentioned below.
Code Ref
  1. using System.Web;
  2. using System.Web.Optimization;
  4. namespace CRUDWebAPI
  5. {
  6. public class BundleConfig
  7. {
  8. // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
  9. public static void RegisterBundles(BundleCollection bundles)
  10. {
  11. bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
  12. "~/Scripts/jquery-{version}.js"));
  14. bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
  15. "~/Scripts/jquery.validate*"));
  17. // Use the development version of Modernizr to develop with and learn from. Then, when you're
  18. // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
  19. bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
  20. "~/Scripts/modernizr-*"));
  22. bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
  23. "~/Scripts/bootstrap.js",
  24. "~/Scripts/respond.js"));
  26. bundles.Add(new StyleBundle("~/Content/css").Include(
  27. "~/Content/bootstrap.css",
  28. "~/Content/site.css"));
  31. bundles.Add(new ScriptBundle("~/bundles/angularjs").Include(
  32. "~/Scripts/angular.min.js"));
  34. bundles.Add(new ScriptBundle("~/bundles/appjs").Include(
  35. "~/Scripts/app/customerCtrl.js"));
  36. }
  37. }
  38. }
Code Description
Here, I loaded file configuration from path as reference mentioned in _Layout.cshtml file.
  1. bundles.Add(new ScriptBundle("~/bundles/angularjs").Include(
  2. "~/Scripts/angular.min.js"));
  4. bundles.Add(new ScriptBundle("~/bundles/appjs").Include(
  5. "~/Scripts/app/customerCtrl.js"));
Step 9
I have added a gif image loader during page processing called satyaloader.gif in Images Folder.
Step 10
Create index view for CRUD Operation User Interface called Index.cshtml.
Code Ref
  1. @{
  2. ViewBag.Title = "Satyaprakash-CRUD Using Web API";
  3. }
  4. <h2>CRUD Using Web API</h2>
  5. <style>
  6. #mydiv {
  7. position: absolute;
  8. top: 0;
  9. left: 0;
  10. width: 100%;
  11. height: 100%;
  12. z-index: 1000;
  13. background-color: grey;
  14. opacity: .8;
  15. }
  17. .ajax-loader {
  18. position: absolute;
  19. left: 50%;
  20. top: 50%;
  21. margin-left: -32px; /* -1 * image width / 2 */
  22. margin-top: -32px; /* -1 * image height / 2 */
  23. display: block;
  24. }
  25. table {
  26. font-family: arial, sans-serif;
  27. border-collapse: collapse;
  28. width: 100%;
  29. }
  31. td, th {
  32. border: 1px solid #dddddd;
  33. text-align: left;
  34. padding: 8px;
  35. }
  37. tr:nth-child(even) {
  38. background-color: #dddddd;
  39. }
  41. .button {
  42. background-color: #4CAF50;
  43. border: none;
  44. color: white;
  45. padding: 15px 32px;
  46. text-align: center;
  47. text-decoration: none;
  48. display: inline-block;
  49. font-size: 16px;
  50. margin: 4px 2px;
  51. cursor: pointer;
  52. }
  54. .button4 {
  55. border-radius: 9px;
  56. }
  57. </style>
  58. <div data-ng-controller="customerController" class="container">
  59. <div class="row">
  60. <div class="col-md-12">
  61. <strong class="error">{{ error }}</strong>
  62. <p data-ng-hide="addMode"><a data-ng-click="toggleAdd()" href="javascript:;" class="button button4">Register New Customer</a></p>
  63. <form name="addCustomer" data-ng-show="addMode" style="width:600px;margin:0px auto;">
  64. <div class="form-group">
  65. <label for="cid" class="col-sm-2 control-label">ID:</label>
  66. <div class="col-sm-10">
  67. <input type="text" class="form-control" id="cid" placeholder="please enter id" data-ng-model="newcustomer.Id" required />
  68. </div>
  69. </div>
  70. <div class="form-group">
  71. <label for="cname" class="col-sm-2 control-label">Name:</label>
  72. <div class="col-sm-10">
  73. <input type="text" class="form-control" id="cname" placeholder="please enter your name" data-ng-model="newcustomer.Name" required />
  74. </div>
  75. </div>
  76. <div class="form-group">
  77. <label for="address" class="col-sm-2 control-label">Address:</label>
  78. <div class="col-sm-10">
  79. <input type="text" class="form-control" id="address" placeholder="please enter your address" data-ng-model="newcustomer.Address" required />
  80. </div>
  81. </div>
  82. <div class="form-group">
  83. <label for="city" class="col-sm-2 control-label">City:</label>
  84. <div class="col-sm-10">
  85. <input type="text" class="form-control" id="city" placeholder="please enter your city" data-ng-model="newcustomer.City" required />
  86. </div>
  87. </div>
  88. <div class="form-group">
  89. <label for="country" class="col-sm-2 control-label">Country:</label>
  90. <div class="col-sm-10">
  91. <input type="text" class="form-control" id="country" placeholder="please enter your country" data-ng-model="newcustomer.Country" required />
  92. </div>
  93. </div>
  94. <div class="form-group">
  95. <label for="age" class="col-sm-2 control-label">Age:</label>
  96. <div class="col-sm-10">
  97. <input type="text" class="form-control" id="age" placeholder="please enter your age" data-ng-model="newcustomer.Age" required />
  98. </div>
  99. </div>
  100. <br />
  101. <div class="form-group">
  102. <div class="col-sm-offset-2 col-sm-10">
  103. <input type="submit" value="Submit" data-ng-click="add()" data-ng-disabled="!addCustomer.$valid" class="button button4" />
  104. <input type="button" value="Cancel" data-ng-click="toggleAdd()" class="button button4" />
  105. </div>
  106. </div>
  107. <br />
  108. </form>
  109. </div>
  110. </div>
  111. <div class="row">
  112. <div class="col-md-12">
  113. <br />
  114. <br />
  115. </div>
  116. </div>
  117. <div class="row">
  118. <div class="col-md-12">
  119. <div class="table-responsive">
  120. <table class="table table-bordered table-hover" style="width:800px">
  121. <tr>
  122. <th style="background-color: Yellow;color: blue" >ID</th>
  123. <td style="background-color: Yellow;color: blue">FirstName</td>
  124. <th style="background-color: Yellow;color: blue">LastName</th>
  125. <th style="background-color: Yellow;color: blue">Address</th>
  126. <th style="background-color: Yellow;color: blue">City</th>
  127. <th style="background-color: Yellow;color: blue">Country</th>
  128. <th style="background-color: Yellow;color: blue"></th>
  129. </tr>
  130. <tr data-ng-repeat="customer in customers">
  131. <td><strong data-ng-hide="customer.editMode">{{ customer.Id }}</strong></td>
  132. <td>
  133. <p data-ng-hide="customer.editMode">{{ customer.Name }}</p>
  134. <input data-ng-show="customer.editMode" type="text" data-ng-model="customer.Name" />
  135. </td>
  136. <td>
  137. <p data-ng-hide="customer.editMode">{{ customer.Address }}</p>
  138. <input data-ng-show="customer.editMode" type="text" data-ng-model="customer.Address" />
  139. </td>
  140. <td>
  141. <p data-ng-hide="customer.editMode">{{ customer.City }}</p>
  142. <input data-ng-show="customer.editMode" type="text" data-ng-model="customer.City" />
  143. </td>
  144. <td>
  145. <p data-ng-hide="customer.editMode">{{ customer.Country }}</p>
  146. <input data-ng-show="customer.editMode" type="text" data-ng-model="customer.Country" />
  147. </td>
  148. <td>
  149. <p data-ng-hide="customer.editMode">{{ customer.Age }}</p>
  150. <input data-ng-show="customer.editMode" type="text" data-ng-model="customer.Age" />
  151. </td>
  152. <td>
  153. <p data-ng-hide="customer.editMode"><a data-ng-click="toggleEdit(customer)" href="javascript:;">Edit</a> | <a data-ng-click="deletecustomer(customer)" href="javascript:;">Delete</a></p>
  154. <p data-ng-show="customer.editMode"><a data-ng-click="save(customer)" href="javascript:;">Save</a> | <a data-ng-click="toggleEdit(customer)" href="javascript:;">Cancel</a></p>
  155. </td>
  156. </tr>
  157. </table>
  158. <hr />
  159. </div>
  160. </div>
  161. </div>
  162. <div id="mydiv" data-ng-show="loading">
  163. <img src="Images/satyaloader.gif" class="ajax-loader" />
  164. </div>
  165. </div>
Code Description
I have set AngularJS file path that supports single page application interface mentioned in _Layout.cshtml.
  1. <html data-ng-app="app">
For the above reason I can use AngularJS controller name to perform crud operation as mentioned below in Index.cshtml.
  1. <div data-ng-controller="customerController" class="container">
  2. <div class="row">
  3. <div class="col-md-12">
After saving, data will shown in the below mentioned table with Edit and Delete link and after clicking on it data will be visible in table data by which we can modify data.
  1. table class="table table-bordered table-hover" style="width:800px">
  2. <tr>
  3. <th style="background-color: Yellow;color: blue" >ID</th>
  4. <td style="background-color: Yellow;color: blue">FirstName</td>
  5. <th style="background-color: Yellow;color: blue">LastName</th>
  6. <th style="background-color: Yellow;color: blue">Address</th>
  7. <th style="background-color: Yellow;color: blue">City</th>
  8. <th style="background-color: Yellow;color: blue">Country</th>
  9. <th style="background-color: Yellow;color: blue"></th>
  10. </tr>
  11. <tr data-ng-repeat="customer in customers">
  12. <td><strong data-ng-hide="customer.editMode">{{ customer.Id }}</strong></td>
  13. <td>
  14. <p data-ng-hide="customer.editMode">{{ customer.Name }}</p>
  15. <input data-ng-show="customer.editMode" type="text" data-ng-model="customer.Name" />
  16. </td>
In td section of table two tags are used, one is for records details with edit and delete link and another is after clicking on edit linking the data can be editable in textbox by using AngularJS directives data-ng-hide and data-ng-show.
  1. <td>
  2. <p data-ng-hide="customer.editMode">{{ customer.Name }}</p>
  3. <input data-ng-show="customer.editMode" type="text" data-ng-model="customer.Name" />
  4. </td>
  5. <td>
  6. <p data-ng-hide="customer.editMode">{{ customer.Address }}</p>
  7. <input data-ng-show="customer.editMode" type="text" data-ng-model="customer.Address" />
  8. </td>
After clicking on Edit link the options will be shown as Save and Cancel option with data editable textboxes.
  1. <p data-ng-hide="customer.editMode"><a data-ng-click="toggleEdit(customer)" href="javascript:;">Edit</a> | <a data-ng-click="deletecustomer(customer)" href="javascript:;">Delete</a></p>
  2. <p data-ng-show="customer.editMode"><a data-ng-click="save(customer)" href="javascript:;">Save</a> | <a data-ng-click="toggleEdit(customer)" href="javascript:;">Cancel</a></p>
I have used gif image page loader.
  1. <div id="mydiv" data-ng-show="loading">
  2. <img src="Images/satyaloader.gif" class="ajax-loader" />
  3. </div>
OUTPUT
The page loader will be shown while fetching records.
Then UI for inserting records.
After Inserting records the UI will be shown like this.
After the data is inserted successfully, the alert message will be shown.
To update records:
To delete records.
SUMMARY
  • CRUD Operation Using Web API.
  • AngularJS Single page application Interface Support.
  • Page loader during page process.