ASP.NET專題實務 WebForm + MVC線上教學影片 -- MIS2000Lab.

MIS2000 Lab.已推出20餘本電腦書，曾任資策會專任講師與微軟MVP。自.NET 1.x起，已出版15本ASP.NET (Web Form)書籍，也有遠距教學 線上教程 教學影片

2010-09-21

[補充][習題]下集第三章，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.主講   事先錄好的影片，並非上課側錄！   觀看時，有如「一對一」面對面講課。

 

 

 

贊助商連結

BloggerAds