Brief Overview

Knockout.js - is a popular JavaScript library that allows easy creation of feature-rich applications based on Model-View-View Model (MVVM) pattern: user interface can be bound to a separate existing data model. And any change of the model will result in dynamic refresh of the interface.

Knockout MVC is a library for ASP.NET MVC3/MVC4 , that is a wrapper for Knockout.js, that helps to move entire business logic to the server side: the complete JavaScript code necessary on the client side will be generated automatically based on the described C# (or VB.NET) model. Binding of the page interface to business model is done MVVM-style with the help of C#/VB.NET expressions (not separate properties, but expressions over them that will be translated to JavaScript code) using IntelliSense. If complex operations should be done to the model, it is possible to address to any model method on the server using one short string (ajax query will be automatically generated; and when the client will get the updated model, the whole interface will automatically refresh).

Generated JavaScript code is based on Knockout.js and that is why it works under any browser (even IE 6). Thus, describing the whole business logic on the server in a single instance we get an ability to create fully-featured cross-browser client Web application without writing a single JavaScript code!

Compatibility

Today, any serious application rarely uses only one library. And very often the problem of libraries compatibility arises. Knockout MVC lacks this disadvantage. It is always possible to add your own native Knockout-code to the existing C# code (example). And Knockout itself greatly mates with any other libraries. Knockout.js doesn’t depend on any other libraries; however its core hides various useful tools for work with jQuery (that start working when it is connected). It is possible to use other libraries (for example, Prototype), but is you use jQuery (as many other developers) you can use any jQuery plug-ins (for example, jQuery.Validation, example). You can use RequireJs (example) to load big scripts.

Besides compatibility with third-party libraries, it’s worth to mention browser compatibility: Knockout MVC is completely cross-browser (since it is based on Knockout.js) and works fine in IE 6+, Firefox 2+, Opera 10+, Chrome, Safari. You can get more information here.

Motivation

Let’s consider the following popular task: we want to provide user with the ability to edit some data model. And some data handler logic is hosted on the server (for example, saving to database). We want to use ajax to send requests to server in order to avoid page re-load. But using ajax results in the necessity to describe logic on the client side that will be able to update the page based on the response. Besides, it is necessary to describe some part of data model processing on the client side using JavaScript in order to arrange good dynamic user interface (why refer to server each time user click a button). Let’s see what should be done to solve this issue without using special libraries under ASP.NET.

Solve without libraries under ASP.NET:

• [JavaScript] Describe data model on the client side
• [JavaScript] Describe logic of initialization of edit fields
• [JavaScript] Describe logic of data model processing on the client side
• [JavaScript] Describe logic of data transmission to server (manually collect data from the necessary fields and serialize it)
• [C#] Describe data model on the server side
• [C#] Describe logic of de-serialization of the client query to the model
• [C#] Describe logic of data model processing on the server
• [C#] Describe logic of serialization of the model and sending new data back to the client
• [JavaScript] Describe logic of de-serialization of the response to the existing model
• [JavaScript] Describe logic of updating user interface elements according to new data

If the model quite small, these actions are quite obvious, but if you want to add new property or method to the model you will need to carefully write considerable amount of code. Pay attention to word “carefully” — you will need to move many names between different implementations of one and the same model from memory. As to refactoring, it’s very sad — our IDE can’t help us at all. If you just want to rename some item, you will need to edit it multiple locations, carefull check complete code and entirely test it.

Don’t be so sad in advance — now you have a new wonderful library! Let’s see what will be solution of our task with the use of Knockout MVC.

Solve with Knockout MVC:

• [C#] Describe data model and logic of its processing on the server
• [C#] Specify what data model element corresponds to every interface element

That’s all! The rest of logic will be generated automatically! Refactoring of such Web application won’t differ from refactoring of common C# application. You don’t need to remember name of any property or method – IntelliSence will help you write its name correctly. And even if there is an error, you will know it on the compilation stage. If some simple logic should be executed on both client side and server side (for example, validation of form fields), it is written in C# just once (then this code will be converted to JavaScript).

Simple Sample

Now let’s have a look at syntax. All data bindings are described in the following way:

@ko.Html.TextBox(m => m.A)

As you can see, when creating data bindings we transmit an expression indicating exact data model property we can bind to. As we do it in C#, we have fully-features IntelliSense that will give us a clue about available properties and their types:

As a result, these constructions will be transformed to html with Knockout code:

<input data-bind="value : A" />

The following sample shows that we can create data bindings not only for common objects and not only to specific properties, but to bind complex constructions to expressions (the first line is Razor code, the second line is html it is automatically converted to):

Razor: @using (ko.If(model => model.Condition1 && model.Condition2))
Html:  <!-- ko if: Condition1()&&Condition2() -->

The complete list of syntax constructions that can be used is available in the documentation.

Other samples

To get deeper understanding of the development process when using Knockout MVC, we took some samples from the official site and re-wrote them in C#. Here is what we got as a result:

Besides, there are a number of samples created to demonstrate some Knockout MVC features:

• Region (if, foreach, with)
• Complex bindings (style)
• Parameters to server
• User script
• Combine context
• Inner computed properties
• Big data (with lazy loading)

License

The Knockout MVC is currently available for use in all personal or commercial projects under MIT license.

Resume

Knockout based

Extension of the popular JavaScript library Knockout.js

ASP.NET MVC

Complete integration with ASP.NET MVC3/MVC4

MVVM

Application is created with the help of Model-View-View Model (MVVM) pattern

C#/VB Expressions

Simple C#/VB.NET expressions defining logic of the client side behavior are automatically converted to JavaScript constructions

Model on server

The model is described only once in C#/VB.NET and is stored on the server

IntelliSense

Data binding and element generation codes are written in pure C#/VB.NET with IntelliSense feature

Without JavaScript code

Even the most complicated client-oriented application can be developed without a single line of JavaScript!

Small JavaScript library

Less JavaScript code (compressed version of Knockout takes about 40Kb)

Ajax

Logic of work with the model is described on the server and requests are sent to the server via ajax queries without page re-load

Nice syntax

Short laconic syntax used to describe views – easy-to-write and easy-to-read

Simple development

Website development is as easy as development of a common application – all logic of client-server interaction is hidden inside

Almost no dependencies

Minimum dependencies: Knockout.js and jQuery (the last one is necessary only for specific functions)

Supports all browsers

Support for all popular browsers (IE 6+, Firefox 2+, Opera 10+, Chrome, Safari)

Full compatibility

Complete compatibility with any other JavaScript libraries (jQuery, Prototype, etc.)

Detailed documentation

API docs, live examples