Treeview operations in ASP. NET

Tree charts are used to display data organized by tree structures. They are widely used, such as file systems (resource managers in Windows) in computers and composition structures of enterprises or companies. We know that in windows, tools such as VB, Pb, and Delphi provide a powerful tree-type control Treeview. Using the Treeview control, we can easily develop a tree chart. However, it is not so easy to implement tree embedding on the web page. net uses the Internet Explorer webcontrols provided by Microsoft to make the tree structure development on the web page as convenient as it is in Windows. The same functions are powerful and even more flexible.

Technology: ASP. NET
Difficulty: elementary/intermediate

This article describes how to use Internet Explorer webcontrols to develop a tree chart. Due to the complex structure of the tree chart, I often do not know how to use it. I have recently used ASP for my company. the specific example of the Application Manager compiled by. NET is described in detail in ASP. net, how to associate the use of Internet Explorer webcontrols with the database to display data in multiple layers, so as to conveniently add, modify, delete, and move data. I hope that through the elaboration of this instance, I will bring you a better result, communicate with colleagues, and make progress together.

Internet Explorer webcontrols is not in the Standard Server Control of vs. net. You need to download it from the Microsoft website. When downloading and installing the toolbox for the first time, right-click the Toolbox customize toolbox... → In. NET Framework components, select Micosoft. Web. UI. webcontrols. Treeview, And the Treeview control appears in the toolbox.

I. Tree Creation
The specific method is to create a database and design the tree_info table of the tree chart, which contains the nodeid, parentid, nodename, adderss, and Icon fields. Other fields are determined based on the actual business, the node name nodename is displayed on the node of the tree control. The nodeid field stores the unique ID of the node. parentid indicates the parent node number of the current node. the ID number forms a "linked list ", the structure of the nodes on the tree is recorded. Design a web form and place the Treeview control on it.

Private sub createdataset () 'create a dataset

Dim myconn as new sqlconnection ()
Dim mycmd as new sqlcommand ("select nodeid, nodename, parentid, address, icon from tree_info", myconn)
Dim mydataadapter as new sqldataadapter ()
Myconn. connectionstring = Application ("connectstring ")
Mycmd. commandtext = ""
Mycmd. Connection = myconn
Mydataadapter. selectcommand = mycmd
Mydataadapter. Fill (DS, "Tree ")

End sub

The basic idea of building a tree is to recursively call the display subtree from the root node.

Private sub page_load (byval sender as system. Object, byval e as system. eventargs) handles mybase. Load

Createdataset ()
Intitree (treeview1.nodes, 0)

End sub

Private sub intitree (byref NDS as treenodecollection, byval parentid as integer)

Dim DV as new dataview ()
Dim DRV as datarowview
Dim tmpnd as treenode
Dim intid as integer

DV. Table = Ds. Tables ("Tree ")
DV. rowfilter = "parentid = '" & parentid &"'"
For each DRV in DV

Tmpnd = new treenode ()
Strid = DRV ("node_id ")
Tmpnd. ID = Strid
Tmpnd. Text = DRV ("node_name ")
Tmpnd. imageurl = DRV ("icon"). tostring
NDS. Add (tmpnd)
Intitree (NDS. Count-1). nodes, intid)

Next

End sub

2. add and delete Tree nodes

To add, delete, or modify a node in a Treeview, you only need to use the add, remove, and other methods of the nodes attribute. It is worth noting that. in net, the nodes set of Treeview is different from that in vs6.0. vs6.0 is a large set, while. in. net, each node in the hierarchy has the nodes attribute. The addition, deletion, and modification of Tree nodes are significantly different from those of vs6.0, especially when a tree node is deleted.

Private sub butadd_click (byval sender as system. Object, byval e as system. eventargs) handles butadd. click' Add a subnode under the selected node

Dim tmpnd as new treenode (), ndsel as treenode

