Как использовать pushstate / popstate в WebForms?

Question

Я столкнулся с проблемой в WebForms с использованием pushstate / popstate. Popstate event.state часто не определен, а document.location - это тот же URL-адрес страницы, на которой он был только что.

В этом сценарии я пытаюсь использовать div в файле configuration.aspx для загрузки содержимого, запрошенного пользователем. Затем я обновляю историю браузера, чтобы отразить изменение содержимого.

примеры:

• MyServer / конфигурация / дом
• MYSERVER / конфигурации / безопасности / пользователей
• MyServer / конфигурация / безопасность / группы пользователей

У меня есть маршруты, определенные как:

routes.MapPageRoute("configurationRoute", "configuration", "~/pages/configuration.aspx");
routes.MapPageRoute("configurationHome", "configuration/{GroupName}", "~/pages/configuration.aspx");
routes.MapPageRoute("configurationRouteWithSubPage", "configuration/{GroupName}/{SubPage}", "~/pages/configuration.aspx");

Ниже приведен код, который я использую для pushState.

function showContent(g, s) {
    var pageName = getPageName(g, s);                    
    $("#dynamicContent").load(pageName, null, function (content) {                
        var pageHistory = '/configuration' + pageName.substring(basePath.length - 1);
        if (pageHistory.indexOf('.aspx')) 
          pageHistory = pageHistory.substring(0, pageHistory.length - 5);
        var subTitle = groupName.length > 0 ? groupName + '|' + subPage : subPage;
        var title = brand + ' [Configuration (' + subTitle + ')]';
        window.history.pushState(subTitle, title, pageHistory);
        document.title = title;
        $(this).hide().fadeIn("slow");
    });
}

Когда пользователь нажимает кнопку «Назад», я просто хочу обновить страницу с правильным содержанием.

window.addEventListener('popstate', function (event) {
    var area = '';
    var groupName = '';
    var pageName = '';
    var segments = document.location.pathname.split('/');        
    area = segments[1];
    if(segments.length > 2){
        groupName = segments[2];
        pageName = segments[3];            
    }
    if (area.toLowerCase() === 'configuration') {                
        showContent(groupName, pageName);                
    }
    else { console.log("Nothing Doing: "); }
});

Загрузка контента работает хорошо. Первый раз, когда пользователь нажимает назад, также работает нормально. После этого каждое нажатие кнопки «Назад» снова и снова становится одной и той же страницей.

Шаги для воспроизведения:

• Открыть браузер

• Перейдите на Stackoverflow.com << - отлично грузит </p>

• Перейдите на свой сайт << - Груз в порядке </p>

• Перейдите к каждой подстранице << - Груз в порядке </p>

  • Безопасность / Пользователи
  • Безопасность / Группы пользователей
  • Управление / Списки

• Нажмите кнопку возврата << - Груз в порядке </p>

• Нажмите еще раз << - запрашивается тот же URL страницы, история URL обрезается до (SO, Начальная страница, Безопасность / Группы пользователей). Вы не можете вернуться на сайт SO. </p>

Я ссылаюсь на jquery-3.2.0.min.js, если это поможет.

Куда я иду не так?