Introduction
In today's article I will show you how to convert a Label into a TextBox at runtime using Knockoutjs in an ASP.NET Application.
This will be like magic, that a control is converted to some other control at runtime just by clicking on it.
In this article you will see that a label that was showing your name is converted to a TextBox on which you can make changes and as you click outside the TextBox, the TextBox will again be converted to a Label.
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 download my application that is available at the start of this article in Zip Format and then can use the file attached with 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 for this you need to add a Script tag under the Body Section and then add this code:
<script type="text/javascript">
function x() {
this.FirstName = ko.observable("Anubhav");
this.change = ko.observable(false);
this.edit = function ()
{
this.change(true)
}
}
ko.applyBindings(new x());
</script>
As always I had first created a function named as "x()".
In this function I had taken two Observables and a function. The first Observable is named "FirstName" in which some default value is passed.
Then another Observable named "change" is declared but is made false by default. This means that wherever this Observable is applied that Control will not be shown at runtime.
Then a function is created named "edit()", this function will change the Observable to True.
At the end binding is applied to the function "x()".
Step 3
Until now our work on the ViewModel is completed so we can move towards the view of our application.
Write this code in the view of your application:
<div>
<label>Your Name:-</label>
<b data-bind="visible: !change(), text: FirstName, click: edit"> </b>
<input data-bind="visible: change, value: FirstName, hasFocus: change" />
<br />
<br />
<label>Click on Your name to make changes in it.</label>
</div>
Here first I created a Label that will be bold, here three bindings are done. In the first binding change is made invisible, in the second binding text is bound that means that it will show the value of FirstName, the third binding is for the click event, click event will fire the edit function and will make an edit function to work on.
Then a TextBox is used that also has three bindings associated with it. In the first binding the change is made visible, in the second binding the TextBox will have the Text that is passed through the FirstName and the last binding is done for gaining the focus in the TextBox.
Now your application is ready and you can debug it to see the output.
The complete code of my application is as follows:
<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>
<label>Your Name:-</label>
<b data-bind="visible: !change(), text: FirstName, click: edit"> </b>
<input data-bind="visible: change, value: FirstName, hasFocus: change" />
<br />
<br />
<label>Click on Your name to make changes in it.</label>
</div>
<script type="text/javascript">
function x() {
this.FirstName = ko.observable("Anubhav");
this.change = ko.observable(false);
this.edit = function ()
{
this.change(true)
}
}
ko.applyBindings(new x());
</script>
</form>
</body>
</html>
Output
On running the application you will get output like this:
![change label to textbox knockout1]()
Now if you click on the label then you will see the Label converted into the TextBox.
![change label to textbox knockout2]()
Now I am updating the text inside this TextBox.
![change label to textbox knockout3]()
On clicking outside the TextBox it will again be converted to the Label.
![change label to textbox knockout4]()
The complete output was as follows:
![change label to textbox knockout5]()