Monday, January 11, 2010

Maintain Scroll Position On Postback in ASP.NET

Objective: This article describes how to maintain scroll position on postback in ASP.NET.

Background: Gets or sets a value indicating whether to return the user to the same position in the client browser after postback. This property replaces the obsolete SmartNavigation property. This is a very simple procedure that takes but a second or two to achieve.

Procedure: Follow instructions below to accomplish this task. This article uses Visual Web Developer Express 2008.

  1. On the page you require this functionality, simply add the following attribute to your page directive on the very top of your page:
    <!-- Adding the maintain scroll position attribute to page directive -->
    <%@ Page Language="VB" MaintainScrollPositionOnPostback="true" %>
  2. To test out how this works, I use the NorthWind database.
  3. In design view, let’s drop a GridView on to the page and configure a DataSource for it.
  4. Select the Customers table because it has enough data to make it a long page without paging. For this example I selected the CustomerID, CompanyName and ContactName columns.
  5. Click on the Advanced button and check both checkboxes to create the Insert, Delete, Edit statements.
  6. When you are finished, open the smart tag on the GridView and select the Enable Editing and Enable Selection checkboxes.
  7. Save the page and load it into your browser.
  8. Scroll down half way and click on either the Select or Edit button. Although the page will post back due to a server side action, it will now not reposition you to the top of the page, instead it will maintain the same exact position. It is nice not having to manually scroll into position every time you click a button.

    maintain-scroll-position

  9. That’s it! Enjoy.

Posted via email from fenildesai's posterous

0 Please Share a Your Opinion.: