Implementing Jquery.ShowPassword in MVC Razor View

Question

All that is happening for me is the Password Box is just disappearing and re-appearing on when the check box is checked.

Code in razor view:

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

I have the Javascript function in a @renderpartail at the bottom:

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

And the jquery.showpassword-1.0.js included at the top of the view with the other 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>

And incase you never seen the jquery.showpassword-1.0.js here is code from that:

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

Here is a Demo of how it is supposed to work: http://sandbox.unwrongest.com/forms/jquery.showpassword.html

All it is doing for me is just making the password textbox disapear on the first click of the checkbox, and then reappear on the second click, but then on the Third Click just the password ******** disapears, not showing any text at all, but the textbox stays.

I have used it on .aspx views with no problem, how do I impliment using a Razor View?

Answer 1

You have attached the showPassword plugin to an input field with id #text : $('#text').showPassword('#checkbox'); whereas your password field has the #Password id.

So here's a full working example:

Model:

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

Controller:

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

View:

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