Как добавить кнопку Показать / Скрыть пароль в Listview ASP.NET?

Question

<EditItemTemplate >
    <li style="">username:
        <asp:Label ID="usernameLabel1" runat="server" Text='<%# Eval("username") %>' />
        <br />
        password:
        <asp:TextBox ID="passwordTextBox" runat="server" Text='<%# Bind("password") %>' />

        <asp:Button ID="btnClick" OnClick="btnClick_Click" runat="server" Text="Hide/Show" />
        <br />
        email:
        <asp:TextBox ID="emailTextBox"  runat="server" Text='<%# Bind("email") %>' />

        <br />
        phone:
        <asp:TextBox ID="phoneTextBox" runat="server" Text='<%# Bind("phone") %>' />
        <br />
        dob:
        <asp:TextBox ID="dobTextBox" runat="server" Text='<%# Bind("dob") %>' />
        <br />
        gender:
        <asp:TextBox ID="genderTextBox" runat="server" Text='<%# Bind("gender") %>' />
        <br />
        <asp:Button ID="UpdateButton" runat="server" CommandName="Update" Text="Update" />
        <asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="Cancel" />
    </li>
</EditItemTemplate>

Например, в шаблон элемента редактирования Listview я хочу добавить эту кнопку, чтобы получить доступ к этой кнопке в коде позади файла, как в Listview.

Answer 1

Для отображения пароля попробуйте следующий подход на стороне клиента:

.wrapper {
  display: inline-block;
  position: relative;
}

.reveal-eye {
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: absolute;
  right: 1px;
  top: 1px;
  bottom: 1px;
  z-index: 2;
  width: 30px;
  background: #fff url(https://dtzbdy9anri2p.cloudfront.net/cache/b55f544d09a0872a74b4427ce1fe18dd78418396/telerik/img/dist/reveal-password.png) 50% 50% no-repeat;
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s ease 0s, visibility 0s linear .2s;
}

.reveal-eye.is-visible {
  display: block;
  visibility: visible;
  opacity: 1;
  transition: opacity .2s ease 0s, visibility 0s linear 0s;
}

<div class="wrapper">
    <!--<asp:TextBox ID="passwordTextBox" runat="server" TextMode="Password" />-->
    <input type="password" id="passwordTextBox" />
</div>


<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
    function checkShowPasswordVisibility() {
        var $revealEye = $(this).parent().find(".reveal-eye");
        if (this.value) {
            $revealEye.addClass("is-visible");
        } else {
            $revealEye.removeClass("is-visible");
        }
    }

    $(document).ready(function () {
        var txtPassword = document.getElementById('passwordTextBox');
        var $revealEye = $('<span class="reveal-eye"></span>')
        $(txtPassword).parent().append($revealEye);
        $(txtPassword).on("keyup", checkShowPasswordVisibility)

        $revealEye.on({
            mousedown: function () { txtPassword.setAttribute("type", "text") },
            mouseup: function () { txtPassword.setAttribute("type", "password") },
            mouseout: function () { txtPassword.setAttribute("type", "password") }
        });
    })
</script>

Пример исходит из: Кнопка ShowPassword для RadTextBox с паролем TextMode

Однако, если вы хотите это сделатьна стороне сервера во время PostBack, вот пример, показывающий, как получить доступ к TextBox при нажатии кнопки Показать / Скрыть:

protected void btnClick_Click(object sender, EventArgs e)
{
    Button btn = sender as Button;

    TextBox TextBox1 = btn.Parent.FindControl("TextBox1") as TextBox;

    TextBox1.TextMode = TextBox1.TextMode == TextBoxMode.Password ? TextBoxMode.SingleLine : TextBoxMode.Password;
}

Answer 2

Вы разрабатываете веб-сайт, для любого взаимодействия с пользовательским интерфейсом настоятельно рекомендуется использовать javascript, css для управления им. Используйте только код для обработки данных.

function toggleShowPassword() {
	var passwordTextBox = document.getElementById('passwordTextBox');
	if(passwordTextBox.getAttribute('type')=='text'){
		passwordTextBox.type='password';
	}
	else {
		passwordTextBox.type='text';
	}
}

.button {
line-height: 100%;
display: inline-block;
padding: 7px 15px;
background: #6eddff;
text-decoration: none;
color: black;
border-radius: 6px;
}
.button:active,
.button:hover{
background: #3d9dba;
color: white;
}

<input id='passwordTextBox' type='password' value='abcd' />
<a class='button' href='#' onclick='toggleShowPassword(); return false;'>
Show/Hide Password</a>