Using Computed Property of Knockout in ASP.Net Application to Concatenate the Observable

Introduction

My previous article explained How to Use Observable Property to Create Dynamic Output with Knockoutjs in ASP.NET Application.

That article helps you to create an application in which you can change the data and it's output was shown instantly on the Labels that were static.

This article is a continuation of that article. This article explains the Computed Property used in Knockout.

The Computed Property is a great property; it's main function is to use the Observable Property to show it's output. The Computed Property is itself an Observable Property but it utilizes the value of other observables.

Now I will show you an example of using the Observable Property with the Computed Property.

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 to add existing items, then browse to the file where you stored Knockout and add it.

Now this file will be added to 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.surName = ko.observable("Singh");

this.completeName=ko.computed(function(){

return this.initialName() +" "+ this.surName();

},this);

};

ko.applyBindings(new x());

</script>

First we will create a function in which all the work is to be done.

After that I had used the Observable Property two times in which I had passed a Name and a Surname, this Observable Property makes the initialName and surName editable.

After that I used the Computed Property where the value of "initialName" and "surName" are concatenated and shown as the Complete Name.

Finally I applied the binding on this function.

Step 3

Until now our ViewModel work is completed, now we will work on the View, in other words on the design part of the application.

<div>

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

<p>Hello!<strong data-bind="text: completeName"></strong></p>

</div>

Here first I had shown the value of "initialName" and "surName" in the label format that can't be changed.

After that I had used the <Input> Tag that will allow you to edit the data and at last I had shown the complete Name in the Label format that will change as you change the value of initialName and surName.

data-bind is used to bind the viewModel to the components used in the View.

The complete code of the application is as follows:

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

<!DOCTYPE html>

</head>

<body>

<div>

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

<p>SurName<strong data-bind="text: surName"></strong></p>

<p>Hello!<strong data-bind="text: completeName"></strong></p>

</div>

function x() {

this.initialName = ko.observable("Mohit");

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

this.completeName=ko.computed(function(){

return this.initialName() +" "+ this.surName();

},this);

};

ko.applyBindings(new x());

</script>

</form>

</body>

</html>

Output

As you run your application you will first see that the static Name that was provided in the ViewModel is shown in all the Labels and text-boxes, also the complete name is shown with the Hello!.

Now when you make changes in any of the Initial Name or the Surname then you will see that changes are automatically applied to the other Label's also.