使用pjax时点击浏览器刷新按钮仅加载内容页的解决办法

pjax可以实现ajax的局部刷新功能，同时能改变地址栏的URL，因此支持浏览器的后退和前进功能。

但是，在使用中，若没有正确使用，仍然会出现一些问题。

比如，我们在使用pjax后，能够在不加载整个页面的情况下，刷新局部的页面，并能很好的保留浏览器的前进和后退功能，但是，按F5或点击浏览器刷新按钮时，页面刷新后仅加载内容页部分，母版页的内容丢失。

原因是，我们沿用了ajax的思想，每次只加载要替换的部分。而pjax允许你跳转到一个完整的页面，然后只将目标页面中指定的部分替换原页面指定的部分。也就是说，我们应该跳转到一个完整的页面，而不应该是内容页部分。

我们用图示进行说明。

错误的做法

//内容页未设置母版页
@{
    Layout = null;
}

$(function () {
    $(document).pjax('a[data-pjax]', '#main_content', { timeout: 10000 });
});

正确的做法（每个页面都应该是完整的页面）

//内容页应该设置母版页
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

$(function () {
    $(document).pjax('a[data-pjax]', '#container', { fragment: '#container', timeout: 10000 });
});

两种方法的比较

首先，两种方法均能实现局部刷新、浏览器的前进和后退的要求；

但是，由于地址栏中的url是新页面的地址，一旦刷新，“错误的做法”就没有母版页的内容了，而“正确的做法”仍然能得到完整的页面。

代码解释

fragment：CSS selector for the fragment to extract from ajax response （从ajax回应中提取的片段的CSS选择器）

 

 

【参考文献】

[1] https://my.oschina.net/sub/blog/123447 

[2] https://github.com/defunkt/jquery-pjax （pjax官网）