[補充][習題]下集第三章,TreeView如何從資料庫撈資料,顯示出樹狀階層的路徑與節點?

來自微軟MSDN

「在 TreeView 控制項中顯示關聯式資料」
就是網路上很多人詢問的「TreeView or Menu巡覽控制項,如何從資料庫裡面撈資料,自動顯示出樹狀階層的路徑?」

以下的程式碼,我個人加上一些註解,
希望對您有幫助。



如同昨天分享的範例,今天要分享的
也是來自同一個網址(微軟MSDN)

逐步解說:顯示 TreeView 控制項中的階層式資料
http://msdn.microsoft.com/zh-tw/library/7a9swst5%28v=VS.100%29.aspx

這篇文章有分成上 / 下兩個範例

下半部的「在 TreeView 控制項中顯示關聯式資料
就是網路上很多人詢問的「TreeView or Menu巡覽控制項,如何從資料庫裡面撈資料,自動顯示出樹狀階層的路徑?
 

本文已經收錄在「下集(第二版)」 2011年推出的黑皮書裡面,

 

 

============================================================


HTML畫面設計:

本範例採用了 Northwind資料庫,唯二要動手修正的地方:

第一,Web.Config檔裡面的連線字串(ConnectionString)

第二,畫面上的 TreeView
      #以滑鼠右鍵按一下 [TreeView] 控制項 => [屬性],然後將 [MaxDataBindDepth] 設為 2。
      #以滑鼠右鍵按一下 [TreeView] 控制項 =>  [顯示智慧工作],然後在 [TreeView 工作] 功能表上按 [編輯節點]。
      #在 [TreeView 節點編輯器] 對話方塊中,按一下標記為 [加入根節點] 的圖示,然後在 [屬性] 下,將 [文字] 設為 [Product List],並將 [PopulateOnDemand] 設為 true
  註:若要動態填入節點,請先將節點的 PopulateOnDemand 屬性設為 true。
      #按一下 [確定]。

      您會建立樹狀結構的最上層節點,其中只包含靜態文字。

 



============================================================


後置程式碼 Code Behind:

以下的程式碼範例,有點複雜。
但只要您瞭解 Northwind資料庫裡面, Products 與 Categories兩個資料表的關連。
就能應用這段現成的程式來作了。

 

執行成果如下圖:

我們可以看見「第一層」節點是「產品分類(Categories)」,例如:飲料。

第二層的節點,才是產品名稱。

     

 

同理可證,您手上如果有兩個關連式資料表,
只要修改一下SQL指令,也能原封不動地使用這段程式。

 

以下的程式碼,我個人加上一些註解,
希望對您有幫助。

原本的網址,也有提供C#範例,您也可以參閱。
 

01 '== 自己加入 NameSpace宣告 for ADO.NET
02
03 Imports System.Web.Configuration
04 Imports System.Data
05 Imports System.Data.SqlClient

06
07
08
09     Protected Sub TreeView1_TreeNodePopulate(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.TreeNodeEventArgs) Handles TreeView1.TreeNodePopulate
10         '== 當使用者按一下以開啟節點時,會呼叫此程式碼。 ==
11         '      e As TreeNodeEventArgs物件會以程式的方式存取目前節點。
12
13         If e.Node.ChildNodes.Count = 0 Then
14             Select Case e.Node.Depth
15                 '== 因為您想要在樹狀結構的不同層級顯示不同的資料,
16                 '== 所以必須判斷使用者按一下的節點深度,然後於該層級適當地填入節點。
17                 Case 0
18                     PopulateCategories(e.Node)  '== 自己寫的副程式
19                 Case 1
20                     PopulateProducts(e.Node)  '== 自己寫的副程式
21             End Select
22         End If
23
24     End Sub

25

26     '==== 自己寫的副程式 ===============================================
27     Sub PopulateCategories(ByVal node As TreeNode)
28         Dim sqlQuery As New SqlCommand("Select CategoryName, CategoryID From Categories")
29
30         Dim ResultSet As DataSet = RunQuery(sqlQuery)
31
32         If ResultSet.Tables.Count > 0 Then
33             Dim row As DataRow
34             For Each row In ResultSet.Tables(0).Rows
35                 Dim NewNode As TreeNode = New TreeNode(row("CategoryName").ToString() & "--以下是產品", row("CategoryID").ToString())
36                 NewNode.PopulateOnDemand = True
37                 '== 底下還有一層子節點,所以設定為 true
38                 NewNode.SelectAction = TreeNodeSelectAction.Expand
39                 node.ChildNodes.Add(NewNode)
40                 '== 註解:將每一個節點的 PopulateOnDemand 屬性設為 true,以便在使用者按一下節點時,節點會引發其 TreeView TreeNodePopulate事件
41                 '==   設定 SelectAction 屬性,讓節點根據 “預設”處於展開狀態。
42
43             Next
44         End If
45     End Sub

46
47
48     '== 節點的第二層級將顯示每一個分類的產品。
49     '== 因此,填入產品節點會需要參數型查詢,以便您可以為目前分類擷取產品,並適當地填入子節點。
50     Sub PopulateProducts(ByVal node As TreeNode)
51         Dim sqlQuery As New SqlCommand
52         sqlQuery.CommandText = "Select ProductName From Products Where CategoryID = @categoryid"
53         sqlQuery.Parameters.Add("@categoryid", SqlDbType.Int).Value = node.Value
54
55         Dim ResultSet As DataSet = RunQuery(sqlQuery)
56
57         If ResultSet.Tables.Count > 0 Then
58             Dim row As DataRow
59             For Each row In ResultSet.Tables(0).Rows
60                 Dim NewNode As TreeNode = New TreeNode(row("ProductName").ToString())
61                 NewNode.PopulateOnDemand = False
62                 NewNode.SelectAction = TreeNodeSelectAction.None
63                 node.ChildNodes.Add(NewNode)
64                 ' == 註解:將 PopulateOnDemand屬性設為 false。如此在顯示產品節點時,”不”顯示展開按鈕。
65                 '== 這是十分必要的,因為這些產品的節點下面,已經並沒有其他(更深一層的)節點了。
66
67             Next
68         End If
69     End Sub

