Реализация Jquery.ShowPassword в MVC Razor View - PullRequest
Новая
       58

Реализация Jquery.ShowPassword в MVC Razor View

1 голос
/ 13 февраля 2011

Все, что происходит со мной, это то, что поле пароля просто исчезает и вновь появляется, когда флажок установлен.

Код в виде бритвы: 

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

У меня есть функция Javascript в @renderpartail внизу: 

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

И если вы никогда не видели 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

Все, что он делает для меня, это просто делает текстовое поле пароля исчезающим при первом щелчке флажка, а затем снова появляется при втором щелчке, а затем при третьем щелчке просто пароль ******** исчезает, текст вообще не отображается, но текстовое поле остается.

Я использовал его в представлениях .aspx без проблем, как мне использовать Razor View?

1 Ответ

2 голосов
/ 13 февраля 2011

Вы подключили плагин showPassword к полю ввода с идентификатором #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>
...