Using ASP.NET: July 2025

Friday, 25 July 2025

Encryption and Decryption using Javascript

Introduction: Hello Guys, “Welcome back” Today i am here with another one new great article. In this article I will explain about how to encrypt and decrypt text using Javascript. Guys, in this article i am using CryptoJS AES library for encryption and decryption using Javascript.

Introduction about CryptoJS AES JavaScript library

CryptoJS AES Javascript library is a Javascript based encryption library use for encryption and decryption on Client end. For learn complete article on CryptoJS AES Javascript library , please follow below link.

https://cryptojs.gitbook.io/docs

HTML

On the HTML page there will be Two Controls, one is text box with the id named txt_input for to enter the input by the user and this text will convert capturing plain text to be encrypted. And other one control is two Button. These buttons will perform encrypting and decrypting function. Here i will assigned Javascript onclick event handler to the buttons. And another control is SPAN for showing encrypted and decrypted text.

HTML Code :

<br />

Encrypted Text:<span id="lbl_encryption"></span>

<hr />

Decrypted Value: <span id="lbl_decryption"></span>

Encryption and Decryption using JavaScript

Encryption

Inside the HTML page i will inherit JS file named crypto-js.min.js

Here i will also define the secret key for the encryption and decryption and converted into a BYTE array using parse method of the CryptoJS Javascript library.

Inside the Encrypt function, the plain text entered by the user from the TextBox and passed using a parameter to encrypt method of CryptoJS Javascript library where all important of compulsory properties has been already set.

Mode - It defines the mode of the operation. Here it is CryptoJS.mode.ECB (Electronic Codebook).

Padding - It specifies padding mode.

Finally, the encrypted text is displayed using HTML SPAN element.

Decryption

Inside the Decrypt function, the encrypted text is captured from the SPAN control and passed using a parameter to decrypt method of CryptoJS Javascript library where where all important of compulsory properties has been already set.

Mode - It defines the mode of the operation. Here it is CryptoJS.mode.ECB (Electronic Codebook).

Padding - It specifies padding mode.

Finally, the decrypted text is displayed using HTML SPAN control.

Now Here i am giving complete code for the HTML page. You can copy and paste the whole code on your HTMl page. And enjoy the execution of the whole concept.

<!DOCTYPE html>

<html>

<head>

body { font-family: Arial; font-size: 10pt; }

</style>

</head>

<body>

Plain Text:

<br />

Encrypted Text:<span id=" lbl_encryption "></span>

<hr />

Decrypted Value: <span id="lbl_decryption"></span>

+rqTFKGPoWFQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

//Secret Key.

var secretKey = "$ASPcAwSNIgcPPEoTSa0ODw#";

//Secret Bytes.

var secretBytes = CryptoJS.enc.Utf8.parse(secretKey);

function Encrypt() {

//Read the Plain text.

var plainText = document.getElementById("txt_input ").value;

//Encrypt with AES Alogorithm using Secret Key.

var encrypted = CryptoJS.AES.encrypt(plainText, secretBytes, {

mode: CryptoJS.mode.ECB,

padding: CryptoJS.pad.Pkcs7

});

//Display the Encrypted Text.

document.getElementById("lbl_encryption ").innerHTML = encrypted;

}

function Decrypt() {

//Read the Encrypted text.

var encryptedText = document.getElementById("lbl_encryption").innerHTML;

//Decrypt with AES Alogorithm using Secret Key.

var decryptedBytes = CryptoJS.AES.decrypt(encryptedText, secretBytes,

{

mode: CryptoJS.mode.ECB,

padding: CryptoJS.pad.Pkcs7

});

//Display the Decrypted Text.

document.getElementById("lbl_decryption").innerHTML = decryptedBytes.toString(CryptoJS.enc.Utf8);

}

</script>

</body>

</html>

Conclusion: In above code, I explained that how to encrypt and decrypt text using Javascript. This code is very helpful for every developer. Bye BYE and take care of yourself Developers. We will come back shortly with the new article.

Regards

Using Asp.net

Thursday, 24 July 2025

Search and Filter Array in JavaScript

Introduction: Hello Guys, “Welcome back” Today i am here with another one new great article. In this article I will explain that how to search and filter array in Javascript

Code for HTML Page

On the HTML page there will be Two Controls, one is text box with the id named txt_filter for to enter the input by the user and this text box is assigned with onkeyup event handler. And other one control is Span with the id named lbl_output for displaying the filtered records

<br />

Search and Filter Array in JavaScript

There will be Filter JavaScript function is called in the window.onload and TextBox onkeyup event handler,.

Filter JavaScript function

FOR loop will executed in the Array an Array of names is defined Inside the Filter Javascript function

Inside the Filter Javascript function, and a FOR loop is executed over it.

Then, inside the FOR loop, a condition is performed for checking whether the Array index is not equal to -1 then Array will be copied inside another one Array named filterArr.

