Introduction
In this article I will create an interesting feature that most sites are using, which is to copy text server-side using Knockoutjs.
On many sites you must have seen two separate Divs provided, one for the Permanent Address and the other for the Contact Address. If your Permanent Address is also your Mailing Address then you just click on a Checkbox or a button and your address is copied to the second div and you don't need to fill it in again.
Here in this article I will also create something similar using Knockout and you will see how Knockout has reduced the code that will help you to understand it and handle it easily.
Step 1
First of all you need to add an External Knockout js file into your application, you can either download it from the internet or can download my application that is available at the start of this article in ZIP format and then use the file attached to this ZIP file.
After downloading the file you need to call it in the head section of your application.
<head runat="server">
<title></title>
<script src="knockout-2.3.0.js"></script>
</head>
Step 2
Now we can work on our application. First we will work on the ViewModel. To do that you need to add a Script tag under the Body section and then need add this code:
<script>
function x() {
this.address = ko.observable();
this.city = ko.observable("Ghaziabad");
this.State = ko.observable("Uttar Pradesh");
this.sameAsAbove = ko.observable(false);
};
ko.applyBindings(new x());
</script>
This much code will work for us, you can see how knockout has reduced the code to a limited amount.
Here I created a function "x()". In this function I created some Observables. First, three Observables will be used for passing the Address, City and State, in other words the Address of the User will be passed through these Observables.
The fourth Observable named "sameAsAbove" will be used for the Checkbox, by default it is made false that means that the Checkbox will remain Uncheck until the user clicks on it.
At the end I had applied the binding to the function x().
Our work on the ViewModel is now complete and now it's the time for the View of our application, in other words the design part of our application where controls will be provided that are to be bound with the ViewModel.
Step 3
View is the HTML part, write this code in the View part of the application:
<table>
<tr>
<td>
<label>Address:</label>
<input data-bind="value:address" />
</td>
<td >
<label>City:</label>
<input data-bind="value:city" />
</td>
<td >
<label>State:</label>
<input data-bind="value:State" />
</td>
</tr>
<tr>
<td>
<label><input type="checkbox" data-bind="checked:sameAsAbove" />Same As Above</label>
</td>
</tr>
<tr>
<td data-bind="if:sameAsAbove">
<label>Address:</label>
<input data-bind="value:address" />
</td>
<td data-bind="if:sameAsAbove">
<label>City:</label>
<input data-bind="value:city" />
</td>
<td data-bind="if:sameAsAbove">
<label>State:</label>
<input data-bind="value:State" />
</td>
</tr>
</table>
Here in the first row, in other words <tr> I took three input tags that are bound with the Address, City and State separately.
After that in the second row I took a Checkbox bound with the "sameAsAbove" Observable, but it's bound as checked:sameAsAbove. This will help the checkbox to remain unchecked in the begining and get checked only when the user clicks on it.
In the final row three <td> tags are used and you can see that they are bound as data-bind="if:sameAsAbove". This binding will make these columns appear only when the user checks the Checkbox otherwise they will not be visible to the user.
If the user checks the Checkbox then these <td> tags will become activated and the Input tags that are provided in these columns will get the same data that was passed in the Input boxes of the first row.
The complete code of my application is as follows:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebApplication33.WebForm3" %>
<!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">
<table>
<tr>
<td>
<label>Address:</label>
<input data-bind="value:address" />
</td>
<td >
<label>City:</label>
<input data-bind="value:city" />
</td>
<td >
<label>State:</label>
<input data-bind="value:State" />
</td>
</tr>
<tr>
<td>
<label><input type="checkbox" data-bind="checked:sameAsAbove" />Same As Above</label>
</td>
</tr>
<tr>
<td data-bind="if:sameAsAbove">
<label>Address:</label>
<input data-bind="value:address" />
</td>
<td data-bind="if:sameAsAbove">
<label>City:</label>
<input data-bind="value:city" />
</td>
<td data-bind="if:sameAsAbove">
<label>State:</label>
<input data-bind="value:State" />
</td>
</tr>
</table>
<script>
function x() {
this.address = ko.observable();
this.city = ko.observable("Ghaziabad");
this.State = ko.observable("Uttar Pradesh");
this.sameAsAbove = ko.observable(false);
};
ko.applyBindings(new x());
</script>
</form>
</body>
</html>
Output
On running the application you will get an output like this one:
![sameAsAbove Knockout1.jpg]()
Now if I provide my Address in the first TextBox and then click on the Checkbox then you will see that three new input boxes will be shown and they will have the same value as the Textboxes present above them.
![sameAsAbove Knockout2.jpg]()
Also I can change the Values in the first input boxes and you will see that the values are changed in the following Textboxes accordingly.
![sameAsAbove Knockout3.jpg]()
Now if I again uncheck the Checkbox then the following Textboxes will again disappear.
![sameAsAbove Knockout4.jpg]()