ajax和c#.net相结合的树型菜单

此代码是从网上下载的资源，后经过修改 
在此感谢原著作者

----------------------------web.config----------
    <httpHandlers>
      <add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro" />
    </httpHandlers>
--------------------------Tree.aspx

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

<! 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 > Ajax Efficient Tree </ title >
     < link type = " text/css "  href = " css/tree.css "  rel = " stylesheet " >
</ head >
< body >
     < form id = " form1 "  runat = " server " >
     < div >
         < asp:Panel ID = " Panel1 "  runat = " server "  Height = " 300px "  Width = " 100px " >
             < div id = " CategoryTree "   class = " TreeMenu "  style = " width: 150px " ></ div >
         </ asp:Panel >
         < script language = " jscript " >
            var tree  =  document.getElementById( " CategoryTree " ); // 获取上面那个div的id名称
            var root  =  document.createElement( " li " );
            root.id  =   " li_0 " ;
            tree.appendChild( root );
            ExpandSubCategory(  0  );
            function ExpandSubCategory( categoryID )
             ... {
                var liFather = document.getElementById( "li_" + categoryID );
                if( liFather.getElementsByTagName("li").length > 0)
                ...{
                    ChangeStatus( categoryID );
                    return;
                }
                liFather.className = "Opened";
                SwitchNode( categoryID, true );
                
                //仅获取当前节点的子Nodes
                _Default.GetSubCategory( categoryID, GetSubCategory_callback );
            }             
            function SwitchNode( CategoryID, show )
             ... {
                var li_father = document.getElementById("li_" + CategoryID);
                if( show )
                ...{
                    var ul = document.createElement("ul");
                    ul.id = "ul_note_" + CategoryID;
                    
                    var note = document.createElement("li");
                    note.className = "Child";              
                    
                    var img = document.createElement("img");
                    img.className = "s";
                    img.src = "css/s.gif";                    
                    
                    var a = document.createElement("a");
                    a.href = "javascript:void(0);";
                    a.innerHTML = "Please waiting...";
                    
                    note.appendChild(img);
                    note.appendChild(a);
                    ul.appendChild(note);
                    li_father.appendChild(ul);                                        
                }   
                else
                ...{
                    var ul = document.getElementById("ul_note_" + CategoryID );
                    if( ul )
                    ...{
                        li_father.removeChild(ul);
                    }
                }             
            }
            function GetSubCategory_callback( response )
             ... {
               var dt = response.value.Tables[0];
               if( dt.Rows.length > 0 )
               ...{
                    var iCategoryID = dt.Rows[0].FatherID;               
               }                                
               var li_father = document.getElementById("li_" + iCategoryID );
               var ul = document.createElement("ul");
               for( var i = 0; i < dt.Rows.length; i++ )
               ...{
                    if( dt.Rows[i].IsChild == 1 )
                    ...{
                        var li = document.createElement("li");
                        li.className = "Child";
                        li.id = "li_" + dt.Rows[i].CategoryID;
                        var img = document.createElement("img");
                        img.id = dt.Rows[i].CategoryID;
                        img.className = "s";
                        img.src = "css/s.gif";
                        var a = document.createElement("a");
                        a.href = "javascript:OpenDocument('" + dt.Rows[i].CategoryID + "');";
                        a.innerHTML = dt.Rows[i].CategoryName;                                          
                    }
                    else
                    ...{
                        var li = document.createElement("li");
                        li.className = "Closed";
                        li.id = "li_" + dt.Rows[i].CategoryID;
                        var img = document.createElement("img");
                        img.id = dt.Rows[i].CategoryID;
                        img.className = "s";
                        img.src = "css/s.gif";
                        img.onclick = function()...{ ExpandSubCategory( this.id ); };
                        img.alt = "Expand/collapse";
                        var a = document.createElement("a");
                        a.href = "javascript:ExpandSubCategory('" + dt.Rows[i].CategoryID + "');";
                        a.innerHTML = dt.Rows[i].CategoryName;                                         
                    }
                    li.appendChild(img);
                    li.appendChild(a);
                    ul.appendChild(li);
               }
               li_father.appendChild(ul);
               SwitchNode( iCategoryID, false );
            }           
            
             // 单击叶节点时, 异步从服务端获取单个节点的数据.
            function OpenDocument( CategoryID )
             ... {                
                _Default.GetNameByCategoryID( CategoryID, GetNameByCategoryID_callback );
            }
            
            function GetNameByCategoryID_callback( response )
             ... {
                //alert( response.value );
                //location.href="http://www.sohu.com";此处作了修改， 能跳转到frameset的主页面
                if(response.value=="修改密码")
                 window.open("http://www.sohu.com","main");
                 else if(response.value=="钢笔")
                 window.open("http://www.baidu.com","main");
            }
            
            function ChangeStatus( CategoryID )
             ... {
                var li_father = document.getElementById("li_" + CategoryID );
                if( li_father.className == "Closed" )
                ...{
                    li_father.className = "Opened";
                }
                else
                ...{
                    li_father.className = "Closed";
                }
           }               
         </ script >           
     </ div >
     </ form >     
