Treeview control in ASP .net_问答_开发者_运维开发者技术经验分享

I have a treeview control in my web application. I build this开发者_开发问答 tree view dynamically.

Is there anyway to select a node and change the color of the selected node using javascript or any other method running in client side(i mean without post back).

i am using c# and asp.net to bulid my application

EDIT (To explain a little more on JQuery):
JQuery is a .js file containing JavaScript functions to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications.

You can download JQuery.js file from JQuery official website, then reference to the JQuery.js file (like you reference to other .js file) before you call your first JQuery script, as followed:

<script type="text/javascript" src="jQuery.js"></script>

Or alternatively, you can use the JQuery.js file hosted by Google. This is what I did for my testing. Below is the complete code of my .aspx page:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TreeView.aspx.cs" Inherits="TreeView" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script type="text/javascript" 
        src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
        // You may specify partial version numbers, such as "1" or "1.3",
        //  with the same result. Doing so will automatically load the 
        //  latest version matching that partial revision pattern 
        //  (e.g. 1.3 would load 1.3.2 today and 1 would load 1.4.2).
        google.load("jquery", "1.4.2");

        google.setOnLoadCallback(function() {
            // Place init code here instead of $(document).ready()

            //change cursor to hand when user mouseover tree nodes
            $(".TreeView1_0").mouseover(function() {
                $(this).css('cursor', 'pointer');
            });


            //unbold all nodes then bold the selected node to indicate it's selected
            $(".TreeView1_0").click(function() {
                $(".TreeView1_0").css('font-weight', 'normal');
                $(this).css('font-weight', 'bold');
            });
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TreeView ID="TreeView1" runat="server">
        </asp:TreeView>
    </div>
    </form>
</body>
</html>

2 ways I can thought of to implement this:

Wrap your treeview with Ajax UpdatePanel. This is more straight forward.
Remove hyperlink from tree nodes using recursive function, then bind client side click event to all the nodes using JQuery.

More details for method 2 as followed..

Place treeview control onto aspx page

<asp:TreeView ID="TreeView1" runat="server"> </asp:TreeView>

Add dummy nodes and call recursive function to remove hyperlinks

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        //add dummy nodes
        TreeView1.Nodes.Add(new TreeNode() { Value = "1", Text = "One" });
        TreeView1.Nodes.Add(new TreeNode() { Value = "2", Text = "Two" });
        TreeView1.Nodes.Add(new TreeNode() { Value = "3", Text = "Three" });

        //call recursive function to remove hyperlinks
        RemoveHyperLinks(TreeView1, TreeView1.Nodes);
    }
}

Implement the recursive function

System.Web.UI.WebControls.TreeView RemoveHyperLinks(System.Web.UI.WebControls.TreeView treeView, TreeNodeCollection treeNodes)
{
    foreach (TreeNode node in treeNodes)
    {
        node.SelectAction = TreeNodeSelectAction.None;//here the link is removed
        if (node.ChildNodes != null && node.ChildNodes.Count > 0)
        {
            treeView = RemoveHyperLinks(treeView, node.ChildNodes);
        }
    }
    return treeView;
}

Place this JQuery code on aspx page

//change cursor to hand when user mouseover tree nodes
$(".TreeView1_0").mouseover(function() {
    $(this).css('cursor', 'pointer');
});


//unbold all nodes then bold the selected node to indicate it's selected
$(".TreeView1_0").click(function() {
    $(".TreeView1_0").css('font-weight', 'normal');
    $(this).css('font-weight', 'bold');
});