'How to create a button for showing/hiding password in a MVC strongly typed razor view?

Scenario:
Creation of a basic HTML form with email, password fields and a submit button using ASP.NET MVC.

Required Cases:
(1) Strongly bounded View - fetching variables from the controller and being defined explicitly as properties in a Model.
(2) Use HTML helpers instead of html tags for the input fields
(3) Provide an option to show/hide the characters while entering the password in the HTML form on a web browser

The Model - LoginViewModel.cs

public class LoginViewModel
    {
        [DisplayName("Email")]
        public string Email{ get; set; }

        [DisplayName("Password")]
        public string LoginPassword { get; set; }
    }

The Controller - LoginController.cs

public class LoginController : Controller
{
    public ActionResult Login()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Login(LoginViewModel log)
    {

        var Email = log.Email.ToLower();
        var loginPassword = log.LoginPassword;

        try
        {
            //code logic
            return View("anotherView");
        }
        catch (System.Exception)
        {

            return View("exceptionView");
        }

        return View("tryAgainView");

    }

The View - Index.cshtml

@model Project.Models.LoginViewModel

@{
    ViewBag.Title = "Login";
    Layout = "~/Views/Shared/_Layout.cshtml";//This view contains custom coding
}

<!--HTML-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/Scripts/js")
</head>
<body>
    <header>
        <div class="container">
            <div class="row justify-content-center">
                @using (Html.BeginForm("Login", "Login", FormMethod.Post))
                    {
                        <div class="content">
                            <!-- Email input -->
                            <div class="form-outline">
                                @Html.TextBoxFor(lvm => lvm.Email, new { @class = "form-control", required = "yes", @type = "email", @autocomplete = "off", @onsubmit = "return process()" })
                                @Html.LabelFor(lvm => lvm.Email, new { @class = "form-label" })
                            </div>

                            <!-- Password input -->
                            <div class="form-outline">
                                @Html.PasswordFor(lvm => lvm.LoginPassword, new { @class = "form-control", required = "yes", @autocomplete = "off", @onsubmit = "return process()" })
                                @Html.LabelFor(lvm => lvm.LoginPassword, new { @class = "form-label" })
                            </div>

                            <!-- Insert Submit button logic here -->
                        </div>
                    }
                </div>
            </div>
        </div> 
    </header>
</body>
</html>

Checking the output HTML formatting (via the 'Inspect Element') of the password field

<input autocomplete="off" class="form-control" id="LoginViewModel_LoginPassword" name="LoginViewModel.LoginPassword" onsubmit="return process()" required="yes" type="password">

The Problem:
How do I add the password show/hide logic here?
I have tried most of the javascript additions within the View by playing around with the 'id' property in the HTML output formatting, but in vain.
I request you to please give a working solution which fits into the implementation that I've presented here.

Solution 1:^[1]

You'd need something along these lines (assuming you're using jQuery):

<form>
  <input id ="pw_input" type="password" />
  <button id="toggle">Toggle</button>
</form>

$('#toggle').click(function() {
  if ($('#pw_input').attr('type') === "password") {
    $('#pw_input').attr('type','text');
  }
  else {
    $('#pw_input').attr('type','password');
  }
})

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	melkisadek

'How to create a button for showing/hiding password in a MVC strongly typed razor view?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]