Maintain the position of the ASP. NET tree control when data is sent back.

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 50th nodes and expand the node, after you click the link page to send back, you must use the scroll bar again to pull down to the desired node location.

In. in earlier versions of net, you may consider using the smartnavigation feature. smartnavigation is an attribute of Web Page commands. Its value is a Boolean value. A page command set to true looks similar to the following:

<% @ 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 troubled by this problem so that the maintainscrollbackpositiononpostback attribute is added in ASP. net2.0 to replace smartnavigation. Unfortunately, when I use them, I feel that they all have some problems. I will explain them later.

This article will introduce the disadvantages of smartnavigation and maintainscrollbackpositiononpostback in maintaining the page sending position, and provide how to use JavaScript to solve this problem. This tip is equally effective even for complex web pages.

Goodbye to smartnavigationeb. Welcome to maintainscrollbackpositiononpostback.

Smartnavigation is mainly used to reduce the flash of page navigation. It mainly uses the appropriate iframes for this work and only displays the changed part. Smartnavigation is also designed to maintain the page location, element focus, and send back the browser access history. Unfortunately, even if Microsoft knows that smartnavigation has been removed, you can still see that smartnavigation is defined as "obsolete" only by checking the msdn document. By using Google's search, you can find discussions about smartnavigation.

Next step

ASP. net2.0 introduces maintainscrollbackpositiononpostback, which is similar to smartnavigation. You can set its value to true or false in the page attribute.

<% @ Page Language = "VB" autoeventwireup = "false" codefile = "default. aspx. VB" inherits = "_ default" maintainscrollpositiononpostback = "true" %>

This attribute/attribute value pair is used to maintain the page location. Unfortunately, it only maintains the page location, because if you use the Treeview control in the user control, and then use the user control in the page, after sending the page back, you will return the location of the user control instead of the location of the Treeview node.

To put it simply, maintainscrollbackpositiononpostback is only used to maintain the page's return position. If your page is fixed-an applicationProgramIn this way, you do not need to use the scroll bar to scroll up or down, so this attribute may be useless to you. If your page needs to be rolled frequently, you need to use this attribute.

Maintain the control position in the Treeview

Recently, I am developing a web application windows, that is, every page will be displayed in full screen instead of scrolling. The Treeview class is used in the page to display the navigation list, but the page does not need to scroll up or down. But the problem is that the data column here may need to be extended to make the page scroll. I am going to solve this problem using the following method.
First, you can use the selectednode attribute of the Treeview control to know which node is selected. The selected node needs to be saved, and the program will eventually be an HTML element. If I know the ID of the selected HTML control, I can scroll to the control and set the control as the current focus. Indeed, if you see the following HTML page using the Treeview ControlCodeThe generated <input> element is of the textbox type. Its ID may be similar to treeviewx_selectednode.

<Input type = "hidden" name = "treeview1_selectednode" id = "treeview1_selectednode" value = "treeview1t54"/>

With this knowledge, you will know how to do it. The basic method is to hide the input as a textbox. What we need to do is to know the content presented in the future. A Treeview is finally displayed as an HTML table. The value of a node is used as the value of a cell. <TD> the element shows the node name. Therefore, you can find the cell id and scroll to it.

To illustrate the practice, I wrote some code using Treeview, and loaded a script in page_load time to locate the required cells (see the following table ), this function is called in the onload time of <body>.

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 and madarin orange sauce ")) Beef. childnodes. Add (New treenode ("standing rib roast with fennel and blue cheese potatoes ")) 'We need a bunch of stuff here so we will 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 page layout:

<% @ 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"> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <Head runat = "server"> <Title> focus Tree node on PostBack </title> </Head> <Body onload = "loadevent ()"> <Form ID = "form1" runat = "server"> <Div> <Asp: Panel id = "Panel1" runat = "server" Height = "200px" width = "200px" scrollbars = "both"> <Asp: Treeview id = "treeview1" runat = "server"> <Selectednodestyle backcolor = "# 8080ff"/> </ASP: Treeview> </ASP: Panel> </Div> </Form> </Body> </Html>

Displays the running result of this example.

Finally, the following code shows the javascript injection method:

<SCRIPT> Function loadevent () { Try { VaR ELEM = Document. getelementbyid ('treeview1 _ selectednode '); If (ELEM! = NULL) { VaR node = Document. getelementbyid (ELEM. value ); If (node! = NULL) { Node. scrollintoview (true ); Panel1.scrollleft = 0; } } } Catch (oexception) {} } // --> </SCRIPT>

The loadevent function defined by JavaScript is used to find hidden fields. We use the clientid of the Treeview control to find all elements. However, after multiple Treeview controls are nested, the names become very long. after finding the cell value, I use the scrollintoview method. the scrollleft attribute enables the scroll bar to scroll to the current position.