在MVC Razor视图中实现Jquery.ShowPassword
问题描述:
我所发生的一切就是密码框正在消失,并在复选框被选中时重新出现。在MVC Razor视图中实现Jquery.ShowPassword
代码在Razor视图:
<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>
我已经在底部的@renderpartail的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>
并incase你从来没有见过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
所有它做对我来说只是把密码文本框disapear上复选框的第一次点击,然后重新出现在第二次点击,但随后在第三次点击刚刚密码* ** * ** * *在前看不见,不显示任何文本所有,但文本框停留。
我已经在.aspx视图上使用了它,没有问题,我如何使用Razor视图来实现impliment?
答
您已将showPassword
插件附加到输入字段,其ID为#text
:$('#text').showPassword('#checkbox');
而您的密码字段的编号为#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>
非常感谢,伟大的工作! – 2011-02-13 20:10:54