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

发布时间:2017-3-20 6:52:38编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"使用pjax时点击浏览器刷新按钮仅加载内容页的解决办法 ",主要涉及到使用pjax时点击浏览器刷新按钮仅加载内容页的解决办法 方面的内容,对于使用pjax时点击浏览器刷新按钮仅加载内容页的解决办法 感兴趣的同学可以参考一下。

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

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

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

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

我们用图示进行说明。

错误的做法

1 //内容页未设置母版页
2 @{
3     Layout = null;
4 }
1 $(function () {
2     $(document).pjax('a[data-pjax]', '#main_content', { timeout: 10000 });
3 });

正确的做法(每个页面都应该是完整的页面)

1 //内容页应该设置母版页
2 @{
3     Layout = "~/Views/Shared/_Layout.cshtml";
4 }
1 $(function () {
2     $(document).pjax('a[data-pjax]', '#container', { fragment: '#container', timeout: 10000 });
3 });

两种方法的比较

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

但是,由于地址栏中的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官网)


上一篇:BZOJ4422 : [Cerc2015]Cow Confinement
下一篇:查询表达式解析(二十七)

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款