Ngôn ngữ ASP.NET - Điều khiển TreeView

Cách tạo TreeView trong ASP.NET

TreeView thể hiện các mục (items) theo dạng cấu trúc cây giống cách thể hiện các thư mục, tập tin trong cửa sổ Windows Explorer. TreeView không lệ thuộc hẳn vào file Web.sitemap, nó có thể kết hợp với một file XML bất kì và tạo ra ra cây đề mục thông qua lập trình.

  • Dùng để thể hiện thực đơn có dạng cây và cho phép người dùng chuyển đến một trang web khác khi chọn một node
  • Thao tác tạo: chọn thuộc tính Nodes: khai báo các chức năng trên thực đơn

Một số thuộc tính quan trọng của TreeView control:

Thuộc tính Mô tả
CssClass Cho phép dùng các class CSS.
CollapseImageUrl Hình ảnh thu gọn lại một phần cây khi nhấp chuột. Mặc định là dấu .
ExpandImageUrl Hình ảnh mở rộng một phần cây khi nhấp chuột. Mặc định là dấu +.
CollapseImageToolTip ToolTip được hiển thị khi người dùng lướ chuột qua một mục menu có thể thu gọn.
ExpandImageToolTip ToolTip được hiển thị khi người dùng lướt chuột qua một mục menu có thể mở rộng.
ShowExpandCollapse Quyết định liệu các mục trong TreeView có thể được thu gọn và mở rộng bằng cách nhấp một hình ảnh trước chúng.
ShowLines Xác định các hàng có thể được dùng để kết nối đến các mục nào đó trong TreeView.
ExpandDepth Xác định mức mở rộng của TreeView khi trang được tải lần đầu tiên. Mặc định là chế độ FullExpand, nghĩa là tất cả các mục trong TreeView đều hiển thị.

Trong bài Web Navigation chúng ta đã tạo một tập tin sitemap, trong phần này chúng ta tiếp tục làm viêc với tập tin đó

Bước 1: Kéo thả điều khiển TreeView từ thanh ToolBox:

Bước 2: Chọn thuộc tính DataSource của TreeView chỉ đến SiteMapDataSource2, sau đó click vào mục Refresh Schema , nội dung TreeView sẽ được cập nhật theo SiteMapDataSource2
Bước 3: Click vào mục Auto Format.. để định dạng hiển thị cho TreeView, click nút Apply để xác nhận việc thay đổi dạng hiển thị :

Nội dụng TreeView sau khi cấu hình :

<asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource2" ImageSet="BulletedList3" ShowExpandCollapse="False">
                        <HoverNodeStyle Font-Underline="True" ForeColor="#5555DD" />
                        <NodeStyle Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" HorizontalPadding="5px" NodeSpacing="0px" VerticalPadding="0px" />
                        <ParentNodeStyle Font-Bold="False" />
                        <SelectedNodeStyle Font-Underline="True" ForeColor="#5555DD" HorizontalPadding="0px" VerticalPadding="0px" />
                    </asp:TreeView>
                    <asp:SiteMapDataSource ID="SiteMapDataSource2" runat="server" />

Thực thi trang web cho kết quả: