Here’s how to conditionally reset the browser’s scroll position of an ASP.NET page after an AJAX partial postback. You will of course need to have your web application ASP.NET Ajax ready.
Here’s the code. The following constant is the key that is sent by the server to the client browser after a postback. If this key is found by the client, the JavaScript function will tell the browser to reset the scroll position.
Private Const KEY As String = "ResetScrollPosition"
Here’s the page load event handler. In this event, you need to generate some JavaScript that contains the logic that tells the client browser how to reset the browser’s scroll position. This code basically consumes the data sent from the server, determines what data item was registered for the call along with its value. If that value contains the key constant, the browser will reset its scroll position.
Private Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) _
Handles Me.Load
Dim sBlock as string = "Reset"
If Not Page.ClientScript.IsStartupScriptRegistered(sBlock) Then
Dim JS As StringBuilder = New StringBuilder("")
Dim clientID as string = Page.ClientID
JS.Append("Sys.WebForms.PageRequestManager.getInstance()")
JS.Append(".add_endRequest(endRequestHandler);")
JS.Append(System.Environment.NewLine)
JS.Append("function endRequestHandler(sender, args)")
JS.Append(System.Environment.NewLine)
JS.Append("{")
JS.Append(System.Environment.NewLine)
JS.Append("if (args.get_dataItems()['" + clientID + "']")
JS.Append(" != undefined)")
JS.Append(System.Environment.NewLine)
JS.Append("{")
JS.Append(System.Environment.NewLine)
JS.Append("if (args.get_dataItems()['" + clientID + "']")
JS.Append(" == '" + KEY + "')")
JS.Append(System.Environment.NewLine)
JS.Append("{")
JS.Append(System.Environment.NewLine)
JS.Append("self.scrollTo(0, 0);")
JS.Append(System.Environment.NewLine)
JS.Append("}")
JS.Append(System.Environment.NewLine)
JS.Append("}")
JS.Append(System.Environment.NewLine)
JS.Append("}")
Page.ClientScript.RegisterStartupScript(Page.GetType(), _
sBlock, _
JS.ToString(), _
True)
End If
End Sub
So... how do we send the key to tell the browser to reset the scroll position? First we need to initiate a partial postback (in this case it’s a button click) When a partial postback is initiated, a server side event is invoked and handled. This event handler checks a condition, and if the condition is true, the ASP.NET Ajax Data Item (in this case the page itself) gets sent back to client with the KEY value. In order for this to work, the control causing the partial postback event needs to be inside an update panel on the .aspx page in order for this work.
Here’s the vb.net code containing the event handler:
Private Sub oBtnClick(ByVal sender As Object, ByVal e As EventArgs) Handles oBtn.Click
If (true) then
ScriptManager.GetCurrent(Page).RegisterDataItem(Page, KEY)
End if
End Sub
Here’s the markup code for the button instatiating the partial postback.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="oBtn" Text="Initiate Partial Postback" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
This code can also serve as a base for anyone who wants to send statements back to a JavaScript function conditionally.
Tags: asp.net,
asp.net ajax
Categories: ASP.NET Ajax
12480fc4-03bf-418c-b4ba-abc873d7441c|0|.0