ASP.NET MVC 4中显示密码复选框

Question

如何在单击复选框时显示或隐藏密码？ 这是我的模型类 -

    public partial class user
{
    [Required]
    public string username { get; set; }
    [Required]
    [DataType(DataType.Password)]
    public string password { get; set; }
}

我已经完成了以下操作——在我的视图中：

    @Html.EditorFor(model => model.password, new { htmlAttributes = new { @class = "form-control" } })

现在我想添加一个复选框，可以显示和隐藏密码。

我查找了一下，发现可以通过javascript轻松地在webform中通过更改'类型'从'密码'到'文本'来完成此操作，但是在MVC中，我已经在模型类中指定了我的数据类型。所以，是否有办法使用jQuery或javascript将其更改为文本？

- sowmyaa guptaa

Answer 1

由于ASP.NET MVC也是客户端JavaScript，因此您可以使用同样的方法。 Razor使用属性来渲染输入元素。一旦呈现到浏览器中，您可以使用客户端JavaScript对呈现的输出执行任何操作。

假设您有一个ID为showPass的复选框

@Html.EditorFor(model => model.password, new { @class = "form-control" } )
<input type="checkbox" id="showPass"/>

现在，监听此复选框上的change事件，如果为真，则仅更新输入元素的type属性值。

$(function() {

    $("#showPass").change(function() {
        var checked = $(this).is(":checked");           
        if (checked) {
            $("#password").attr("type", "text");
        } else {
            $("#password").attr("type", "password");
        }
    });

});

- Shyju