CRUD Operations Using Web API 2 And Knockout.js

Next, type Knockout.js in search text box, select the first line as below, and click on Install button.

Now, we need to add new js file. Right click on scripts folder > Add > JavaScript File.

App.js

Here, we create our View Model that contains all the business logic, and then, we bind it with ko.applyBindings(new viewModel()) which is enabled to activate knockout for the current HTML document.

As you can see in the below code, ko provides observables to bind to the Model.

• observable() is used to define Model properties which can notify the changes and update the Model automatically.
• observableArray([]) is used to bind list of elements.
  
  1. var ViewModel = function () {
  3. var self = this;
  4. self.CustID = ko.observable();
  5. self.FirstName = ko.observable();
  6. self.LastName = ko.observable();
  7. self.Email = ko.observable();
  8. self.CountryList = ko.observableArray(['Morocco', 'India', 'USA', 'Spain']);
  9. self.Country = ko.observable();
  11. self.customerList = ko.observableArray([]);
  13. var CustomerUri = '/api/Customers/';
  17. function ajaxFunction(uri, method, data) {
  19. //self.errorMessage('');
  21. return $.ajax({
  23. type method,
  24. url uri,
  25. dataType 'json',
  26. contentType 'application/json',
  27. data data ? JSON.stringify(data) null
  29. }).fail(function (jqXHR, textStatus, errorThrown) {
  30. alert('Error ' + errorThrown);
  31. });
  32. }
  35. // Clear Fields
  36. self.clearFields = function clearFields() {
  37. self.FirstName('');
  38. self.LastName('');
  39. self.Email('');
  40. self.Country('');
  41. }
  43. //Add new Customer
  44. self.addNewCustomer = function addNewCustomer(newCustomer) {
  46. var CustObject = {
  47. CustID self.CustID(),
  48. FirstName: self.FirstName(),
  49. LastName self.LastName(),
  50. Email self.Email(),
  51. Country self.Country()
  52. };
  53. ajaxFunction(CustomerUri, 'POST', CustObject).done(function () {
  55. self.clearFields();
  56. alert('Customer Added Successfully !');
  57. getCustomerList()
  58. });
  59. }
  61. //Get Customer List
  62. function getCustomerList() {
  63. $("div.loadingZone").show();
  64. ajaxFunction(CustomerUri, 'GET').done(function (data) {
  65. $("div.loadingZone").hide();
  66. self.customerList(data);
  67. });
  69. }
  71. //Get Detail Customer
  72. self.detailCustomer = function (selectedCustomer) {
  74. self.CustID(selectedCustomer.CustID);
  75. self.FirstName(selectedCustomer.FirstName);
  76. self.LastName(selectedCustomer.LastName);
  77. self.Email(selectedCustomer.Email);
  78. self.Country(selectedCustomer.Country);
  80. $('#Save').hide();
  81. $('#Clear').hide();
  83. $('#Update').show();
  84. $('#Cancel').show();
  86. };
  88. self.cancel = function () {
  90. self.clearFields();
  92. $('#Save').show();
  93. $('#Clear').show();
  95. $('#Update').hide();
  96. $('#Cancel').hide();
  97. }
  99. //Update Customer
  100. self.updateCustomer = function () {
  102. var CustObject = {
  103. CustID self.CustID(),
  104. FirstName self.FirstName(),
  105. LastName self.LastName(),
  106. Email self.Email(),
  107. Country self.Country()
  108. };
  110. ajaxFunction(CustomerUri + self.CustID(), 'PUT', CustObject).done(function () {
  111. alert('Customer Updated Successfully !');
  112. getCustomerList();
  113. self.cancel();
  114. });
  115. }
  117. //Delete Customer
  118. self.deleteCustomer = function (customer) {
  120. ajaxFunction(CustomerUri + customer.CustID, 'DELETE').done(function () {
  122. alert('Customer Deleted Successfully');
  123. getCustomerList();
  124. })
  126. }
  128. //Chart Line function used to display a chart which represents nb of customers by country
  129. function chartLine() {
  131. ajaxFunction('http//localhost50706/Customers/GetCustomerByCountry', 'GET').done(function (result) {
  132. console.log(result);
  133. Morris.Line({
  134. element 'line-chart',
  135. data result,
  136. xkey 'CountryName',
  137. // A list of names of data record attributes that contain y-values.
  138. ykeys ['value'],
  139. // Labels for the ykeys -- will be displayed when you hover over the
  140. // chart.
  141. labels ['Value'],
  143. parseTime false
  144. });
  147. });
  149. };
  151. chartLine();
  152. getCustomerList();
  154. };
  156. ko.applyBindings(new ViewModel());

Now, from Solution Explorer panel, we are going to add index.html file as shown below.

Index.html

In order to exchange the data between HTML page and JavaScript file, knockout.js offers various types of bindings that should be used within data-bind attribute.

• Click represents a click event handler to call JavaScript function.
• Value represents the value binding with UI element’s to the property defined into view Model.
• Text represents the text value to the UI element.
• Foreach used to fetch an array.

Now, you can run your application. Don’t forget to change the URL address as below.

http//localhost55192/index.html

Let’s see the output.

That’s all, Please send your feedback and queries in comments box.