[Sample of Apr 14th] Maintain ASP.NET TreeView State across post backs

Sample Downloads
C# version: https://code.msdn.microsoft.com/CSASPNETMaintainTreeViewSta-c7673683
VB version: https://code.msdn.microsoft.com/VBASPNETMaintainTreeViewSta-01591ffc

Today’s code sample demonstrates how to maintain TreeView's state across postbacks.  The web application use session store the TreeView nodes' status and restore them in the next postback event. This interesting function can be used as the signs of the navigator bar.

The sample was written by our start writer: Arwind Gao.

You can find more code samples that demonstrate the most typical programming scenarios by using Microsoft All-In-One Code Framework Sample Browser or Sample Browser Visual Studio extension. They give you the flexibility to search samples, download samples on demand, manage the downloaded samples in a centralized place, and automatically be notified about sample updates. If it is the first time that you hear about Microsoft All-In-One Code Framework, please watch the introduction video on Microsoft Showcase, or read the introduction on our homepage https://1code.codeplex.com/.

Introduction

The code-sample illustrates how to maintain TreeView's state across postbacks.  The web application use session store the TreeView nodes' status and restore them in the next postback event. This interesting function can be used as the signs of the navigator bar.

Running the Code

Please follow these demonstration steps below.

Step 1: Open the CSASPNETMaintainTreeViewState.sln.

Step 2: Expand the CSASPNETMaintainTreeViewState web application and press Ctrl + F5 to show the TreeViewPage.aspx.

Step 3: You will see an TreeView control on the page, please operate the TreeView's nodes and Click the Save TreeView state button.

Step 4: Click the Refresh This Page button to invoke the post back event.  You can find the TreeView's state will stay the same.

Step 5: You can also click the refresh button of the Browsers, the TreeView state can still be maintained.

Using the Code

Step 1. Create a C# "ASP.NET Empty Web Application" in Visual Studio 2010 or Visual Web Developer 2010. Name it as "CSASPNETMaintainTreeViewState".

Step 2. Add one web form in the root directory, name it as "TreeViewPage.aspx".

Step 3. Add a TreeView control and two buttons on the page, you can add some nodes of TreeView manually.
 
Step 4  Create App_Code folder and add TreeViewState class file, This class use to handler TreeView nodes status and restore them:

         /// <summary> 
        /// Store TreeView's state in a session. 
        /// </summary> 
        /// <param name="treeView"></param> 
        /// <param name="key"></param> 
        /// <param name="context"></param> 
        public void SaveTreeView(TreeView treeView, string key,HttpContext context) 
        { 
            context.Session[key] = treeView.Nodes; 
        } 
 
        /// <summary> 
        /// Restore TreeView's state from session variable, and invoke SaveTreeView method. 
        /// </summary> 
        /// <param name="treeView"></param> 
        /// <param name="key"></param> 
        /// <param name="context"></param> 
        public void RestoreTreeView(TreeView treeView, string key, HttpContext context) 
        { 
            if (new TreeViewState(key).IsSaved) 
            { 
                treeView.Nodes.Clear(); 
 
                TreeNodeCollection nodes = (TreeNodeCollection)context.Session[key]; 
                for (int index = nodes.Count - 1; index >= 0; index--) 
                { 
                    treeView.Nodes.AddAt(0, nodes[index]); 
                } 
                this.SaveTreeView(treeView, key, context); 
            } 
             
        }

Step 5. Add SaveTreeViewState button's OnClick event and TreeView data bind event code of TreeViewState.aspx.cs file below:

         /// <summary> 
        /// The method use to bind TreeView with node's last save state across postback. 
        /// </summary> 
        private void TreeViewBind() 
        { 
            if (state.IsSaved) 
            { 
                state.RestoreTreeView(tvwNodes, "TreeViewState", HttpContext.Current); 
            } 
        } 
 
        /// <summary> 
        /// The button click event use to save TreeView's state  
        /// </summary> 
        /// <param name="sender"></param> 
        /// <param name="e"></param> 
        protected void btnSaveTreeViewState_Click(object sender, EventArgs e) 
        { 
            state.SaveTreeView(tvwNodes, "TreeViewState", HttpContext.Current); 
        }

Step 6. Build the application and you can debug it.

References

MSDN: TreeView Class

https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.treeview.aspx

MSDN: TreeNodeCollection Class

https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.treenodecollection.aspx