Please enable Javascript to correctly display the contents on Dot Net Tricks!
 

Web API CRUD Operations with Knockout

Posted By : Shailendra Chauhan, 01 Apr 2013
Updated On : 01 Apr 2013
Keywords : CRUD operations using knockout and web api,insert update delete using knockout and webapi,web api insert update delete

In previous article, I have explained Knockout CRUD Operations using MVC4. In this article, I will demonstrate, how to use Knockout with Web API for CRUD (Create, Read, Update, Delete) Operations.

Step 1: Define Model

Product.cs

public class Product
{
 public int Id { get; set; }
 public string Name { get; set; }
 public string Category { get; set; }
 public decimal Price { get; set; }
}

IProductRepository.cs

interface IProductRepository
{
 IEnumerable<Product> GetAll();
 Product Get(int id);
 Product Add(Product item);
 bool Update(Product item);
 bool Delete(int id);
}

ProductRepository.cs

public class ProductRepository : IProductRepository
{
 private List<Product> products = new List<Product>();
 private int _nextId = 1;

 public ProductRepository()
 {
 // Add products for the Demonstration
 Add(new Product { Name = "Computer", Category = "Electronics", Price = 23.54M });
 Add(new Product { Name = "Laptop", Category = "Electronics", Price = 33.75M });
 Add(new Product { Name = "iPhone4", Category = "Phone", Price = 16.99M });
 }

 public IEnumerable<Product> GetAll()
 {
 // TO DO : Code to get the list of all the records in database
 return products;

 }

 public Product Get(int id)
 {
 // TO DO : Code to find a record in database
 return products.Find(p => p.Id == id);

 }

 public Product Add(Product item)
 {
 if (item == null)
 {
 throw new ArgumentNullException("item");
 }
 
 // TO DO : Code to save record into database
 item.Id = _nextId++;
 products.Add(item);

 return item;
 }
 public bool Update(Product item)
 {
 if (item == null)
 {
 throw new ArgumentNullException("item");
 }
 
 // TO DO : Code to update record into database
 int index = products.FindIndex(p => p.Id == item.Id);
 if (index == -1)
 {
 return false;
 }
 products.RemoveAt(index);
 products.Insert(index,item);

 return true;
 }

 public bool Delete(int id)
 {
 // TO DO : Code to remove the records from database
 products.RemoveAll(p => p.Id == id);

 return true;
 }
}

Step 2: Define Controller

HomeController.cs

public class HomeController : Controller
{
 public ActionResult Product()
 {
 return View();
 }
}

ProductController.cs for Web API

public class ProductController : ApiController
{
 static readonly IProductRepository repository = new ProductRepository();

 public IEnumerable GetAllProducts()
 {
 return repository.GetAll();
 }

 public Product PostProduct(Product item)
 {
 return repository.Add(item);
 }

 public IEnumerable PutProduct(int id, Product product)
 {
 product.Id = id;
 if (repository.Update(product))
 {
 return repository.GetAll();
 }
 else
 {
 return null;
 }
 }

 public bool DeleteProduct(int id)
 {
 if (repository.Delete(id))
 {
 return true;
 }
 else
 {
 return false;
 }

 }
}

Step 3: Define View

Product.cshtml

@{
 ViewBag.Title = "Products' List";
}

@section scripts {
 <style type="text/css">
 body {
 margin: 20px;
 font-family: "Arial", "Helventica", sans-serif;
 }

 label {
 width: 80px;
 display: inline-block;
 }

 button {
 display: inline-block;
 outline: none;
 cursor: pointer;
 text-align: center;
 text-decoration: none;
 padding: .4em 1.1em .4em;
 color: #fef4e9;
 border: solid 1px #006fb9;
 background: #1276bb;
 }

 button:hover {
 text-decoration: none;
 background: #282828;
 border: solid 1px #000;
 }

 table {
 padding-top: 1em;
 }

 thead, tfoot {
 font-weight: 600;
 }

 th, td {
 padding: .1em .5em;
 text-align: left;
 }

 td li, td ul {
 margin: 0;
 padding: 0;
 }

 td li {
 display: inline;
 }

 td li::after {
 content: ',';
 }

 td li:last-child::after {
 content: '';
 }
 </style>
 <script src="~/Scripts/knockout-2.2.0.js"></script>
 <script src="@Url.Content("~/Scripts/knockout-2.2.0.debug.js")" type="text/javascript"></script>
 <script type="text/javascript">

 function formatCurrency(value) {
 return "$" + value.toFixed(2);
 }

 function ProductViewModel() {

 //Make the self as 'this' reference
 var self = this;
 //Declare observable which will be bind with UI 
 self.Id = ko.observable("");
 self.Name = ko.observable("");
 self.Price = ko.observable("");
 self.Category = ko.observable("");

 var Product = {
 Id: self.Id,
 Name: self.Name,
 Price: self.Price,
 Category: self.Category
 };

 self.Product = ko.observable();
 self.Products = ko.observableArray(); // Contains the list of products

 // Initialize the view-model
 $.ajax({
 url: 'api/product',
 cache: false,
 type: 'GET',
 contentType: 'application/json; charset=utf-8',
 data: {},
 success: function (data) {
 self.Products(data); //Put the response in ObservableArray
 }
 });

 // Calculate Total of Price After Initialization
 self.Total = ko.computed(function () {
 var sum = 0;
 var arr = self.Products();
 for (var i = 0; i < arr.length; i++) {
 sum += arr[i].Price;
 }
 return sum;
 });

 //Add New Item
 self.create = function () {
 if (Product.Name() != "" && Product.Price() != "" && Product.Category() != "") {
 $.ajax({
 url: 'api/product',
 cache: false,
 type: 'POST',
 contentType: 'application/json; charset=utf-8',
 data: ko.toJSON(Product),
 success: function (data) {
 // alert('added');
 self.Products.push(data);
 self.Name("");
 self.Price("");
 self.Category("");

 }
 }).fail(
 function (xhr, textStatus, err) {
 alert(err);
 });

 }
 else {
 alert('Please Enter All the Values !!');
 }

 }
 // Delete product details
 self.delete = function (Product) {
 if (confirm('Are you sure to Delete "' + Product.Name + '" product ??')) {
 var id = Product.Id;
 $.ajax({
 url: 'api/product/' + id,
 cache: false,
 type: 'DELETE',
 contentType: 'application/json; charset=utf-8',
 data: {},
 success: function (data) {
 self.Products.remove(Product);

 }
 }).fail(
 function (xhr, textStatus, err) {
 alert(err);
 });
 }
 }

 // Edit product details
 self.edit = function (Product) {
 self.Product(Product);

 }

 // Update product details
 self.update = function () {
 var Product = self.Product();
 var id = Product.Id;

 $.ajax({
 url: 'api/product/' + id,
 cache: false,
 type: 'PUT',
 contentType: 'application/json; charset=utf-8',
 data: ko.toJSON(Product),
 success: function (data) {
 self.Products.removeAll();
 self.Products(data); //Put the response in ObservableArray
 self.Product(null);
 alert("Record Updated Successfully");
 
 }
 })
 .fail(
 function (xhr, textStatus, err) {
 alert(err);
 });
 }
 
 // Reset product details
 self.reset = function () {
 self.Name("");
 self.Price("");
 self.Category("");
 }

 // Cancel product details
 self.cancel = function () {
 self.Product(null);

 }
 }
 var viewModel = new ProductViewModel();
 ko.applyBindings(viewModel);

 </script>
}

