ASP。NET MVC SPA -如何在一个页面应用程序中处理页面刷新

I am building a SPA app using ASP.NET MVC.

我正在用ASP开发一个SPA应用。净MVC。

The entry point of my app is /home/index. All other views will be loaded via ajax.

我的应用程序的入口点是/home/ index。所有其他视图都将通过ajax加载。

Now, for example, the user is currently on page /home/index#/home/widgetdemo. When he would hit the refresh button now, the following would happen:
The index view is loaded and right after that, the widgetdemo view is loading. The problem here is, that the index view is loaded unnecessarily, because on page refresh we want to see the widgetdemo view again. But on the server side I cannot see the hash fragment of the url and cannot know if the user wants the index or the widgetdemo view.

现在，例如，用户当前在页/home/索引#/home/widgetdemo中。当他现在单击refresh按钮时，会发生以下情况:加载索引视图，然后，widgetdemo视图加载。这里的问题是，索引视图被不必要地加载，因为在页面刷新时，我们希望再次看到widgetdemo视图。但是在服务器端，我看不到url的散列片段，也不知道用户想要索引还是widgetdemo视图。

Now I have a solution in my mind:

现在我有一个解决办法:

On initial application load or page refresh, check for an existing hash fragment in the url on the client side and load the fragment part instead of index view or if no fragment exists load index view. This basically loads only the layout page on first load ( or page refresh) and we decide on the client weather to load index view or another view. -> This results in two requests once.

在初始应用程序加载或页面刷新时，检查客户端url中的现有散列片段并加载片段部分而不是索引视图，或者如果没有片段存在加载索引视图。这基本上只加载第一次加载(或页面刷新)的布局页面，我们决定客户端天气来加载索引视图或其他视图。->这将导致两次请求。

What would be best practice here? (Cookies would be an option, but they would have to be transmitted on every request...)

这里的最佳实践是什么?(cookie是一个选项，但它们必须根据每个请求进行传输……)

EDIT:

编辑:

How I do it: On first page load or page refresh, I only load the Layout page and on document load I examine the url and determine which page/action to fetch/invoke. It's easy, but you have two requests when the application loads, but then you don't have to mess around with cookies/hiddden fields.

方法:在第一个页面加载或页面刷新时，我只加载布局页面，在文档加载时，我检查url并确定要获取/调用哪个页面/操作。这很简单，但是当应用程序加载时，您有两个请求，但是您不必在cookie /hiddden字段上乱放。

2 个解决方案

#1

What you need I think can be solved by history.pushState (part of the new HTML5 History API).

我认为你所需要的可以用历史来解决。pushState (HTML5 History API的一部分)。

Check this nice demo at https://css-tricks.com/using-the-html5-history-api/#pushState-example

在https://css- phs.com/using-html5 -history-api/# pushstate示例中检查这个漂亮的演示

Lot of people seem to be using the history npm package, but I never tried that directly (I just react-router that ends up using that).

很多人似乎都在使用history npm包，但我从来没有直接尝试过(我只是用它来做回路由)。

#2

You can always store your current user information on SessionStorage/LocalStorage and on load check for them to see what should be loaded. However this requires a lot of plumbing to be done.

您可以将当前的用户信息存储在SessionStorage/LocalStorage上，并对其进行负载检查，以查看应该加载什么。然而，这需要大量的管道工作。

Of course certain browsers won't support those s

当然，某些浏览器不支持这些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
}

The use of sessionStorage vs localStorage is based on whether or not you want to maintain the values when the window is closed.

sessionStorage和localStorage的使用取决于您是否希望在窗口关闭时维护这些值。

Also instead of that param1 you can store any other part of the url. This was just a sample.

同样，可以存储url的任何其他部分，而不是那个param1。这只是一个样本。

UPDATE:

更新:

As per comment (which is right) if you have a fragment of the url there would be no need to store anything unless they close the window. However if you load a portion of the page without changing the url you can use the above technique to store what part was loaded last.

根据注释(正确)，如果url有一个片段，那么就不需要存储任何内容，除非它们关闭窗口。但是，如果您在不改变url的情况下加载页面的一部分，您可以使用上面的技术来存储最后加载的部分。

#1