How To Bind Using Knockoutjs in ASP.Net Application

Introduction

This article explains how to bind using Knockoutjs in an ASP.NET Application.

Knockoutjs is in a JavaScript library, as we know we can't create large applications in JavaScript, so to solve that problem we can use Knockoutjs that helps in the creation of large applications and in a very simple way.

Knockout has two main parts in it, the first is "View" and the second is "ViewModel". The HTML part, in other words the design part, is in the View and the code part is in the ViewModel.

One great feature of Knockout is having "Dependency Tracking" that helps to create the Automatic Synchronization between the View and the ViewModel.

Bindings: Bindings exist under the appearance of the application, in other words under the Views. It helps to bind the value provided in the View Model with the Elements taken in the Views.

Now you will see how it works.

Step 1

First of all you need to add the Knockout to the ASP.NET Application; for that you can either download it from it's Home Site or you can download my Zip File provided above and then can fetch it and use it in your application.

After downloading this file go to your application and right-click on it to add the Existing Items, then browse to the file where you stored it and add it.

Now this file will be added to the Solution Explorer of your application, now drag it to the Head Section of your application.

</head>

Step 2

Now we will work on the ViewModel of our application.

function x() {

this.initialName ="Mohit";

this.surName = "Singh";

};

ko.applyBindings(new x());

</script>

When working with Knockout you always first need to create a function.

After that I have provided my Name and Surname and at the last you will always need to use applyBindings in which the function name will be provided, this will apply the binding for this function.

Step 3

Now I will proceed toward the View Part, in other words HTML part or the design part.

<div>

<p>First Name:<strong data-bind="text:initialName"></strong></p>

</div>

Here I had done the binding of the View with the ViewModel.

In the second line of code you can see that the value of "initialName" is bound under the <p> tag and in the third line value of "surName" is bound with the second <P> tag.

The complete code of the application is as follows:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication27.WebForm1" %>

<!DOCTYPE html>

</head>

<body>

<div>

<p>First Name:<strong data-bind="text:initialName"></strong></p>

</div>

function x() {

this.initialName ="Mohit";

this.surName = "Singh";

};

ko.applyBindings(new x());

</script>

</form>

</body>

</html>

So when you run the code you will get output like this:

Now one problem here is this was created as Static Data that can't be changed while running. I will remove this problem in my second article "Using Observable Property for Creating Dynamic Output in Knockoutjs".