CRUD Operations Using Knockout in MVC Application- Part 1

Introduction

This article explains CRUD Operations using Knockout in MVC Applications.

This application has been split into two parts; this is the first part of the application.

The Second or Final part of this article contains the View Class functionality which is the most important part of this application and the output of the application.

This application will help you to add new items, update them, and delete them at run time. Through my previous articles, you now know that we can use Knockout for various work, this article will use Knockout at a larger level and will create an attractive and useful application.

In this article, we will use the External Files of Knockout that you can download from: "KnockoutJS".

Use the following procedure to create the sample application.

Step 1. First of all, we will work on the Model of our application. Right-click on the Model Folder of your application and choose to add a new class; in a similar way, add three classes to the Model.

crud operation using knockout

Now open one of the classes and add this code.

public class Items
{
    public int Id { get; set; }
    public string Title { get; set; }
    public string Class { get; set; }
    public decimal Cost { get; set; }
}

Here I have declared four variables ID, Title, Class, and Cost. These variables will be used to show properties associated with various kinds of products.

Step 2. Now open the second class under the Model folder and add this code.

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

Here I have used IEnumerable because it will allow the foreach loop to be applied to all the Items. Here I have declared the variables for adding the items, updating the items, and deleting the items. Delete will work on the ID of the Product.

Step 3. Now we can work on the third class of the Model and provide this code in that class.

public class ProductRepository : IProductRepository
{
    private List<Items> products = new List<Items>();
    private int _prodId = 1;
    public ProductRepository()
    {
        Add(new Items { Title = "Levi's Tshirt", Class = "Clothes", Cost = 20 });
        Add(new Items { Title = "LED", Class = "Electronics", Cost = 700 });
        Add(new Items { Title = "Addidas ZigZag", Class = "Shoes", Cost = 25 });
    }
    public IEnumerable<Items> GetAll()
    {
        return products;
    }
    public Items Get(int id)
    {
        return products.Find(p => p.Id == id);
    }
    public Items Add(Items product)
    {
        if (product == null)
        {
            throw new ArgumentNullException("product");
        }
        product.Id = _prodId++;
        products.Add(product);
        return product;
    }
    public bool Update(Items product)
    {
        if (product == null)
        {
            throw new ArgumentNullException("product");
        }
        int index = products.FindIndex(p => p.Id == product.Id);
        if (index == -1)
        {
            return false;
        }
        products.RemoveAt(index);
        products.Insert(index, product);
        return true;
    }
    public bool Delete(int id)
    {
        products.RemoveAll(p => p.Id == id);
        return true;
    }
}

Here first I have used a variable for the ID of the Product, then I have declared some items that will be shown at run time. Add Product will check whether there is any product available or not, if not then it will throw an exception. Clicking on the "Add" button will increment the ID by one and will add the product in the product category.

The product will again work like add but clicking the Update will first remove the product from the category based on it's ID and then will insert it back with the updates applied.

The Delete button will simply delete the product determined by the ID of the Product.

Step 4. Now we will work on the Controller of our application, so right-click on your Controller Folder and choose to add a new Controller Class.

crud operation using knockout

Add this code to the Controller Class.

public class ProductController : Controller
{
    static readonly IProductRepository repository = new ProductRepository();
    public ActionResult Product()
    {
        return View();
    }
    public JsonResult GetAllProducts()
    {
        return Json(repository.GetAll(), JsonRequestBehavior.AllowGet);
    }
    public JsonResult AddProduct(Items item)
    {
        item = repository.Add(item);
        return Json(item, JsonRequestBehavior.AllowGet);
    }
    public JsonResult EditProduct(int id, Items product)
    {
        product.Id = id;
        if (repository.Update(product))
        {
            return Json(repository.GetAll(), JsonRequestBehavior.AllowGet);
        }
        return Json(null);
    }
    public JsonResult DeleteProduct(int id)
    {
        if (repository.Delete(id))
        {
            return Json(new { Status = true }, JsonRequestBehavior.AllowGet);
        }
        return Json(new { Status = false }, JsonRequestBehavior.AllowGet);
    }
}

I have added a View Class in the View folder named product, that's why I wrote ActionResult Product(){ return view();}. This Controller will help the View to show the data whenever it's added, updated, or deleted.

Click here to see the next part of this article: "How to use CRUD Operations Using Knockout in MVC Application - Part 2".

The complete code for this application can be downloaded from: "CRUD Operations Using Knockout".