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

Yatendra Sharma
9y
10.2k
0
0
100
Article

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.

<head runat="server">
<title></title>
<script src="Scripts/knockout-3.3.0.js"></script>
</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:

<div>
<p>First Name<strong data-bind="text: StartName"></strong></p>
<p>Middle Name<strong data-bind="text: middlename"></strong></p>
<p>LastName<strong data-bind="text: EndName"></strong></p>
<input data-bind="value: StartName" />
<input data-bind="value: middlename"? />
<input data-bind="value: EndName" />
<p>Hiiii!<strong data-bind="text: completeName"></strong></p>
<button data-bind="click: capsName">Submit</button>
</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

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication4.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/knockout-3.3.0.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>First Name<strong data-bind="text: StartName"></strong></p>
<p>Middle Name<strong data-bind="text: middlename"></strong></p>
<p>LastName<strong data-bind="text: EndName"></strong></p>
<input data-bind="value: StartName" />
<input data-bind="value: middlename"? />
<input data-bind="value: EndName" />
<p>Hiiii!<strong data-bind="text: completeName"></strong></p>
<button data-bind="click: capsName">Submit</button>
</div>
</form>
<script>
function x()
{
this.StartName = ko.observable("Rahul");
this.middlename = ko.observable("Kumar");
this.EndName = ko.observable("Sharma");
this.completeName = ko.computed(function ()
{
return this.StartName() + " " + this.middlename() + " " + this.EndName();
}, this);
this.capsName = function ()
{
var firstCaps = this.StartName();
this.StartName(firstCaps.toLowerCase());
var middleCaps = this.middlename();
this.middlename(middleCaps.toLowerCase());
var lastCaps = this.EndName();
this.EndName(lastCaps.toLowerCase());
}
}
ko.applyBindings(new x());
</script>
</body>
</html>