Maintain ASP.net tree control position when data is postback

Asp.net| Control | data

ASP.NET2.0 provides a powerful TreeView control, but it seems to have a flaw: it does not seem to be able to track the last node selected by the user. If you scroll to the 50th node and then expand the node, then when you click the link page for the postback, you must reuse the scroll bar to pull down to the node you want.

In. NET earlier versions, you might consider using the SmartNavigation feature. SmartNavigation is a property of a Web page instruction that evaluates to a Boolean value, and a page instruction set to True looks like this:

<%@ Page language= "VB" autoeventwireup= "false" codefile= "Default.aspx.vb" inherits= "_default" smartnavigation= "true" %>

However, as many people have noticed, smartnavigation itself has a laundry problem, In fact, Microsoft is also plagued by this problem, adding Maintainscrollbackpositiononpostback attributes to the asp.net2.0 to replace SmartNavigation. Unfortunately, when I use them, I feel they have some problems, which I will explain later.

In this article I'll explain the drawbacks of smartnavigation and maintainscrollbackpositiononpostback in maintaining page postback locations, and how to use JavaScript to solve this problem. This tip is just as effective even for complex web pages.

Goodbye, Smartnavigationeb, welcome maintainscrollbackpositiononpostback.

The main function of SmartNavigation is to reduce the flicker of page navigation, it mainly uses the appropriate iframes to do this work and only show the changed part. SmartNavigation is also designed to be able to maintain page position, element focus, and postback browser access history. Unfortunately, even if Microsoft knew that SmartNavigation had been removed, checking the MSDN documentation, you could still see that SmartNavigation was simply defined as "obsolete." Using Google's search you can search for smartnavigation discussions.

Next

Asp.net2.0 introduced Maintainscrollbackpositiononpostback, similar to SmartNavigation, where you can set its value to TRUE or false in the page property.

<%@ Page language= "VB" autoeventwireup= "false" codefile= "Default.aspx.vb" inherits= "_default" Maintainscrollpositiononpostback= "true"%>

Very concise, this attribute/attribute value pair is used to maintain the page position. Unfortunately, it's just a place to maintain the page, because if you use the TreeView control in a user control and then use the user control on the page, the page will return to the user control's location instead of the TreeView node position after the postback.

Simply put, Maintainscrollbackpositiononpostback is only used to maintain the postback location of the page. If your page is fixed-that is, an application that does not need to scroll up and down using the scroll bar, this property may be useless to you. If your page needs to scroll very often, then you need to take advantage of this attribute.

Maintain the position of the control in the TreeView

Recently, I was developing a Web application windowsy, which means that each page will be displayed in full screen instead of scrolling. The page uses the TreeView for navigation to display as a list, but the page itself does not need to scroll up and down. But the problem is that the data columns here may need to be extended to make the page scroll. I'm going to use the following method to solve this problem.
First, using the SelectedNode property of the TreeView control, you can know which node is selected, the selected node needs to be saved, and it will end up with an HTML element. If I know the ID of the HTML control being selected, then I can scroll to the control and set the control to the current focus. Indeed, if you look at the following page HTML code that uses the TreeView control, you will find a hidden element generated and a textbox type whose ID may resemble Treeviewx_selectednode

With this knowledge, you know what to do, the basic method is to hide the input is a textbox, we have to do is to know what to present in the future. A treeview is eventually rendered as an HTML table, and the value of the node is used as the value of the cell, the element renders the node name, so the cell id is searched and scrolled there.

To illustrate this, I used the TreeView to write some code to Page_Load time to find the desired cell (refer to the table below) and call the function in the onload time of .

Imports System.Collections.Generic
Partial Class _default
Inherits System.Web.UI.Page
Protected Sub Page_Load (ByVal sender as Object, _
ByVal e as System.EventArgs) Handles Me.load
Injectloadevent ()
If (IsPostBack) Then return
TreeView1.Nodes.Clear ()
Dim Chicken as New TreeNode ("chicken")
TREEVIEW1.NODES.ADD (chicken)
Dim Beef as New TreeNode ("Beef")
TREEVIEW1.NODES.ADD (beef)
Dim Pork as New TreeNode ("Pork")
TREEVIEW1.NODES.ADD (pork)
Dim Fish as New TreeNode ("Fish")
TREEVIEW1.NODES.ADD (fish)
Chicken. Childnodes.add (New TreeNode ("Crepes Florentine with Buffalo chicken"))
Fish. Childnodes.add (New TreeNode ("Linguine with white Clam sauce"))
Pork. Childnodes.add (New TreeNode ("Pork loin with peanut Orange Madarin"))
Beef. Childnodes.add (New TreeNode ("Standing Rib roast with fennel and Blue Cheese potatoes"))
' We need a bunch of stuff so We'll add some stubs
Dim I as Integer
For I = 1 to 50
Chicken. Childnodes.add (New TreeNode ("placeholder" + i.tostring ())
Fish. Childnodes.add (New TreeNode ("placeholder" + i.tostring ())
Pork. Childnodes.add (New TreeNode ("placeholder" + i.tostring ())
Beef. Childnodes.add (New TreeNode ("placeholder" + i.tostring ())
Next
Treeview1.collapseall ()
End Sub
Public Sub injectloadevent ()
Dim Script as String = _
"Function loadevent ()" + _
"{{" + _
"Try" + _
" {{" + _
"var elem = document.getElementById (' {0}_selectednode ');" + _
"If (elem!= null)" + _
" {{" + _
"var node = document.getElementById (Elem.value);" + _
"If (node!= null)" + _
" {{" + _
"Node.scrollintoview (True);" + _
"{1}.scrollleft = 0;" + _
" }}" + _
" }}" + _
" }}" + _
"Catch (Oexception)" + _
" {{}}" + _
"}}"
Page.ClientScript.RegisterClientScriptBlock (Me.GetType (), "Loadevent", _
String.Format (script, Treeview1.clientid, Panel1.clientid), True)
End Sub
End Class

The following code shows the layout of the page:

<%@ Page language= "VB" autoeventwireup= "false" codefile= "Default.aspx.vb" inherits= "_default"%>
! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

Focus Tree Node on postback

The following figure shows the results of this example running

Finally, the following code shows how JavaScript is injected:

The loadevent function defined with JavaScript looks for hidden fields, and we use the ClientID of the TreeView control to find all the elements, but after nesting multiple TreeView controls, the names become very long. When you find the value of a cell, I use the scrollIntoView method. The ScrollLeft property will let the scroll bar scroll to the current position.