ASP.NET MVC SPA - Как обрабатывать обновление страницы в приложении с одной страницей

Question

Я создаю приложение SPA с помощью ASP.NET MVC.

Пункт входа в мое приложение: /home/index. Все остальные виды загружаются через ajax.

Теперь, например, пользователь в настоящее время находится на странице /home/index#/home/widgetdemo. Теперь, когда он нажмет кнопку обновления, произойдет следующее:
Загружается индексный указатель, и сразу после этого отображается вид виджетов. Проблема заключается в том, что индексный указатель загружается без необходимости, потому что при обновлении страницы мы хотим увидеть вид widgetdemo снова. Но на стороне сервера я не вижу хеш-фрагмент URL-адреса и не могу знать, хочет ли пользователь индекс или вид widgetdemo.

Теперь у меня есть решение, на мой взгляд:

На начальной загрузки приложения или обновления страницы, проверьте для существующего фрагмента хэш в URL на стороне клиента и загрузить фрагмент часть вместо индексном или если фрагмент не существует. В основном загружается только макет страницы при первой загрузке (или обновлении страницы), и мы решаем, чтобы погода клиента загружала индексный просмотр или другое представление. -> Это приводит к двум запросам один раз.

Что было бы лучше всего здесь? (Куки будет вариант, но они должны быть переданы по каждому запросу ...)

EDIT:

Как это сделать: На первой загрузке страницы или обновлении страницы, я только загрузите страницу «Макет» и «Загрузка документа». Я просматриваю URL-адрес и определяю, какую страницу/действие нужно вывести/вызвать. Это легко, но у вас есть два запроса, когда приложение загружается, но тогда вам не нужно возиться с полями cookie/hiddden.

Answer 1

Что вам нужно, я думаю, может быть разрешено history.pushState (часть нового API истории HTML5).

Проверить это хороший демо на https://css-tricks.com/using-the-html5-history-api/#pushState-example

много людей, кажется, использует history npm package, но я никогда не пробовал, что непосредственно (я просто реагировать-маршрутизатор, который заканчивает с помощью этого).

Answer 2

Вы всегда можете сохранить текущую информацию о пользователе на SessionStorage/LocalStorage и проверить нагрузку, чтобы узнать, что должно быть загружено. Однако для этого требуется много сантехники.

Конечно некоторые браузеры не будут поддерживать тех, S

$.urlParam = function(name){ 
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href); 
    if (results==null){ 
     return null; 
    } 
    else{ 
     return results[1] || 0; 
    } 
} 


window.onbeforeunload = function() { 
    localStorage.setItem('currentPlace', $.urlParam('param1')); 

    // ... any other thing you want to store 
} 

window.onload = function() { 

    var param = localStorage.getItem('currentPlace'); 

    // ... load what you want 
} 

Использование sessionStorage против localStorage основан на хотите ли вы сохранить значения, когда окно закрыто.

Также вместо этого param1 вы можете сохранить любую другую часть url. Это был всего лишь образец.

UPDATE:

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