Introduction
My previous article explained How to use the Computed Property of Knockout in ASP.NET Application.
This article will help you to do some interesting things with your application like converting lower case to upper case on click of a button.
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.
![knockout1.jpg]()
Now this file will be added to 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>
function x() {
this.initialName = ko.observable("Mohit");
this.surName = ko.observable("Singh");
this.completeName=ko.computed(function(){
return this.initialName() +" "+ this.surName();
}, this);
this.capsName = function () {
var firstCaps = this.initialName();
this.initialName(firstCaps.toUpperCase());
var lastCaps = this.surName();
this.surName(lastCaps.toUpperCase());
};
};
ko.applyBindings(new x());
</script>
As I already said in my previous articles, first a function is created in which all the work is to be done, then the Observable Property is taken that will make the data editable, after that I used the Computed Property that will use the values of the observable.
After all this I had again created a function in which first a variable is taken named "firstCaps" in which the value of "initialName" is taken then in the next line the value of initialName is converted to upper case using "toUpperCase()".
The same thing is done for the surName and it's also converted to upper case.
Now our work on ViewModel is completed and it's ready to be used in the View.
Step 3
Now we will move to the View, in other words to the design.
<div>
<p>First Name<strong data-bind="text: initialName"></strong></p>
<p>SurName<strong data-bind="text: surName"></strong></p>
<input data-bind="value: initialName" />
<input data-bind="value: surName" />
<p>Hello!<strong data-bind="text: completeName"></strong></p>
<button data-bind="click: capsName">Click Me</button>
</div>
Here also, first the same things are done, the value of "initialName" and "surName" in the label format can't be changed.
After that I used the <Input> Tag that will allow you to edit the data and finally I had shown the complete name in the label format that will change as you change the value of initialName and surName.
Finally I used a button in which "capsName" is called, this button will turn the First Name and Surname to upper case.
The complete code is as follows:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication28.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>SurName<strong data-bind="text: surName"></strong></p>
<input data-bind="value: initialName" />
<input data-bind="value: surName" />
<p>Hello!<strong data-bind="text: completeName"></strong></p>
<button data-bind="click: capsName">Click Me</button>
</div>
<script>
function x() {
this.initialName = ko.observable("Mohit");
this.surName = ko.observable("Singh");
this.completeName=ko.computed(function(){
return this.initialName() +" "+ this.surName();
}, this);
this.capsName = function () {
var firstCaps = this.initialName();
this.initialName(firstCaps.toUpperCase());
var lastCaps = this.surName();
this.surName(lastCaps.toUpperCase());
};
};
ko.applyBindings(new x());
</script>
</form>
</body>
</html>
Output
First you will get output like this:
![caps knockout1.jpg]()
After that when you change the text and click on the button then you will get output like this:
![caps knockout5.jpg]()