After this, a check is performed if the Array length is greater than 0 then filtered result will be shown in the HTML SPAN control.

Below i am giving complete code for the HTML page. You can copy and paste complete code inside the HTML page for execute the code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

body { font-family: Arial; font-size: 10pt; }

</style>

window.onload = function () {

Filter("");

};

function Filter(value) {

var arr = [

"Bharat Bhushan",

"Sanjeev Kumar",

"Nancy Kohli",

"Ruhika",

"Danish Verma",

"Micheal Mike",

"Sachin Verma",

"Nishant Malhotra",

"Harry Sharma",

"Aman Salotra"

];

var filterArr = [];

for (var i in arr) {

if (arr[i].toLowerCase().indexOf(value.toLowerCase()) != -1) {

filterArr[filterArr.length] = arr[i];

}

if (filterArr.length > 0) {

document.getElementById("lbl_output").innerHTML = filterArr.join("<br />");

} else {

document.getElementById("lbl_output").innerHTML = "No matches!";

}

</script>

</head>

<body>

<br />

</body>

</html>

Conclusion: In above code, I explained that how to search and filter array in Javascript. This code is very helpful for every developer. Bye Bye and take care of your Developers. We will come back shortly with the new article.

Regards

Using Asp.net

Wednesday, 23 July 2025

Create jsTree in HTML

Introduction: Hello Guys, “Welcome back” Today i am here with another one new great article. In this article I will explain about to Create jsTress in HTML.

Implementation: On the HTML there will be three elements, first one is div with id named "jstree" and second one is HiddenField with the id named "selectedItems" for storing selected items and other one is Button with the id named "btn_Submit" for selected items.

jQuery TreeView implementation

The style.min.css CSS file will be inherited on the HTML page. Also jquery.min.js and jstree.min.js script files will be inherited on the HTML page. Inside the Jquery document ready event handler, the JSON data is set in the variable. Now, the jQuery jsTree plugin will be applied to the HTML DIV and the JSON data is assigned as data source in the data property. The jQuery jsTress plugin has been assigned with the changed.jstrss event handler.Inside the changed.jstree event handler of the jQuery jsTress plugin, an Array is declared.Then, a FOR loop will be executed over the selected (checked) items of jQuery jsTress and saved into the Array one by one. Finally, the Array of JSON object is arrange (Array) in a series and saved in the Hidden Field. The Button has been assigned with a jQuery click event handler for displaying selected checked items. When the Submit Button is clicked, the selected items of jQuery jsTress is set in the HiddenField which will be displayed using JavaScript Alert Message Box.

Here I am giving the complete HTML. You can copy and paste the whole code to enjoy the article execution.

<!DOCTYPE html>

<html>

<head>

body { font-family: Arial; font-size: 10pt; }

</style>

</head>

<body>

$(function () {

var json = [

{ "id": "1", "parent": "#", "text": "Mobiles" },

{ "id": "2", "parent": "#", "text": "Watches" },

{ "id": "3", "parent": "#", "text": "Shoes" },

{ "id": "1-1", "parent": "1", "text": "OPPO" },

{ "id": "1-2", "parent": "1", "text": "iPhone" },

{ "id": "1-3", "parent": "1", "text": "Moto" },

{ "id": "1-4", "parent": "1", "text": "Nokia" },

{ "id": "2-5", "parent": "2", "text": "Titan" },

{ "id": "2-6", "parent": "2", "text": "HMT" },

{ "id": "2-7", "parent": "2", "text": "Rolex" },

{ "id": "2-8", "parent": "2", "text": "Breitling" },

{ "id": "3-9", "parent": "3", "text": "Reebok" },

{ "id": "3-10", "parent": "3", "text": "Bata" },

{ "id": "3-11", "parent": "3", "text": "Redtape" }

];

$('#jstree').on('changed.jstree', function (e, data) {

var i, j;

var selectedItems = [];

for (i = 0, j = data.selected.length; i < j; i++) {

//Fetch the Id.

var id = data.selected[i];

//Remove the ParentId.

if (id.indexOf('-') != -1) {

id = id.split("-")[1];

}

//Add the Node to the JSON Array.

selectedItems.push({

text: data.instance.get_node(data.selected[i]).text,

id: id,

parent: data.selected[i].split("-")[0]

});

}

//Serialize the JSON Array and save in HiddenField.

$('#selectedItems').val(JSON.stringify(selectedItems));

}).jstree({

"core": {

"themes": { "variant": "large" },

"data": json

"checkbox": { "keep_selected_style": false },

"plugins": ["wholerow", "checkbox"]

});

$("#btn_Submit").click(function () {

alert($('#selectedItems').val());

});

</script>

</body>

</html>

Conclusion: In above code, I have been explained that how to Create jsTress in HTML . This code is very helpful for every developer. Bye Bye and take care of yourself Developers. We will come back shortly with the new article.

Regards

Using Asp.net