ASP.NET - Предупредить пользователя о несохраненных изменениях перед тем, как покинуть страницу или перейти на другую вкладку

Question

У меня есть приложение, разработанное в ASP.NET, в котором основной экран представлен различными вкладками (я использую вкладки JQuery, кстати: https://jqueryui.com/tabs/). Каждая вкладка указывает на свое частичное представление. Две из этих вкладок содержат группа полей ввода, которая должна быть заполнена кнопкой «Сохранить» для каждого из них. Я хочу предупредить пользователя в случае, если он изменяет один из этих входов и не сохраняет.

Это мой код Javascript:

var somethingChanged = false;

    $('#formDadosPessoais input').change(function () {
        somethingChanged = true;
    });
    $('#formDadosPessoais select').change(function () {
        somethingChanged = true;
    });

    $(window).bind('beforeunload', function (e) {
        if (somethingChanged)
            return "Voçê efectuou alterações nos seus dados pessoais e não guardou as alterações.";
        else
            e = null; // i.e; if form state change show warning box, else don't show it.
    });

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

Как я могу настроить код, чтобы охватить этот сценарий?

Вот HTML-код для моих вкладок на случай, если это необходимо:

<div id="tabs" style="margin-top:20px;">
        <ul>
            <li><a href="#tabs-1">Personal Data</a></li>
            <li><a href="#tabs-2">Inquiry</a></li>
            <li><a href="#tabs-3">Candidature</a></li>
            <li><a href="#tabs-4">Documents</a></li>
            <li><a href="#tabs-5">Declaration</a></li>
        </ul>
        <div id="tabs-1">
            @Html.Action("Index", "PersonalData")
        </div>
        <div id="tabs-2">
            @Html.Action("Index", "Inquiry")
        </div>
        <div id="tabs-3">
            @Html.Action("Index", "Candidature")
        </div>
        <div id="tabs-4">
            @Html.Action("Index", "Documents")
        </div>
        <div id="tabs-5">
            @Html.Action("Index", "Declaration")
        </div>
    </div>

Answer 1

Переключение вкладки не вызывает beforeunload, поэтому вам также нужно подключиться к ручке API beforeActivate вкладки

$( "#tabs" ).tabs({
  beforeActivate: function( event, ui ) {
      if (somethingChanged && !confirm("Voçê efectuou alterações nos seus dados pessoais e não guardou as alterações.")
        return false;
        //can ignore else as they said ok to change
  }
});

Edit:

Модифицированный пример в explicity вызывает поле подтверждения перед возвратом false. Возврат false отменяет событие активации, поэтому вкладка не переключается. Возвращение true является поведением по умолчанию и переключает вкладки.