Using Observable Property to Create Dynamic Output With Knockoutjs in ASP.Net Application

Introduction

In my previous article I explained How to do Binding with Knockoutjs in ASP.NET Application.

But in that article there was one problem and that was everything there was Static and can't be changed. Therefore in this article, as I promised, I will create an application that will be dynamic and will show the instant output as you make changes in the running state.

This article will explain how to use an Observable Property to create dynamic output with Knockoutjs in an ASP.NET Application.

Step 1

First of all you need to add Knockout with 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 fetch Knockout and use it in your Application.

After downloading this file go to your application and right-click on it then select "Add existing item", then browse to where you had stored the file and add it.

The 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 =ko.observable("Mohit");

this.sirName = ko.observable("Singh");

};

ko.applyBindings(new x());

</script>

As I said previously, you need to first create a function in which all the work will be done.

You will then see that I used the "Observable Property", this property helps to create data that can be edited and can be modified at run time.

And at the end I call this function in the applyBinding.

Step 3

Until now the ViewModel part is completed. We will now move towards the View Part, in other words the design part.

<div>

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

</div>

Now here, as you can see, I first had shown the Name which can't be changed and after that I had used the Textboxes where the value of initialName and sirName are used but these values can be edited.

Now one interesting thing that will happen here will be, as you change the value of Name in either TextBox, the changed value will be shown instantly in the labels whose value can't be changed at run time.

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 =ko.observable("Mohit");

this.sirName = ko.observable("Singh");

};

ko.applyBindings(new x());

</script>

</form>

</body>

</html>

Output

observable 1.jpg

Now when you change the Initial Name and the Surname then you will see the instant change in the Labels that were static.

observable 4.jpg

5 Comments

Join the conversation! Your thoughts help the community grow.

Anubhav Chaudhary11y ago
Thanks Gowtham
Gowtham Rajamanickam11y ago
this is great
Gowtham Rajamanickam11y ago
Good one..
Anubhav Chaudhary13y ago
Thanks Abhineet
Abhineet Srivastava13y ago
Very sound & Clear..... Thanks Mate :)