MVC 면도기 뷰에서 Jquery.ShowPassword 구현

Question

나에게 일어나는 모든 일은 비밀번호 체크 박스가 선택되었을 때 비밀번호 상자가 사라지고 다시 나타납니다. 상단에 포함

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

그리고 jquery.showpassword-1.0.js : 면도기보기

코드 :

<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에서 자바 스크립트 기능을 한 다른 스크립트와 함께보기 :

<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 것과 코드 : http://sandbox.unwrongest.com/forms/jquery.showpassword.html

을 나를 위해하고있는 모든 그냥 사라지는의 암호 텍스트 상자를 만드는 :

여기

(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); 

작동하도록되어 방법의 데모입니다 다음 첫 번째 체크 박스의 클릭과 두 번째 클릭에 다시, 그러나 세 번째 클릭 단지 암호 * ** * ** * * disapears을, 텍스트에 표시되지 않는에 모두 있지만 텍스트 상자는 그대로 있습니다.

.aspx 뷰에서 문제없이 사용했는데, 면도기 뷰를 사용하여 어떻게 구현합니까?

Answer 1

입력란에 #text : $('#text').showPassword('#checkbox'); 인 입력란에 플러그인을 연결하고 비밀번호 입력란에 #Password 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>