在MVC Razor視圖中實現Jquery.ShowPassword

Question

我所發生的一切就是密碼框正在消失，並在複選框被選中時重新出現。

代碼在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？

Answer 1

您已將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>