在 MVC Razor 视图中实现 Jquery.ShowPassword答案

【问题标题】：Implementing Jquery.ShowPassword in MVC Razor View在 MVC Razor 视图中实现 Jquery.ShowPassword
【发布时间】：2011-02-13 00:54:13
【问题描述】：

对我来说发生的所有事情就是密码框在复选框被选中时消失并重新出现。

剃刀视图中的代码：

<div id="passtext" class="editor-field">
    @Html.PasswordFor(m => m.Password)
    @Html.ValidationMessageFor(m => m.Password)
</div>

            <div class="editor-label">
                <input id="passcheckbox" type="checkbox" /><label>Show?</label>
                @Html.CheckBoxFor(m => m.RememberMe)
                @Html.LabelFor(m => m.RememberMe)
            </div>

我在底部的@renderparttail 中有 Javascript 函数：

@section Scripts {
<script type="text/javascript">
    $('#text').showPassword('#checkbox');
</script>
}

jquery.showpassword-1.0.js 包含在视图顶部和其他脚本中：

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.showpassword-1.0.js")" type="text/javascript"></script>

如果你从来没有见过 jquery.showpassword-1.0.js 这里的代码来自于：

(function($){$.fn.extend({showPassword:function(f){return this.each(function(){var c=function(a){var a=$(a);var b=$("<input type='text' />");b.insertAfter(a).attr({'class':a.attr('class'),'style':a.attr('style')});return b};var d=function($this,$that){$that.val($this.val())};var e=function(){if($checkbox.is(':checked')){d($this,$clone);$clone.show();$this.hide()}else{d($clone,$this);$clone.hide();$this.show()}};var $clone=c(this),$this=$(this),$checkbox=$(f);$checkbox.click(function(){e()});$this.keyup(function(){d($this,$clone)});$clone.keyup(function(){d($clone,$this)});e()})}})})(jQuery);

这是一个演示它应该如何工作： http://sandbox.unwrongest.com/forms/jquery.showpassword.html

它为我所做的只是让密码文本框在第一次单击复选框时消失，然后在第二次单击时重新出现，但在第三次单击时只是密码* em>******* 消失，根本不显示任何文本，但文本框仍然存在。

我在 .aspx 视图上使用它没有问题，我如何使用 Razor 视图实现？

【问题讨论】：

标签： jquery textbox asp.net-mvc-3 razor passwordbox

【解决方案1】：

您已将 showPassword 插件附加到 ID 为 #text 的输入字段：$('#text').showPassword('#checkbox'); 而您的密码字段的 ID 为 #Password。

这是一个完整的工作示例：

型号：

public class MyViewModel
{
    public string Password { get; set; }
}

控制器：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View(new MyViewModel());
    }
}

查看：

@model AppName.Models.MyViewModel

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.showpassword-1.0.js")" type="text/javascript"></script>

<script type="text/javascript">
    $(function () {
        $('#Password').showPassword('#checkbox');
    });
</script>

<div id="passtext" class="editor-field">
    @Html.PasswordFor(m => m.Password)
    @Html.ValidationMessageFor(m => m.Password)
</div>

<label for="checkbox">
    <input id="checkbox" type="checkbox" /> Show password
</label>

【讨论】：