In some cases, we encounter a circumstance while building up an application where we need to keep up scroll position of the page to the top or at the current scroll location after asynchronous postback caused by a lengthier page.
We can do this with the assistance of Javascript PageRequestManager's end request event.
Consider a situation where you have a web Page with more than 200 fields containing numerous checker maker conditions of dropdownlist, and checkboxes where on the selection of dropdown or checkboxes a few fields should be noticeable to enter records, or a few fields need to disabled. Or we may need to do server calls to populate information from the server.
In that case, in the event of click or change event of a specific field we need to do postback to the server and return to the page which caused page refresh; yet because of the restricted size of the screen and longer page we generally need to scroll again to the last editable control to go back or to continue further.
On each postback the page gets refreshed and reverts to the base of the screen, which ends up irritating and demolishing the user's experience.
To achieve this we use the underneath classes and some javascript.
- Sys.WebForms.PageRequestManager Class
The PageRequestManager class manages partial-page rendering in the browser. You can update regions on the page by using one or more UpdatePanel controls and a ScriptManager control.
- Sys.WebForms.PageRequestManager.getInstance()
This method returns the instance of the PageRequestManager class for the page. You do not create an instance of the PageRequestManager directly. When partial-page rendering is enabled, an instance of the PageRequestManager class is automatically available. You can access it through the getInstance method.
The PageRequestManager class defines events that you can use to customize your page's partial-page rendering.
- initializeRequest
Raised before processing of the asynchronous request starts. You can use this event to cancel a postback.
- beginRequest
Raised before processing of an asynchronous postback starts and the postback is sent to the server. You can use this event to set request headers or to begin an animation that indicates that the page is processing.
- pageLoading
Raised after the response from the server to an asynchronous postback is received but before any content on the page is updated. You can use this event to provide a custom transition effect for updated content.
- pageLoaded
Raised after all content on the page is refreshed, as a result of either a synchronous or an asynchronous postback. You can use this event to provide a custom transition effect for updated content.
- endRequest
Raised after an asynchronous postback is finished and control has been returned to the browser. You can use this event to provide a notification to users or to log errors.
We likewise make use of some window objects and their Properties and Methods.
To move the page location on top of the window, we can utilize the window.scrollTo() Method in the PageRequestManager's end request event by setting the coordinates to (0,0) which represents to top (x,y) pixel area.
Now just add the below JavaScript code to the relevant section of your Web Page.
- <script type="text/javascript">
- var xPos, yPos, needScroll;
- var prm = Sys.WebForms.PageRequestManager.getInstance();
- prm.add_beginRequest(BeginRequestHandler);
- prm.add_pageLoaded(EndRequestHandler)
-
- function BeginRequestHandler(sender, args) {
- xPos = 0;
- yPos = window.pageYOffset || document.documentElement.scrollTop;
- }
-
- function EndRequestHandler(sender, args) {
- if (needScroll) {
- window.setTimeout("window.scrollTo(" + xPos + "," + yPos + ")", 100);
- }
- }
- </script>
After adding the above code at page script Tag on your code behind you need to add the below code at your .cs page to call the Javascript function after page completes its rendering after postback.
- ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "ScrollTo", "var needScroll = true;", true);
That’s it. You’re done. The scroll position on your Web Page will now be maintained after every postback.
| | | | | | | | | |
Text-to-speech function is limited to 200 characters