70     '=============================================================
71
72
73     Function RunQuery(ByVal sqlQuery As SqlCommand) As DataSet
74         Dim Conn As New SqlConnection(WebConfigurationManager.ConnectionStrings("NorthwindConnectionString").ConnectionString)
75
76         Dim dbAdapter As New SqlDataAdapter()
77         dbAdapter.SelectCommand = sqlQuery
78         sqlQuery.Connection = Conn
79
80         Dim ds As DataSet = New DataSet()
81         Try
82             dbAdapter.Fill(ds)
83         Catch ex As Exception
84             Response.Write("Unable to connect to SQL Server.")
85         End Try
86
87         Return ds  '== 傳回一個 DataSet
88     End Function


上面會使用到一個少見的事件

TreeView.    TreeNodePopulate 事件

http://msdn.microsoft.com/zh-tw/library/system.web.ui.webcontrols.treeview.treenodepopulate%28v=VS.100%29.aspx

當在 TreeView 控制項中 展開 PopulateOnDemand 屬性設為 true 的節點時發生。

有時候,根據使用者輸入的資料大小或自訂內容,靜態地預先定義樹狀結構並不實際。因為這個原因,TreeView 控制項會支援動態節點擴展。將節點的 PopulateOnDemand 屬性設定為 true 時,在執行階段展開節點時,便會填入該節點。

若要動態填入節點,請先將節點的 PopulateOnDemand 屬性設為 true。然後,定義 TreeNodePopulate 事件的事件處理方法,以程式的方式填入節點。一般事件處理方法會從資料來源擷取節點資料、將資料置於節點結構,然後將節點結構加入所填入之節點的 ChildNodes 集合。藉由將 TreeNode 物件加入父節點的 ChildNodes 集合,可建立節點結構。



 

 

檔案下載(附上VB與C#兩種),裡面我有加上個人註解,希望對您有幫助。

新增資料夾.rar

 

 

 

===  最後要打一下廣告  ==========================

 

1.  如果您覺得我的描述、寫作方式,符合您的胃口。

2.  如果您看完以後,知道我寫書、介紹一些控制項或是技術........不是「混過去」、「帶過去」而已,而是真真確確地蒐集 "有用的範例",讓您學得更深入!

3.  如果您覺得:我出完書以後,還不定期地提供售後服務,提供補充教材......這樣的互動是 "良性"的,是值得鼓勵的。......已經推出 兩百多篇 補充範例了

4. 如果您(尤其是學生)真的想把基礎學好,而不是 "混"過這一門課就好、而不是寫個(畢業專題的)屍體出來交差(能畢業就好).....那麼.......

 

請您購買下面的書籍,

東西多到您學不完

上 / 下兩集,兩本書的厚度(我蒐集的各種範例)將近 兩千頁 !!......絕對不會讓您失望

 

 

我將思想傳授他人, 他人之所得,亦無損於我之所有;

猶如一人以我的燭火點燭,光亮與他同在,我卻不因此身處黑暗。----Thomas Jefferson

線上課程教學,遠距教學 (Web Form 約 51hr)  https://dotblogs.com.tw/mis2000lab/2016/02/01/aspnet_online_learning_distance_education_VS2015

線上課程教學,遠距教學 (ASP.NET MVC 約 140hr)  https://dotblogs.com.tw/mis2000lab/2018/08/14/ASPnet_MVC_Online_Learning_MIS2000Lab

 

寫信給我,不要私訊 --  mis2000lab (at) yahoo.com.tw  或  school (at) mis2000lab.net

 (1) 第一天 ASP.NET MVC5 完整影片(5.5小時 / .NET 4.x版)免費試聽。影片 https://youtu.be/9spaHik87-A 

 (2) 第一天 ASP.NET Core MVC 完整影片(3小時 / .NET Core 6.0~8.0)免費試聽。影片 https://youtu.be/TSmwpT-Bx4I 

[學員感言] mis2000lab課程評價 - ASP.NET MVC , WebForm  。 https://mis2000lab.medium.com/%E5%AD%B8%E5%93%A1%E6%84%9F%E8%A8%80-mis2000lab%E8%AA%B2%E7%A8%8B%E8%A9%95%E5%83%B9-asp-net-mvc-webform-77903ce9680b  


ASP.NET遠距教學、線上課程(Web Form + MVC)。 第一天課程, "完整" 試聽。 

.........   facebook社團   https://www.facebook.com/mis2000lab   ......................

.........  YouTube (ASP.NET) 線上教學影片  https://www.youtube.com/channel/UC6IPPf6tvsNG8zX3u1LddvA/

 

Blog文章 "附的範例" 無法下載,請看 https://dotblogs.com.tw/mis2000lab/2016/03/14/2008_2015_mis2000lab_sample_download

請看我們的「售後服務」範圍(嚴格認定)。

...................................................................................................................................................... 

ASP.NET MVC  => .NET Core MVC 線上教學  ...... 第一天課程 完整內容 "免費"讓您評估 / 試聽

[遠距教學、教學影片] ASP.NET (Web Form) 課程 上線了!MIS2000Lab.主講   事先錄好的影片,並非上課側錄!   觀看時,有如「一對一」面對面講課