在MVC Razor View中实现Jquery.ShowPassword
所有发生的事情都是密码盒刚刚消失，并在选中复选框时重新出现。
剃刀视图中的代码：
<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>
@section Scripts {
<script type="text/javascript">
$('#text').showPassword('#checkbox');
</script>
}
<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>
(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);
没有找到相关结果
已邀请:
1 个回复
骂狮淋唐便
插件附加到ID为的输入字段：$('#text').showPassword('#checkbox');id。 所以这是一个完整的工作示例： 模型：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>