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

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

 

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

 

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

  1. <IFRAME ID=__hifSmartNav NAME=__hifSmartNav STYLE=display:none src="/aspnet_client/system_web/1_1_4322/SmartNav.htm"></IFRAME>
  2. <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 主要是要来记录页面滚动条的水平及垂直位置。

     < input  type ="hidden"  name ="__SCROLLPOSITIONX"  id ="__SCROLLPOSITIONX"  value ="0"   />
    
< input  type ="hidden"  name ="__SCROLLPOSITIONY"  id ="__SCROLLPOSITIONY"  value ="204"   />


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

 1 < script type = " text/javascript " >
 2 <!--
 3 theForm.oldSubmit  =  theForm.submit;
 4 theForm.submit  =  WebForm_SaveScrollPositionSubmit;
 5
 6 theForm.oldOnSubmit  =  theForm.onsubmit;
 7 theForm.onsubmit  =  WebForm_SaveScrollPositionOnSubmit;
 8
 9 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 的值,重新设定页面的水平及垂直滚动条位置,如此就达到维护页面滚动条位置的动作了。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值