Implémentation de Jquery.ShowPassword dans MVC Razor View

Question

Tout ce qui se passe pour moi, c'est que la boîte de mot de passe disparaît et réapparaît lorsque la case est cochée.

code en vue de rasoir:

<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> 

J'ai la fonction Javascript dans un @renderpartail au fond:

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

Et les jquery.showpassword-1.0.js inclus en haut de la vue avec les autres scripts:

<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> 

Et vous Incase jamais vu le jquery.showpassword-1. 0.js ici est le code de cette:

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

Voici une démonstration de la façon dont il est censé fonctionner: http://sandbox.unwrongest.com/forms/jquery.showpassword.html

Tout ce qu'il fait pour moi est juste faire le champ de saisie de mot de passe sur disapear le premier clic de la case à cocher, puis réapparaît sur le second clic, mais sur la troisième Cliquez simplement le mot de passe * ** * ** * * disapears, ne montrant aucun texte tout, mais la boîte de texte reste.

Je l'ai utilisé sur des vues .aspx sans problème, comment est-ce que j'implémente en utilisant une vue rasoir?

Answer 1

Vous avez attaché le plugin showPassword à un champ d'entrée avec identifiant #text: $('#text').showPassword('#checkbox'); alors que votre champ de mot de passe a l'ID #Password.

Alors, voici un exemple de travail complet:

Modèle:

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

Controller:

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

Vue:

@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>