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.
![knockout1.jpg]()
The file will be added to the Solution Explorer of your application, now drag it to the Head Section of your application.
<head runat="server">
<title></title>
<script src="knockout-2.3.0.js"></script>
</head>
Step 2
Now we will work on the ViewModel of our application.
<script type="text/javascript">
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>
<p>Last Name:<strong data-bind="text:sirName"></strong></p>
<input data-bind="value:initialName" />
<input data-bind="value:sirName" />
</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>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="knockout-2.3.0.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>First Name:<strong data-bind="text:initialName"></strong></p>
<p>Last Name:<strong data-bind="text:sirName"></strong></p>
<input data-bind="value:initialName" />
<input data-bind="value:sirName" />
</div>
<script type="text/javascript">
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]()