Любые хорошие предложения, чтобы предупредить / напомнить пользователю сохранить после редактирования поля на веб-странице?

Question

У меня есть сайт asp.net-mvc и страница с большим количеством строк таблицы редактируемых полей и т. Д., Которые можно редактировать. Поскольку страница довольно длинная, кнопка сохранения часто не видна на экране с заданным размером экрана.

Мы столкнулись с проблемами, когда люди говорили, что вносят изменения, но забывают нажать "сохранить", потому что на экране это не очевидно. Мне нужно решение, которое будет напоминать пользователю, когда он вносит изменения, которые еще не были сохранены до тех пор, пока они не нажмут кнопку "Сохранить".

Есть ли рекомендуемые лучшие практики / примеры для того, чтобы сделать что-то подобное?

Answer 1

Я бы лично внедрил всплывающее окно с уведомлением, например, Bootstrap Notify. Я хотел бы создать JS для выполнения уведомления через X минут.

Answer 2

Мне нравится показывать предупреждение о загрузке. Я размещаю оповещение так, чтобы оно отображалось в верхней части моей страницы следующим образом:

Я использую вспомогательный объект JSFiddle

(function() {

    var notify = new Notify({
        container: document.getElementById('alerts'),
        template: `<div class="alert alert-{{type}}" role="alert"><div class="text-center">{{message}}</div></div>`
    });

    notify.danger('Some error message');

}());

Answer 3

У вас может быть тостер, который будет появляться на экране следующим образом:

<script>
$(document).ready(function () {
    toastr.options.showMethod = 'slideDown';
    toastr.options.closeButton = true;
    toastr.info('Don't forget to save');

    {

    }
});
</script>

И в конфигурации пакета сделайте это:

bundles.Add(New StyleBundle("~/Content/css").Include("~/Content/bootstrap.css",
        "~/Content/toastr.css"));

bundles.Add(New ScriptBundle("~/bundles/jquery").Include(
        "~/Scripts/jquery-{version}.js",
        "~/Scripts/toastr.js"))