Создайте кнопку в MVC, чтобы скрыть метки, и замените ее на «******».

Question

Краткая справка, мое приложение представляет собой менеджер паролей и имеет страницу, на которой отображаются ярлыки, службы, например gmail, и сохраненный пароль, связанный с ним. Я пытаюсь найти способ иметь кнопку или флажок, чтобы показать или скрыть пароли, чтобы пользователь мог видеть свои пароли, а затем нажать кнопку, чтобы скрыть пароли и замаскировать их рядом звездочек. Я надеялся, что у кого-нибудь может быть jquery или идея бритвы, чтобы помочь им?

   <div class="panel-body">
                    <table class="table table-bordered table-responsive table-hover">
                        <tr>
                            <th>
                                @Html.DisplayNameFor(model => model.Website)
                            </th>
                            <th>
                                @Html.DisplayNameFor(model => model.Password)
                            </th>
                            <th>
                                @Html.DisplayNameFor(model => model.DateSaved)
                            </th>
                            <th></th>
                        </tr>

                        @foreach (var item in Model)
                        {
                            <tr>
                                <td>
                                    @Html.DisplayFor(modelItem => item.Website)
                                </td>
                                <td>
                                    @Html.DisplayFor(modelItem => item.Password)
                                </td>
                                <td>
                                    @Html.DisplayFor(modelItem => item.DateSaved)
                                </td>
                                <td>
                                    @Html.ActionLink(" Edit", "Edit", new { id = item.Id }, new { @class = "btn btn-primary btn-sm glyphicon glyphicon-pencil" })
                                    @Html.ActionLink(" Details", "Details", new { id = item.Id }, new { @class = "btn btn-info btn-sm glyphicon glyphicon-eye-open" })
                                    @Html.ActionLink(" Delete", "Delete", new { id = item.Id }, new { @class = "btn btn-danger btn-sm glyphicon glyphicon-trash" })
                                    @Html.ActionLink(" Strength Check", "Index", "StrengthCheck", new { id = item.Id }, new { @class = "btn btn-warning btn-sm" })
                                </td>
                            </tr>
                        }

                    </table>

Answer 1

Вы можете использовать простую функцию JQuery для переключения поля между звездочками и значением реального пароля. Хитрость заключается в том, чтобы убедиться, что каждое поле пароля уникально идентифицируемо, поэтому вы нажимаете только один пароль, когда нажимаете кнопку (я предполагаю, что на экране будет несколько паролей, поскольку он находится в таблице)

Изменить foreach l oop к этому, так что у вас есть доступ к индексу. Это дает вам простой доступ к уникальному значению для каждой строки:

foreach (var item in Model.Select((value, i) => new { i, value }))
{
    // You access the values like this now
    var value = item.value;
    var index = item.i;
}

См. Этот ответ для справки (ответ под утвержденным ответом): Как получить индекс текущей итерации a foreach l oop?

В таблицу html введите:

<td>
    <span id="password-@item.i" style="display: none;">@item.value.Password</span>
    <span id="hidden-password-@item.i">*******</span>

    <button onclick="showHidePassword('@item.i')">Toggle</button>
</td> 

И где-то на странице добавьте следующее javascript:

function showHidePassword(i) {    
  if ($('#password-' + i).is(':visible')) {
    $('#password-' + i).hide();
    $('#hidden-password-' + i).show();
  } else {
    $('#password-' + i).show();
    $('#hidden-password-' + i).hide();
  }
}

Надеюсь, это поможет. Чтобы упростить повторное использование, вы можете переместить его в html метод расширения в зависимости от того, как вы строите остальную часть страницы