MVC CRUD Actions Using Knockout JS

• Pure JavaScript library works with any Server or client-side technology.
  Can be added on top of your existing Web Application without requiring major architectural changes.
• Compact - around 13kb after gzipping
  Works on any mainstream Browser (IE 6+, Firefox 2+, Chrome, Safari, Edge, others).
• Comprehensive suite of specifications (developed BDD-style) means its correct functioning can easily be verified on the new Browsers and platforms.

Background

As I am working on a project, which uses Knockout for binding the Server data, a friend of mine requested me to create a CRUD application with Knockout, so that he can easily learn it. I just accepted his request and here, we are going to create an MVC CRUD application with the help of Knockout JS. I hope, you will like this.

Create an Empty MVC Application

To get started, we will create an empty MVC application, as shown below.


add_new_empty_mvc_project

Creating database and Entity Data Model

Here, I am creating a database with the name “TrialDB”. You can always create a DB by running the query given below.
Create a table

To create a table, you can run the query given below.
Thus, our database is ready. Now, we will create an Entity Data Model with the database, which we created.


create_entity_data_model

Install Knockout JS

To install Knockout JS in your project, please right click on your project, click on Manage NuGet Package, and search for ‘Knockout’.


install_knockout

Now, let us start our coding as everything is set.

C – Create Operation

Thus, we are going to see the create operation, as it comes first in CRUD. Let us set up our Controller first. You can see the Controller code to create operation.
Here, the first action calls the View for the create operation and the second operation is used to insert the data to the database and _db is our entity.

private readonly TrialDBEntities _db = new TrialDBEntities();

Now, let’s go ahead and create View to create operation.
Did you notice that we are binding the data to our input controls as data-bind=”value: CourseName”? This value is related to the view model, which we are going to set. The interesting this is, the values in the model will be changed as you change the values in the input. You don’t need to add any kind of codes for the operations.

At last, we are binding a click event, as shown below.
This will call the function createCourse, which we are going to specify in our view model. Now, you may be thinking what is this view model? This Knockout uses MVVM pattern and now let us read some basic information provided in Knockout JS documentation.

MVVM and View Models

Model-View-View Model (MVVM) is a design pattern to build the user interfaces. It describes how you can keep a potentially sophisticated UI simple by splitting it into the three parts.