Jquery ASP.NET MVC SPA-如何在单页应用程序中处理页面刷新

我正在使用ASP.NET MVC构建一个SPA应用程序

我的应用程序的入口点是

/home/index

。 所有其他视图都将通过ajax加载

例如，现在，用户当前位于页面

/home/index.\home/widgetdemo

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

现在我想到了一个解决方案：

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

这里的最佳做法是什么？（Cookies是一个选项，但必须在每次请求时发送它们…）

编辑：

我是如何做到的： 在第一个页面加载或页面刷新时，我只加载布局页面，在文档加载时，我检查url并确定要获取/调用的页面/操作。

---

这很简单，但是当应用程序加载时，您有两个请求，但是您不必乱搞cookies/hidden字段。

您可以始终将当前用户信息存储在

会话存储

/

本地存储

上，并在加载时检查它们以查看应加载的内容。然而，这需要做大量的管道工程

当然，某些浏览器不支持这些

$.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

vs

localStorage

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

您还可以存储

url

的任何其他部分，而不是

param1

。这只是一个样本

更新：

---

根据注释（这是正确的），如果您有

url

的片段，则无需存储任何内容，除非他们关闭窗口。但是，如果您加载页面的一部分而不更改

url

，则可以使用上述技术存储最后加载的部分。

我认为您需要的可以通过（新HTML5历史API的一部分）解决

检查这个不错的演示在

---

很多人似乎都在使用，但我从未直接尝试过（我只是对最终使用的路由器做出反应）。

您使用的是什么客户端框架？Angular？没有Angular，只有jQuery，没有框架如果没有客户端框架，您将无法走得很远，但这是您的决定。我的建议是，在为自己的框架投入时间之前，先看看Angular2或ReactJS.Net。实际上，一切都很好，只是这个小“问题”。嗯，如果您需要在服务器上查看客户端数据，一种常见的模式是添加一个HiddenFor字段，该字段的值可以在客户端设置，然后在服务器上读取。如果您的url中有一个哈希片段，则不需要所有存储内容，只需在页面加载时从url读取该片段即可。如果您希望用户在使用

localstorage

关闭页面时继续他经常离开的位置，那么您的示例是很好的。这就是一个示例，通常使用ajax您不更新url，而只是加载内部内容。因此，您需要存储一些东西来指示上次加载的部分@LegendsI认为他们没有实现在演示中处理页面刷新的逻辑。。。但是对于这两种方法，历史记录和url片段，都必须发出两个请求来进行初始应用程序加载或页面刷新。因为服务器无法读取历史记录或片段。一种解决方案是cookies或hf，它们可以在服务器上读取，但您必须在客户端和服务器端实现这种逻辑。因此，最初有两个请求是迄今为止最简单和最可维护的方法。但是使用cookie，您将始终获得用户访问过的最后一个“页面/视图”。因此，下次用户进入你的应用程序时，他将从他停止的地方开始，但只使用一个请求。但是，是的，推动状态是一条路要走。