Display Hierarchical Data with TreeView in ASP.NET 2.0
来源:互联网 发布:iphone6 mac地址 编辑:程序博客网 时间:2024/04/29 16:45
Published: 31 Oct 2005
Abstract
Teemu Keiski demonstrates how to utilize the new TreeView control in ASP.NET 2.0 to display hierarchical data from a database.
Feedback
Views (Total / Last 10 Days): 23836/ 677
[Download Sample Code]
Now that ASP.NET 2.0 is about to be released to manufacturing, we ASP.NET developers have very interesting times ahead of us. Along with the new Framework, we have a major set of new controls to use and to ease our development work. One of the new controls, also my favorite, is the TreeView control. Microsoft has developed it based on feedback which arose from the release of the TreeView control in the open-source IE Web Controls package, targeted at the previous version of ASP.NET. TreeView has not just been rewritten; it now also includes a major set of new features such as support for client-side populating, on-demand populating, postback events, hyper link navigation, and a lot more.
Sample
I’m going to provide a simple example how to display hierarchical data from SQL Server database in the TreeView. A requirement is that the implementation should not be dependant on the hierarchy level in the database. It means that the TreeView implementation should be capable of displaying data from any level, no matter how deep.
Let’s assume we have TreeViewSampleDB database with the SampleCategories table as follows.
Figure #1
Note: It doesn’t matter if you use SQL Server 2005 or a previous version to try this sample.
Then, we have TreeViewVB.aspx page with the TreeView control declaration as follows.
Listing #1
<asp:TreeView ID="TreeView1" ExpandDepth="0" PopulateNodesFromClient="true" ShowLines="true" ShowExpandCollapse="true" runat="server" />
This means that we are setting the initial expand depth of the TreeView to the first level of nodes. We want to use the client-side node populating feature so that we can provide our users with a better usage experience. Note that this way, no postbacks are involved. We also want to show lines between the nodes and the expand/collapse icon if our tree nodes have child nodes.
Next, we start looking at the code in the TreeViewVB.aspx.vb file. We want to populate the root level. Here’s the code.
Listing #2
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load If Not Page.IsPostBack Then PopulateRootLevel() End IfEnd Sub Private Sub PopulateRootLevel() Dim objConn As New SqlConnection(_ "server=JOTEKE/SQLExpress;Trusted_Connection=true;DATABASE=TreeViewSampleDB") Dim objCommand As New SqlCommand("select id,title,(select count(*) FROM SampleCategories " _ & "WHERE parentid=sc.id) childnodecount FROM SampleCategories sc where parentID IS NULL", _ objConn) Dim da As New SqlDataAdapter(objCommand) Dim dt As New DataTable() da.Fill(dt) PopulateNodes(dt, TreeView1.Nodes)End Sub
This happens by connecting to the database, querying the first set of nodes (having null as the parent id), and creating TreeNode objects with the PopulateNodes routine, which follows next.
Listing #3
Private Sub PopulateNodes(ByVal dt As DataTable, _ ByVal nodes As TreeNodeCollection) For Each dr As DataRow In dt.Rows Dim tn As New TreeNode() tn.Text = dr("title").ToString() tn.Value = dr("id").ToString() nodes.Add(tn) 'If node has child nodes, then enable on-demand populating tn.PopulateOnDemand = (CInt(dr("childnodecount")) > 0) NextEnd Sub
Here’s an important piece of logic. The PopulateNodes method iterates through all rows in the DataTable, and if the given node has child nodes, it sets the PopulateOnDemand property of the TreeNode object according to that. This has the effect that the expand/collapse icon is shown if the node has child nodes.
Next, we want to create the routine to populate the child nodes of a given node. This happens with the PopulateSubLevel method.
Listing #4
Private Sub PopulateSubLevel(ByVal parentid As Integer, _ ByVal parentNode As TreeNode) Dim objConn As New SqlConnection(_ "server=JOTEKE/SQLExpress;Trusted_Connection=true;DATABASE=TreeViewSampleDB") Dim objCommand As New SqlCommand("select id,title,(select count(*) FROM SampleCategories " _ & "WHERE parentid=sc.id) childnodecount FROM SampleCategories sc where parentID=@parentID", _ objConn) objCommand.Parameters.Add("@parentID", SqlDbType.Int).Value = parentid Dim da As New SqlDataAdapter(objCommand) Dim dt As New DataTable() da.Fill(dt) PopulateNodes(dt, parentNode.ChildNodes)End Sub
Here, the idea is the same as with the root level, but with the distinction that only child nodes of the given node are queried and populated with the PopulateNodes method (described earlier). The trick to triggering the populating of the child nodes is as follows.
Listing #5
Protected Sub TreeView1_TreeNodePopulate(ByVal sender As Object, _ ByVal e As System.Web.UI.WebControls.TreeNodeEventArgs) Handles TreeView1.TreeNodePopulate PopulateSubLevel(CInt(e.Node.Value), e.Node)End Sub
That is, when the TreeView’s TreeNodePopulate event is raised, PopulateSubLevel is called.
TreeNodePopulate is raised for a TreeNode which is expanded by the user for the first time. Due to PopulateNodesFromClient (TreeView) and PopulateOnDemand (TreeNode) settings, this happens with the client-side callback mechanism which is handled by the ASP.NET Page framework. This means that populating does not involve a postback. And, due to better cross-browser support in ASP.NET 2.0, this also works for other browsers such as Firefox. Note that clicking on the node does cause a postback because I haven’t modified the select action of the populated tree nodes from the defaults.
With this setup, trying our sample page and expanding the nodes, we should get a view like this.
Conclusion
We have set up a working TreeView relatively easily. This approach requires a little bit of code, but shows that it’s not really because of the TreeView control but due to the nature of hierarchical data. Certainly, there’s room for creating a hierarchical data source control to deal with this so that data access wouldn’t require that much code; however, I believe that getting your hands in code is the best way to learn about the technology.
- Display Hierarchical Data with TreeView in ASP.NET 2.0
- Display hierarchical data with TreeView
- Binding Data With TreeView Control ASP.NET 2.0
- ASP.NET 2.0 : Hierarchical datasources
- Working with Data in ASP.NET 2.0 :: Using TemplateFields in the GridView Control
- Working with Data in ASP.NET 2.0 :: Master Pages and Site Navigation
- 开始正式的看 Working with Data in ASP.NET 2.0
- A book Working with Data in ASP.NET 2.0 by Scott Mitchell
- How To Display Hierarchical Data by Using Nested Repeater Controls and Visual C# .NET
- Managing Hierarchical Data in MySQL
- Managing Hierarchical Data in MySQL
- Managing Hierarchical Data in MySQL
- Managing Hierarchical Data in MySQL
- Managing Hierarchical Data in MySQL
- Managing Hierarchical Data in MySQL
- Read and Display Data From an Excel File (.xsl or .xlsx) in ASP.NET
- 4.7 Displaying Hierarchical Data in Table Views
- Simplified and Extended Data Binding Syntax in ASP.NET 2.0
- VC—主框架窗口绘制背景
- 进程和线程的区别
- 请问怎么在WEBlogic中部署自己手写的EJB
- 项目点滴
- C++ 的4种类型转化方法
- Display Hierarchical Data with TreeView in ASP.NET 2.0
- CWnd::SubclassWindow
- IT项目经理手册(三)--现场调研时犯的错误
- C++内存管理操作详解
- [总结]1。位图文字、矢量文字(形文字)的存储与显示
- C/C++语言void及void指针深层探索
- 对话框的数据交换,对里面的函数实现比较详细
- 使用ASP.NET2.0的TreeView控件显示分层数据
- [总结]2。消息流向及响应分析