ASP.NET中SmartNavigator(1.1)属性与MaintainScrollPositionOnPostback新属性解析

最新推荐文章于 2016-08-27 16:59:00 发布

原创最新推荐文章于 2016-08-27 16:59:00 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#asp.net #webform #postback #javascript #html

.NET 专栏收录该内容

37 篇文章

订阅专栏

介绍了ASP.NET中如何通过设置Page的MaintainScrollPositionOnPostBack属性为True，利用隐藏字段记录并恢复页面滚动条的位置，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

可能我们会经常遇到这种情况，当页面内容比较多的时候，当用户执行操作执行一次页面回送后，页面又重新从顶端开始显示，用户不得不重新拖动滚动条回到先前的位置，这会给用户带来很不友好的体验。

幸好，asp.net提供了有关属性，可以彻底帮助我们解决这一问题。

NET1.1版中使用SmartNavigator，SmartNavigator属性只能在后台代码中设置，当我们把SmartNavigator设置为true时，检视 HTML 原始码，可以发现它多

<IFRAME ID=__hifSmartNav NAME=__hifSmartNav STYLE=display:none src="/aspnet_client/system_web/1_1_4322/SmartNav.htm"></IFRAME>
<script language="JScript" type="text/JScript" src="/aspnet_client/system_web/1_1_4322/SmartNav.js"></script>

当页面Submit 时会利用SmartNav.js函式来记录页面目前的水平及垂直滚动条位置，
而 PostBack 后页面重新加载后，会利用SmartNav.js恢复函式来回复页面滚动条位置，重新设定页面的水平及垂直滚动条位置，如此就达到维护页面滚动条位置的动作了。

新版NET只要将 Page 的MaintainScrollPositionOnPostBack 属性设为True ，页面就会自动维护滚动条位置.实现原理相同.

当把 Page.MaintainScrollPositionOnPostBack = "True" 时，检视 HTML 原始码，可以发现它多了"__SCROLLPOSITIONX" 及"__SCROLLPOSITIONY" 这二个 HiddenField，这二个 HiddenField 主要是要来记录页面滚动条的水平及垂直位置。

页面上也会多了以下这些JavaScript 程序代码，它主要是透过WebForm_SaveScrollPositionSubmit 及WebForm_RestoreScrollPosition 这二个函式来维护页面滚动条位置。

<!--
3

theForm.oldSubmit = theForm.submit;
4

theForm.submit = WebForm_SaveScrollPositionSubmit;
5

theForm.oldOnSubmit = theForm.onsubmit;
7

theForm.onsubmit = WebForm_SaveScrollPositionOnSubmit;
8

theForm.oldOnLoad = window.onload;
10

window.onload = WebForm_RestoreScrollPosition;
11

// -->
12

</script>

当页面Submit 时会利用WebForm_SaveScrollPositionSubmit 函式来记录页面目前的水平及垂直滚动条位置，将水平滚动条位置记录于"__SCROLLPOSITIONX" 这个 HiddenField，垂直滚动条位置记录于"__SCROLLPOSITIONY" 这个 HiddenField。
而 PostBack 后页面重新加载后，会利用WebForm_RestoreScrollPosition 函式来回复页面滚动条位置，也就是将记录在"__SCROLLPOSITIONX" 及"__SCROLLPOSITIONY" 这二个 HiddenField 的值，重新设定页面的水平及垂直滚动条位置，如此就达到维护页面滚动条位置的动作了。