ASP.NET TreeView控件使用指南

1. 添加 TreeView 控件
方式1：通过工具箱拖拽
打开 ASP.NET Web Forms 页面（.aspx），从工具箱的 “导航” 部分拖拽 TreeView 控件到页面上。

方式2：手动编写标记
html
<asp:TreeView ID="tvDemo" runat="server" OnSelectedNodeChanged="tvDemo_SelectedNodeChanged">
</asp:TreeView>
2. 静态定义节点
在 .aspx 文件中直接定义节点结构：

html
<asp:TreeView ID="tvStatic" runat="server">
    <Nodes>
        <asp:TreeNode Text="根节点" Value="Root">
            <asp:TreeNode Text="子节点1" Value="Child1"></asp:TreeNode>
            <asp:TreeNode Text="子节点2" Value="Child2"></asp:TreeNode>
        </asp:TreeNode>
    </Nodes>
</asp:TreeView>
3. 动态绑定数据
示例1：绑定到数据库（如SQL Server）
假设有一个存储分类信息的表 Categories，字段包括 CategoryID, CategoryName, ParentCategoryID。

后端代码（C#）：

csharp
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        BindTreeView();
    }
}

private void BindTreeView()
{
    string connectionString = "Your_Connection_String";
    using (SqlConnection conn = new SqlConnection(connectionString))
    {
        string query = "SELECT CategoryID, CategoryName, ParentCategoryID FROM Categories";
        SqlDataAdapter da = new SqlDataAdapter(query, conn);
        DataTable dt = new DataTable();
        da.Fill(dt);

        // 绑定数据到 TreeView
        tvDemo.DataSource = dt;
        tvDemo.DataBind();

        // 设置父子关系（需要递归或LINQ处理）
        // 此处简化示例，实际可能需要递归构建节点
        foreach (DataRow row in dt.Rows)
        {
            if (row["ParentCategoryID"] == DBNull.Value)
            {
                TreeNode rootNode = new TreeNode(row["CategoryName"].ToString(), row["CategoryID"].ToString());
                tvDemo.Nodes.Add(rootNode);
                AddChildNodes(rootNode, dt);
            }
        }
    }
}

private void AddChildNodes(TreeNode parentNode, DataTable dt)
{
    foreach (DataRow row in dt.Rows)
    {
        if (row["ParentCategoryID"].ToString() == parentNode.Value)
        {
            TreeNode childNode = new TreeNode(row["CategoryName"].ToString(), row["CategoryID"].ToString());
            parentNode.ChildNodes.Add(childNode);
            AddChildNodes(childNode, dt);
        }
    }
}
示例2：绑定到 XML 文件
假设有一个 data.xml：

xml
<Categories>
    <Category Name="根节点" ID="1">
        <Category Name="子节点1" ID="2" />
        <Category Name="子节点2" ID="3" />
    </Category>
</Categories>
后端代码（C#）：

csharp
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        DataSet ds = new DataSet();
        ds.ReadXml(Server.MapPath("~/data.xml"));
        tvDemo.DataSource = ds;
        tvDemo.DataBind();
    }
}
4. 处理事件
响应节点点击事件
csharp
protected void tvDemo_SelectedNodeChanged(object sender, EventArgs e)
{
    string selectedValue = tvDemo.SelectedNode.Value;
    // 执行自定义逻辑
}
动态展开/折叠节点
csharp
protected void btnExpand_Click(object sender, EventArgs e)
{
    tvDemo.CollapseAll();
    tvDemo.SelectedNode.Expand();
}
5. 自定义样式
通过 NodeStyle 和 RootNodeStyle 等属性设置样式：

html
<asp:TreeView ID="tvDemo" runat="server" ExpandDepth="1">
    <HoverNodeStyle BackColor="#CCCCCC" />
    <SelectedNodeStyle ForeColor="Red" />
    <NodeStyle Font-Names="Arial" Font-Size="12px" />
</asp:TreeView>
或使用 CSS 类：

html
<asp:TreeView ID="tvDemo" runat="server" CssClass="tree-style">
</asp:TreeView>
css
.tree-style .node {
    padding: 5px;
}
6. 异步加载（AJAX）
通过 UpdatePanel 实现无刷新更新：

html
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:TreeView ID="tvAsync" runat="server" OnTreeNodeExpanded="tvAsync_TreeNodeExpanded">
        </asp:TreeView>
    </ContentTemplate>
</asp:UpdatePanel>
常见问题
节点未显示

检查 Page_Load 中是否有 if (!IsPostBack) 保护数据绑定。

确认数据源是否正确填充。

事件未触发

确保 OnSelectedNodeChanged 等事件已绑定到后端方法。

性能优化

对大型数据集使用 PopulateOnDemand 动态加载子节点。

完整示例：动态加载子节点
csharp
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        TreeNode root = new TreeNode("根节点");
        root.PopulateOnDemand = true;
        tvDemo.Nodes.Add(root);
    }
}

protected void tvDemo_TreeNodePopulate(object sender, TreeNodeEventArgs e)
{
    // 根据 e.Node.Value 加载子节点
    if (e.Node.Value == "Root")
    {
        e.Node.ChildNodes.Add(new TreeNode("动态子节点1"));
        e.Node.ChildNodes.Add(new TreeNode("动态子节点2"));
    }
}
html
<asp:TreeView ID="tvDemo" runat="server" OnTreeNodePopulate="tvDemo_TreeNodePopulate">
</asp:TreeView>
通过以上步骤，你可以灵活地在 ASP.NET Web Forms 中实现 TreeView 功能。如果需要更复杂的交互，建议结合 jQuery 插件（如 jstree）或 ASP.NET Core 的现代前端框架。