Post
Ask Question

Convert Uppercase to Lowercase on Click of a Button Using Knockout.js

In my previous article about Knockout.js, I explained Computed Observables in Knockout.js.

This article explains how to convert words into lowercase on the click of a button.

Step 1

Start Visual Studio.


Step 2

For executing application in knockout.js we need to add the knockout.js library to our website. To do that we will manage the NuGet Package. For this, right-click on the website and click on the NuGet Packages.


Step 3

In the NuGet packages we will search for Knockout.js and install Knockout.js library.


Step 4

After adding the library, now we will design the web form like the following:


Step 5

Now we need to add the knockout.js file to our application.

  1. <head runat="server">  
  2.     <title></title>  
  3.     <script src="Scripts/knockout-3.3.0.js"></script>  
  4. </head>  

I have added the knockout-3.3.0.js file because without this we can't do the knockout.js operation.

We write the following code for designing the form:

  1. <div>  
  2.         <p>First Name<strong data-bind="text: StartName"></strong></p>  
  3.         <p>Middle Name<strong data-bind="text: middlename"></strong></p>  
  4.         <p>LastName<strong data-bind="text: EndName"></strong></p>  
  5.         <input data-bind="value: StartName" />  
  6.         <input data-bind="value: middlename"? />  
  7.         <input data-bind="value: EndName" />  
  8.         <p>Hiiii!<strong data-bind="text: completeName"></strong></p>  
  9.         <button data-bind="click: capsName">Submit</button>  
  10. </div>  

In this I have taken three labels that indicate the first name, middle name, last name and I have also taken three textboxes for input from the user. Also, I will add a button for performing the operations.

Step 6

Now we will write the complete code for Knockout.js. By default I have taken the value Rahul kumar Sharma.

Complete Code

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication4.WebForm1" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8.     <script src="Scripts/knockout-3.3.0.js"></script>  
  9. </head>  
  10. <body>  
  11.     <form id="form1" runat="server">  
  12.     <div>  
  13.         <p>First Name<strong data-bind="text: StartName"></strong></p>  
  14.         <p>Middle Name<strong data-bind="text: middlename"></strong></p>  
  15.         <p>LastName<strong data-bind="text: EndName"></strong></p>  
  16.         <input data-bind="value: StartName" />  
  17.         <input data-bind="value: middlename"? />  
  18.         <input data-bind="value: EndName" />  
  19.         <p>Hiiii!<strong data-bind="text: completeName"></strong></p>  
  20.         <button data-bind="click: capsName">Submit</button>  
  21.     </div>  
  22.     </form>  
  23.     <script>  
  24.         function x()  
  25.         {  
  26.             this.StartName = ko.observable("Rahul");  
  27.             this.middlename = ko.observable("Kumar");  
  28.             this.EndName = ko.observable("Sharma");  
  29.             this.completeName = ko.computed(function ()  
  30.             {  
  31.                 return this.StartName() + " " + this.middlename() + " " + this.EndName();  
  32.             }, this);  
  33.   
  34.             this.capsName = function ()  
  35.             {  
  36.                 var firstCaps = this.StartName();  
  37.                 this.StartName(firstCaps.toLowerCase());  
  38.                 var middleCaps = this.middlename();  
  39.                 this.middlename(middleCaps.toLowerCase());  
  40.                 var lastCaps = this.EndName();  
  41.                 this.EndName(lastCaps.toLowerCase());  
  42.             }  
  43.         }  
  44.         ko.applyBindings(new x());  
  45.     </script>  
  46. </body>  
  47. </html>  
Step 7

Now we will execute that code using the F5 key. After execution the following window appears on the screen.


If we click on the submit button then all words are converted into lowercase.


Summary

In this article I explained how to convert words into lowercase on the click of a button.

I hope this article will be helpful for beginners if they want to start working on knockout.js in Visual Studio 2013.


Similar Articles