<div id="body">

 <h2>Knockout CRUD Operations with MVC4</h2>

 <h3>List of Products</h3>

 <table id="products1" data-bind="visible: Products().length > 0">
 <thead>
 <tr>
 <th>ID</th>
 <th>Name</th>
 <th>Category</th>
 <th>Price</th>
 <th>Actions</th>
 </tr>
 </thead>
 <tbody data-bind="foreach: Products">
 <tr>
 <td data-bind="text: Id"></td>
 <td data-bind="text: Name"></td>
 <td data-bind="text: Category"></td>
 <td data-bind="text: formatCurrency(Price)"></td>

 <td>
 <button data-bind="click: $root.edit">Edit</button>
 <button data-bind="click: $root.delete">Delete</button>

 </td>

 </tr>
 </tbody>
 <tfoot>
 <tr>
 <td></td>
 <td></td>
 <td>Total :</td>
 <td data-bind="text: formatCurrency($root.Total())"></td>
 <td></td>
 </tr>
 </tfoot>
 </table>
 <br />
 <div style="border-top: solid 2px #282828; width: 430px; height: 10px"> </div>

 <div data-bind="if: Product">
 <div>
 <h2>Update Product</h2>
 </div>
 <div>
 <label for="productId" data-bind="visible: false">ID</label>
 <label data-bind="text: Product().Id, visible: false"></label>

 </div>
 <div>
 <label for="name">Name</label>
 <input data-bind="value: Product().Name" type="text" title="Name" />
 </div>

 <div>
 <label for="category">Category</label>
 <input data-bind="value: Product().Category" type="text" title="Category" />
 </div>

 <div>
 <label for="price">Price</label>
 <input data-bind="value: Product().Price" type="text" title="Price" />

 </div>
 <br />
 <div>
 <button data-bind="click: $root.update">Update</button>
 <button data-bind="click: $root.cancel">Cancel</button>

 </div>
 </div>

 <div data-bind="ifnot: Product()">
 <div>
 <h2>Add New Product</h2>
 </div>
 <div>
 <label for="name">Name</label>
 <input data-bind="value: $root.Name" type="text" title="Name" />
 </div>

 <div>
 <label for="category">Category</label>
 <input data-bind="value: $root.Category" type="text" title="Category" />
 </div>

 <div>
 <label for="price">Price</label>
 <input data-bind="value: $root.Price" type="text" title="Price" />
 </div>
 <br />
 <div>
 <button data-bind="click: $root.create">Save</button>
 <button data-bind="click: $root.reset">Reset</button>

 </div>
 </div>

</div>

Step 4: Run Application - Retrieve Operation

Step 4: Insert Operation

Step 4: Update Operation

Step 4: Delete Operation

What do you think?

I hope you will enjoy the tips while working with Knockout and Web API. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.


About the Author
Hey! I'm Shailendra Chauhan author, developer with more than 5 years of hand over Microsoft .NET technologies. I am a .NET Consultant, founder & chief editor of www.dotnet-tricks.com and www.dotnetinterviewtricks.com. I am author of books ASP.NET MVC Interview Questions and Answers & LINQ Interview Questions and Answers.
I love to work with web applications and mobile apps using Microsoft technology including ASP.NET, MVC, C#, SQL Server, WCF, Web API, Entity Framework,Cloud Computing, Windows Azure, jQuery, jQuery Mobile, Knockout.js, Angular.js and many more web technologies. More...
 
 
Recommended Articles!
 
Subscribe & follow Us
 
Creative Commons License
Dot Net Tricks is licensed under a Creative Commons Attribution 4.0 International License.
Free .NET Interview Books
 
Learn In Hindi
Browse By Category
 
Recent Articles
 
Popular Articles
 
Like us on Facebook
 
Featured AD