In this article I will explain with an example, how to encrypt using JavaScript and decrypt inside Controller in ASP.Net MVC.
This article makes use of CryptoJS AES library to perform encryption using JavaScript.
Note: For beginners in ASP.Net MVC, please refer my article ASP.Net MVC Hello World Tutorial with Sample Program example.
 
 

CryptoJS AES JavaScript library

CryptoJS AES JavaScript library is a JavaScript based encryption library used to perform encryption on Client Side. For complete documentation, please refer the following link.
https://cryptojs.gitbook.io/docs
 
 

Namespaces

You will need to import the following namespaces.
C#
using System.Text;
using System.Security.Cryptography;
 
VB.Net
Imports System.Text
Imports System.Security.Cryptography
 
 

Controller

The Controller consists of following Action methods.

Action method for handling GET operation

Inside this Action method, simply the View is returned.
 

Action method for handling POST operation

Inside this Action method, the encrypted text is decrypted using Decrypt method and set into a ViewBag object.
Note: For details on Decryption method, please refer my article ASP.Net MVC: AES Encryption Decryption (Cryptography) Tutorial.
 
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
 
    [HttpPost]
    public ActionResult Index(string encrypted)
    {
        ViewBag.DecryptedValue = this.Decrypt(encrypted);
        return View();
    }
 
    private string Decrypt(string encryptedText)
    {
        //Secret Key.
        string secretKey = "$ASPcAwSNIgcPPEoTSa0ODw#";
 
        //Secret Bytes.
        byte[] secretBytes = Encoding.UTF8.GetBytes(secretKey);
 
        //Encrypted Bytes.
        byte[] encryptedBytes = Convert.FromBase64String(encryptedText);
 
        //Decrypt with AES Alogorithm using Secret Key.
        using (Aes aes = Aes.Create())
        {
            aes.Key = secretBytes;
            aes.Mode = CipherMode.ECB;
            aes.Padding = PaddingMode.PKCS7;
 
            byte[] decryptedBytes = null;
            using (ICryptoTransform decryptor = aes.CreateDecryptor())
            {
                decryptedBytes = decryptor.TransformFinalBlock(encryptedBytes, 0, encryptedBytes.Length);
            }
 
            return Encoding.UTF8.GetString(decryptedBytes);
        }
    }
}
 
 

View

HTML Markup

The View consists of an HTML Form which has been created using the Html.BeginForm method with the following parameters.
ActionName – Name of the Action. In this case it is Index.
ControllerName – Name of the Controller. In this case the name is Home.
FormMethod – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
The Form consists of a TextBox created using Html.TextBox Helper method, a Submit button and an HTML SPAN element.
 

Encryption

Below the HTML Form, the following JS file is inherited.
1.crypto-js.min.js
Note: For Encryption and Decryption, AES encryption algorithm will be used, where a Symmetric (Same) key will be used for encryption and decryption process.
 
Then, the secret key is defined for the encryption and decryption and converted into a BYTE array using parse method of the CryptoJS JavaScript library.
When the Submit button is clicked the Encrypt JavaScript is executed and the plain text is captured from the TextBox and passed as parameter to encrypt method of CryptoJS JavaScript library where the following properties are 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 set in the TextBox and its value is sent to the Controller's Action method.
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {
        @Html.TextBox("encrypted", "", new { @id = "txtPlain" })
        <input type="submit" value="Submit" onclick="Encrypt()" />
        <hr />
        <span>@ViewBag.DecryptedValue</span>
    }
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.2.0/crypto-js.min.js" integrity="sha512-a+SUDuwNzXDvz4XrIcXHuCf089/iJAoN4lmrXJg18XnduKK6YlDHNRalv4yd1N40OKI80tFidF+rqTFKGPoWFQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script type="text/javascript">
        //Secret Key.
        var secretKey = "$ASPcAwSNIgcPPEoTSa0ODw#";
 
        //Secret Bytes.
        var secretBytes = CryptoJS.enc.Utf8.parse(secretKey);
 
        function Encrypt() {
            //Read the Plain text.
            var txtPlain = document.getElementById("txtPlain");
 
            //Encrypt with AES Alogorithm using Secret Key.
            var encrypted = CryptoJS.AES.encrypt(txtPlain.value, secretBytes, {
                mode: CryptoJS.mode.ECB,
                padding: CryptoJS.pad.Pkcs7
            });
 
            //Set the encrypted Text in TextBox.
            txtPlain.value = encrypted;
        }
    </script>
</body>
</html>
 
 

Screenshot

ASP.Net MVC: Encrypt using JavaScript and Decrypt in Controller
 
 

Demo

View Demo
 
 

Downloads

Download Code