Introduction to Knockout.js and CRUD Operations in ASP.Net Web Forms Using Knockout.JS

I) Introduction

The development paradigm has been changing rapidly for a last few years. The out of the box technologies have been introduced to develop applications with fast, scalable, extensible structure, easy to maintain and easy to use. Knockout.JS is also one of the examples of such emerging technologies. I take an opportunity to explain the concept and topic my way.

We’ll be discussing the technology from basic to advanced level by just following a road-map.

III) Part 1: Introduction to Knockout.js and CRUD Operations in ASP.NET Web Forms using Knockout.JS

We’ll discuss this part by starting with an introduction to knockout, MVVM and observer pattern. Then by setting up a basic environment in knockout.js, thereby creating an ASP.NET web forms application and performing CRUD operations.

IV) Knockout

In today’s changing trend of development, data driven apps depend largely on JavaScript and JS based libraries such as jQuery. The client side programming appears to become more and more complex because the user interface becomes richer. In scenarios like this, the data binding and dependency tracking are highly desirable in the applications for further extensibility of the application. Knockout JS fulfills these rich requirements on client side programming and makes a developers’ life easy and joyful. Let’s discuss KO in detail.

Knockout.JS (KO) is basically a JS library that enables Declarative Bindings using an ‘Observable’ ViewModel on the client (browser) following observer pattern approach, enabling UI to bind and refresh itself automatically whenever the data bound is modified. Knockout.JS provides its own templating pattern that helps us to bind our view model data easily. KO works on MVVM pattern i.e. Model-View-ViewModel.

As the architecture is shown, Views interact with View Models in a two way binding manner, i.e., when model is changed, view updates itself and when view is updated, model too updates itself instantaneously.

KO provides 3 most important features like:

Automatic Refresh of UI

Two way binding

Templating

The whole idea of KO derives from these three major functionalities. KO also helps in developing single page applications (SPAs). SPAs are out of the box new way of developing rich internet applications (RIAs) in today’s era.

V) Model-View-View Model (MVVM)

When we develop a rich UI internet based application, we create Views (UI like HTML and aspx pages) using server controls, HTML controls and then extend our application by writing business logic behind those views like event handling, property binding, creating entities. This approach increases complexities when the application is too large. Here, we require separation of concerns and maintainability of the application, especially on client side.

Model refers to our application data and domain model, i.e., entities. In a traditional ASP.NET web application, the data is basically stored inside database or files and UI fetches the data using client-server request like Ajax or direct bind itself.

View Model contains the User Interface level operations/methods/functions, performed on model data to bind the outcome to view. The operations include business logic validations and checks to be performed before binding data to UI. View models act as interface between model and views and act as a wrapper over model prior binding to Views.

MVVM provides a clear separation of concerns between the user interface (UI) and the business logic.

In the MVC pattern, a view acts as the broker agent between the Model (the data displayed in the View) and the Controller (server-side endpoint that takes data from the View and performs some action on that data and provides a response.

VI) Observables for Two Way Binding

KO provides Observables in the library to be bound to UI elements and simultaneously code is written to view models, so that when view updates the data the model updates itself and vice versa, for example, in the following code:

The above code shows a part of view, you can see the elements are bound to properties like text and value, these properties are provided by KO, and the right side of these properties are property key names which are bind in view-models with the help of observables like shown below:

Step 4: In the similar fashion, search ‘knockout’ in search textbox and install knockoutjs library in your application.

Step 5: Our solution will look like we have a folder created named Scripts and that contains jQuery and knockout libraries.

Step 6: Now right click the project and add an aspx page, I named that page LearnKO.aspx.

Step 7: Similarly create a JavaScript file and add that to the project , I named that file as LearnKO.js.

Step 8: Open the learnKO.js file and drag the jQuery file and knockout.js library file to the LearKO.js file, we see in the below picture that reference of both the files is created on the js file. We did this because it will prove us intellisense support for jQuery and knockout on our LearnKO.js file.

This is all we have to do to setup knockout, now we know how to setup initial environment to use knockout.js in our application.

We proceed now to create the application, talk to database and create template and view model.

VIII) Creating Knockout Application

Step 10: For communication to database, add Entity Framework library in the same manner as we added JQuery and KO, installing Entity Framework library will add the EF DLL to the project. We’ll talk to database using Entity Framework of Microsoft. Alternatively, there are a number of ways to talk to database like ADO.NET, LINQ to SQL, etc. But first things first, create a database you have to use in SQL Server. I’ve provided the script for the same.

Step 12: Following is step two of Entity Data Model. You can choose model contents from database you already created. So select “Generate From database” option. Click Next.

Step 13: Choose the table you want to add, i.e., Student table as shown below in the figure. Name the model asLearningKOModel. Click Finish.

Step 14: We get certain files in our solution like context and tt files. We also get Student.CS file, that will act as our server side domain model. The context class contains the data communication methods of Entity Framework.

Step 15: Write three methods with the help of Entity Framework in our aspx.cs page. One method to fetch all theStudents and another method to save and delete a student to/from database, as shown below. Mark them as web method so that they could be called from client side.

There are two HTML tables, one for adding student to database and other showing all the students having delete anchor link to delete the student, these template properties will be bound in view model, where we write method to communicate with data base and call Web Methods we created in aspx.cs page. The Viewmodel also contains observables to be bound to these properties.

Step 17: Now it’s time to create ViewModel, Open the learnKO.js file and add codes to fetch, save and delete student, and observables bound to properties binded on controls of HTML page.

We can create observable arrays of Domiciles and genders to bind to the dropdown list of our HTML. Ko provides these observables and other such properties to bind to model.

observable: Used to define model/entity properties. If these properties are bound with user interface and when value for these properties gets updated, automatically the UI elements bound with these properties will be updated with the new value instantaneously.

observableArray: observableArray represents a collection of data elements which required notifications. It’s used to bind with the List kind of elements.
E.g. this.Students = ko.observableArray([]);

applyBindings: This is used to activate knockout for the current HTML document or a specific UI element in HTML document. The parameter for this method is the view-model which is defined in JavaScript. ThisViewModel contains the observable, observableArray and various methods.

Various other types of binding are used in this article:

click: Represents a click event handler added to the UI element so that JavaScript function is called.

value: This represents the value binding with the UI element’s value property to the property defined into theViewModel.

The value binding should be used with , , :

visible: This is used to hide or unhide the UI element based upon the value passed to its binding.

Text: This represents the text value of the parameter passed to the UI element.

Step 18: Include js files and stylesheet (you can create your own stylesheet file) to head section of aspx page.

Step 19: Press F5 to run the application, and we’ll be shown a page having HTML controls as follows:

List of Students shows the list of students from database, bound to viewmodel’s event.

Try to create a new student and add student, then save it to database, it will automatically be added to the right hand side list.

We can see that Domicile and Genders drop down lists are bound to our Viewmodel’s properties.

Note: Do not give string in StudentId and Age as no validation is put on those fields, code may break.

Create Student:

Student added to list and database:

Job done!

Now you can say that you have become a knockout.js developer.

IX) Conclusion

We learnt a lot in this article about how to set up knockout.js in Visual Studio, lots of theory and also created a sample application just to hands-on the concept. There are numerous articles and blogs related to the same concept, you can explore more and more to learn. In the next article, I’ll explain creating a sample application and performing CRUD operations in MVC4 with knockout js and Entity Framework. Now pat your back to have done a great job by learning a new concept.