Tmpnd. ID = getnewid ()
Ndsel = treeview1.getnodefromindex (treeview1.selectednodeindex) 'selected node
Tmpnd. Text = "new node"
Ndsel. nodes. Add (tmpnd)
Dim myrow as datarow
Myrow = Ds. Tables ("Tree"). newrow ()
Myrow ("node_name") = tmpnd. ID
Myrow ("node_descript") = "new node" & tmpnd. ID & "_" & ndsel. ID
Myrow ("parent_name") = ndsel. ID
DS. Tables ("Tree"). Rows. Add (myrow)

End sub

Private sub butdele_click (byval sender as object, byval e as system. eventargs) handles butdele. click' Delete the selected node

Dim idx as string = treeview1.selectednodeindex ()
Getndcol (idx). Remove (treeview1.getnodefromindex (idx ))
Dim DV as new dataview (), recno as integer

DV. Table = Ds. Tables ("Tree ")
DV. rowfilter = "nodeid =" & ndid
DV. Delete (0)

End sub

Private function getndcol (byval idx as string) as treenodecollection
'Obtain the nodes set of the parent node of the selected node.

Dim CNT as integer, I as integer
Dim tmpnds as treenodecollection
Dim idxs () as string

Idxs = Split (idx ,".")
CNT = ubound (idxs)
If CNT = 0 then
Tmpnds = treeview1.nodes
Else
Tmpnds = treeview1.nodes (CINT (idxs (0). Nodes
For I = 1 to CNT-1
Tmpnds = tmpnds (CINT (idxs (I). Nodes
Next
End if
Return tmpnds

End Function

3. Modify and move a tree node

Because the server control does not support mouse drag, you cannot drag a node like a Windows program. Here, you can select a parent node. Moving is implemented by deleting the original location and adding a new location. Note that the node information is saved before deletion.

Private sub treeviewincluselectedindexchange (byval sender as object, byval e as Microsoft. Web. UI. webcontrols. treeviewselecteventargs) handles treeview1.selectedindexchange

Dim DV as new dataview ()
DV. Table = Ds. Tables ("Tree ")
Dim tmpnd as treenode = treendsel (E. oldnode), tmpnds as treenodecollection

DV. rowfilter = "nodeid =" & tmpnd. ID
DV (0) ("node_descript") = me. textbox1.text
DV (0) ("Address") = me. textbox2.text
DV (0) ("target") = me. textbox3.text
DV (0) ("icon") = me. textbox4.text

If DV (0) ("parentid"). tostring <> me. dropdownlist1.selecteditem. value then

'Move a node
DV (0) ("parent_name") = me. dropdownlist1.selecteditem. Value

If me. dropdownlist1.selecteditem. value = "root" then
Tmpnds = treeview1.nodes
Else
Tmpnds = fromidtonode me. dropdownlist1.selecteditem. Value, treeview1.nodes). nodes 'nodes set of the new parent node
End if

Getndcol (E. oldnode). Remove (tmpnd)
Tmpnds. Add (tmpnd)

End if

Tmpnd. Text = me. textbox1.text
Tmpnd. imageurl = me. textbox4.text
Tmpnd = treeview1.getnodefromindex (treeview1.selectednodeindex)
DV. rowfilter = "nodeid =" & tmpnd. ID
Me. textbox1.text = DV (0) ("nodename"). tostring
Me. textbox2.text = DV (0) ("Address"). tostring
Me. textbox3.text = DV (0) ("target"). tostring
Me. textbox4.text = DV (0) ("icon"). tostring

End sub

Private function fromidtonode (byval ID as string, byval NDS as treenodecollection) as treenode

'Search nodes with keywords
Dim I as integer
Dim tmpnd as treenode, tmpnd1 as treenode

For each tmpnd in NDS

If tmpnd. ID = ID then
Return tmpnd
Exit Function
End if

Tmpnd1 = fromidtonode (ID, tmpnd. nodes)

If not (tmpnd1 is nothing) then
Return tmpnd1
Exit Function
End if

Next
Return nothing

End Function

Iv. Conclusion

The above describes the basic methods for Tree display in ASP. NET and how to modify database data while maintaining (adding, deleting, modifying, and moving) Tree nodes. Due to space limitations, the author only introduces the basic ideas, processes and key steps here, and does not list the detailed source code. Readers can complete it on their own. This program has been debugged in vs. net, sqlserver, Windows 2000, and iis5.0.