Post
Ask Question

How to Maintain the Scroll Position After Postback of a Web Page

Description

In this article I will show how you can maintain the last focus position after scrolling.

In the web development environment, there can be a web form that will contain a large number of controls with their validations like some kind of Information submission form.

In this kind of web form the "Submit button" will be the end of the page and if the end user wants to submit the data then he/she must scroll the page to click on the "Submit button". Suppose the end user clicks on the "submit button" with some invalid data in the control then in that case the page will return to the start position of the web form.

So to tackle this kind of problem we set a property of a page directive as "true" named "SmartNavigation" or "MaintainScrollPositionPostback".

Note: Until ASP.Net 1.1 "SmartNavigation" had been used but since ASP.Net 2.0 we use the "MaintainScrollPositionPostback" property. I am using Visual Studio-2012 so that's why I will use "MaintainScrollPositionPostback" property in this article.

To create a sample to explain such implementation, I will use the following procedure.

Step 1: Create an ASP.Net Empty Website named "My Project".



Image 1

Step 2: Add a new web form named "Default.aspx" into it.



Image 2

Step 3: I will show the magic of the "MaintainScrollPositionPostback" property in both scrolls, either Horizontal or Vertical.

1. Horizontal: To do this scrolling, I will create a table and exceed that width until it will not create horizontal scrolling and add 2 cells with some text. Both texts will lie on the different end of the cell. The second cell will also contain the button, that will raise the postback.

  1. <!-- Horizontal-->  
  2.             <table style="width: 2500px" border="0">  
  3.                 <tr>  
  4.                     <td>  
  5.                         <h1>This is the left side</h1>  
  6.                     </td>  
  7.                     <td style="text-align: right">  
  8.                         <h1>This is the right side</h1>  
  9.                         <asp:Button ID="Button1" runat="server" Text="Click me">  
  10.                         </asp:Button>  
  11.                     </td>  
  12.                 </tr>  
  13.             </table> 




Image 3

It will look as in the left end.



Image 4

After scrolling the page to the right end, it will look like:



Image 5

But when you click on the button, the page will postback and you will see the result as in Image-4 that contains the text "This is the left side".

But when you set the "MaintainScrollPositionPostback" property to true in the page directive, you will see it remains the same, in other words as in Image-5 that contains the text "This is the right side" and a button.

Note: By default the value of the "SmartNavigation" or "MaintainScrollPositionPostback" property is false.

Now I will comment on the preceding table and will create the new table for vertical scrolling.

2. Vertical: To do this scrolling, I will create a table and exceed that height until it will not create a vertical scrolling and add 2 rows with some text. Both texts will lie on the different end of the cell. The second row will also contain the button, that will raise the postback.

  1. <!-- Vertical-->  
  2.             <table style="width: 800px; height:1200px;"    border="0">  
  3.                 <tr>  
  4.                     <td style="vertical-align:text-top">  
  5.                         <h1>This is the Upper side</h1>  
  6.                     </td> </tr>  
  7.                 <tr>  
  8.                     <td >  
  9.                         <h1>This is the Lower side</h1>  
  10.              <asp:Button ID="Button2" runat="server" Text="Clickme"></asp:Button></td>  
  11.                </tr>  
  12.             </table> 




Image 6

It will look as in the upper end.



Image 7

After scrolling the page to the lower end, it will look like:



Image 8

But when you click on the button, the page will postback and you will see the result as in Image-7 that contains the text "This is the Upper side".

But when you set the "MaintainScrollPositionPostback" property to true in the page directive, you will see that it remains the same, in other words as in the Image-8 that contains the text "This is the Lower side" and a button.

Note: By default the value of the "SmartNavigation" or "MaintainScrollPositionPostback" property is false.

Conclusion

In this article, I have described how to maintain the scrolling position of the page after a postback and I hope you will use it in your code.


Similar Articles