</ body >       
</ html >

--------------------Tree.aspx.cs------------

using  System;
using  System.Data;
using  System.Configuration;
using  System.Web;
using  System.Web.Security;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.WebControls.WebParts;
using  System.Web.UI.HtmlControls;

public   partial   class  _Default : System.Web.UI.Page 
... {
   //此对象用于存放所有的节点数
   public static DataSet dsAllNodes = new DataSet();

   protected void Page_Load(object sender, EventArgs e)
   ...{
       AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default));       
       CreateNodes();
   }

   private DataTable CreateStructure()
   ...{
      DataTable dt = new DataTable();
      dt.Columns.Add(new DataColumn("CategoryID", typeof(int)));
      dt.Columns.Add(new DataColumn("CategoryName", typeof(string)));
      dt.Columns.Add(new DataColumn("FatherID", typeof(string)));
      dt.Columns.Add(new DataColumn("IsChild", typeof(bool)));
      return dt;
   }
   public void CreateNodes()
   ...{
      DataTable dt = this.CreateStructure();

      DataRow drNew = dt.NewRow();
      drNew["CategoryID"] = 1;
      drNew["CategoryName"] = "帐户管理";
      drNew["FatherID"] = 0;
      dt.Rows.Add( drNew );

      drNew = dt.NewRow();
      drNew["CategoryID"] = 2;
      drNew["CategoryName"] = "修改密码";
      drNew["FatherID"] = 1;
      dt.Rows.Add( drNew );

      drNew = dt.NewRow();
      drNew["CategoryID"] = 3;
      drNew["CategoryName"] = "工具";
      drNew["FatherID"] = 1;
      dt.Rows.Add( drNew );

      drNew = dt.NewRow();
      drNew["CategoryID"] = 4;
      drNew["CategoryName"] = "手机";
      drNew["FatherID"] = 0;
      dt.Rows.Add(drNew);

      drNew = dt.NewRow();
      drNew["CategoryID"] = 5;
      drNew["CategoryName"] = "苹果";
      drNew["FatherID"] = 4;
      dt.Rows.Add( drNew );

      drNew = dt.NewRow();
      drNew["CategoryID"] = 9;
      drNew["CategoryName"] = "钢笔";
      drNew["FatherID"] = 3;
      dt.Rows.Add( drNew );

      drNew = dt.NewRow();
      drNew["CategoryID"] = 10;
      drNew["CategoryName"] = "铅笔";
      drNew["FatherID"] = 3;
      dt.Rows.Add( drNew );

      drNew = dt.NewRow();
      drNew["CategoryID"] = 14;
      drNew["CategoryName"] = "尺子";
      drNew["FatherID"] = 3;
      dt.Rows.Add( drNew );
      
      drNew = dt.NewRow();
      drNew["CategoryID"] = 12;
      drNew["CategoryName"] = "橡皮";
      drNew["FatherID"] = 3;
      dt.Rows.Add( drNew );

      dsAllNodes.Tables.Add(dt);
   }

   [AjaxPro.AjaxMethod]
   public DataSet GetSubCategory(int CategoryID)
   ...{
      DataSet ds = new DataSet();
      DataTable dt = this.CreateStructure();
      DataRow[] drSelect = dsAllNodes.Tables[0].Select("FatherID=" + CategoryID.ToString());
      foreach (DataRow drTemp in drSelect)
      ...{
         DataRow dr = dt.NewRow();
         dr["CategoryID"] = drTemp["CategoryID"];
         dr["CategoryName"] = drTemp["CategoryName"];
         dr["FatherID"] = drTemp["FatherID"];
         dr["IsChild"] = IsLeaf( int.Parse( drTemp["CategoryID"].ToString() ) );
         dt.Rows.Add(dr);
      }
      ds.Tables.Add(dt);
      return ds;
   }

   [AjaxPro.AjaxMethod]
   public bool IsLeaf(int Category)
   ...{
       foreach(DataRow dr in dsAllNodes.Tables[0].Rows)
       ...{
          if (dr["FatherID"] != null && int.Parse(dr["FatherID"].ToString()) == Category)
          ...{
             return false;  
          }
       }
       return true;
   }

   [AjaxPro.AjaxMethod]
   public string GetNameByCategoryID(string CategoryID )
   ...{
      foreach( DataRow dr in dsAllNodes.Tables[0].Rows )
      ...{
         if( dr["CategoryID"].ToString() == CategoryID.ToString() )
         ...{
            return dr["CategoryName"].ToString();
         }
      }
      return "";
   }
}

 

修改的地方：原程序只有一个父结点，现在我改成两个了，另外，在点击子结点的时候，我做了两个连接跳转到搜狐和百度。

另外，还需要一个css文件夹，此处好像不能上传文件，抱歉了。还有一点，系统目录的bin文件夹里要有ajaxpro.dll这个文件。网上有下载的。希望对大家有所帮助。