[Ajax].NET+Ajax.Pro实现无刷新动态树 -- 梦源于风飞工作室-- 编程爱好者博客

昨天花了半天的时间搞的，其中碰到一个很郁闷的错误, 就是我写完运行, 程序不能无刷新调用服务器端方法. 调了1个多小时才发现原来忘记加<form runat="server">. 特郁闷啊.... 需要先安装ajax.pro的补丁,不然会报"缺少对象"的错误,ajax.pro google下就有了. 下载地址: .NET+Ajax.Pro实现无刷新动态树下载地址: CSS实现静态树 .NET+Ajax.Pro实现无刷新动态树代码: 客户端代码:DynamicTree.aspx<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DynamicTree.aspx.cs" Inherits="DynamicTree" %> <!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 id="Head1" runat="server"> <title>无标题页</title> <link type="text/css" href="Tree.css" rel="stylesheet" /> <script type="text/javascript"> var li_ClickingNode; // 用户点击的节点 var CategoryID = 0; // 展开和折叠父节点 function ExpandCategory( objImg ) { li_ClickingNode = objImg.parentNode; // 获得用户点击的节点 // 获得点击节点的ID CategoryID = li_ClickingNode.id.substr( li_ClickingNode.id.indexOf( "_" ) + 1 ); if ( "Closed" == li_ClickingNode.className ) { li_ClickingNode.className = "Opened"; switchNode( true ); // 显示 "请稍候，正在加载......" // 调用服务器方法，获得该节点的子节点 DynamicTree.GetSubCategoryS( CategoryID, GetSubCategory_CallBack ); } else if ( "Opened" == li_ClickingNode.className ) { li_ClickingNode.className = "Closed"; // 当折叠父节点时删除显示的子节点 li_ClickingNode.removeChild( document.getElementById("ul_" + CategoryID) ); } } // 显示和隐藏 "请稍候，正在加载......" function switchNode( show ) { if ( show ) // 显示 "请稍候，正在加载......" { // 用户添加从数据库获得的子节点 var ul = document.createElement( "UL" ); ul.id = "ul_" + CategoryID; var li = document.createElement( "LI" ); li.className = "Child"; // 表示该节点为父节点 // 创建节点前的图片 var img = document.createElement( "IMG" ); img.src = ""; // 创建超联接，功能和img一样 var a = document.createElement( "A" ); a.href = "javascript:void(0)"; a.innerHTML = "请稍候，正在加载......"; // 显示节点值 /* 添加子节点 */ li.appendChild( img ); li.appendChild( a ); ul.appendChild( li ); // 将子节点添加到ul中 li_ClickingNode.appendChild( ul ); } else // 隐藏 "请稍候，正在加载......" { var ul = document.getElementById( "ul_" + CategoryID ); if ( ul ) { li_ClickingNode.removeChild( ul ); } } } function GetSubCategory_CallBack( response ) { var ds = response.value; if ( ds != null && typeof(ds) == "object" && ds.Tables[0] != null ) { // 用户添加从数据库获得的子节点 var ul = document.createElement( "UL" ); ul.id = "ul_" + CategoryID; // 遍历用户点击的父节点的子节点 for ( var i = 0; i < ds.Tables[0].Rows.length; i++ ) { if ( 1 == ds.Tables[0].Rows[i].hasChild ) // 表示该子节点是有子节点 { // 创建节点 var li = document.createElement( "LI" ); li.id = "li_" + ds.Tables[0].Rows[i].CategoryID; li.className = "Closed"; // 表示该节点为父节点 // 创建节点前的图片 var img = document.createElement( "IMG" ); img.src = ""; img.alt = ds.Tables[0].Rows[i].CategoryName; // 点击图片调用展开该父节点的函数 img.onclick = function() { ExpandCategory(this); }; // 创建超联接，功能和img一样 var a = document.createElement( "A" ); a.href = "javascript:ExpandCategory(this)"; a.innerHTML = ds.Tables[0].Rows[i].CategoryName; // 显示节点值 /* 添加子节点 */ li.appendChild( img ); li.appendChild( a ); ul.appendChild( li ); // 将子节点添加到ul中 } else // 表示该节点无子节点 { // 创建节点 var li = document.createElement( "LI" ); li.id = "li_" + ds.Tables[0].Rows[i].CategoryID; li.className = "Child"; // 表示该节点为子节点 // 创建节点前的图片 var img = document.createElement( "IMG" ); img.src = ""; img.alt = ds.Tables[0].Rows[i].CategoryName; // 创建超联接 var a = document.createElement( "A" ); a.href = "javascript:ShowMsg(this)"; a.innerHTML = ds.Tables[0].Rows[i].CategoryName; // 显示节点值 /* 添加子节点 */ li.appendChild( img ); li.appendChild( a ); ul.appendChild( li ); // 将子节点添加到ul中 } } // End Of for ( var i = 0; i < ds.Tables[0].Rows.length; i++ ) switchNode( false ); // 隐藏 "请稍候，正在加载......" // 将从数据库中获得的子节点添加到用户点击的父节点中 li_ClickingNode.appendChild( ul ); }// End Of if ( ds != null && typeof(ds) == "object" && ds.Tables[0] != null ) } /* 添加根节点 */ function showRootNode() { li_ClickingNode = document.getElementById("Category"); DynamicTree.GetSubCategoryS( 0, GetSubCategory_CallBack ); } function ShowMsg( objA ) { alert( "子节点" ); } </script></head><body onload="showRootNode()"> <form id="form1" runat="server"> <div id="Category"> <h4>DynamicTreeDemo</h4> <ul id="CategoryTree"> <%--<li id="li_1" class="Closed"> <img src="" alt="我的文档" onclick="ExpandCategory( this )" /> <a href="javascript:void(0)"> 我的文档 </a> </li>--%> </ul> </div> </form> </body></html> 服务器端代码:DynamicTree.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;using System.Data.Sql;using System.Data.SqlClient; public partial class DynamicTree : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { AjaxPro.Utility.RegisterTypeForAjax(typeof(DynamicTree)); } [AjaxPro.AjaxMethod] public string test(int nGategoryID) { return "abc" + nGategoryID.ToString(); } [AjaxPro.AjaxMethod] public DataSet GetSubCategoryS(int nGategoryID) { SqlConnection sqlCon = new SqlConnection("Server=127.0.0.1; uid=sa; pwd=sa; database=pubs"); SqlCommand sqlCmd = new SqlCommand(); SqlDataAdapter sqlDA = new SqlDataAdapter(); DataSet objDS = new DataSet(); string strSQL = ""; strSQL = "Select CategoryID, CategoryName, FatherID, dbo.isLeaf(CategoryID) As hasChild "; strSQL += "From Tree Where FatherID = " + nGategoryID; sqlCmd.CommandText = strSQL; sqlCmd.Connection = sqlCon; sqlDA.SelectCommand = sqlCmd; try { sqlCon.Open(); sqlDA.Fill(objDS, "Tree"); return objDS; } catch (Exception ex) { Response.Write(ex.Message); return objDS; } finally { sqlCon.Close(); } } } CSS代码:Tree.css a{ text-decoration:none }a,a:visited{ color:#000000; background:inherit; }body{ margin:0; padding:20px; font:12px tahoma, 宋体, sans-serif; } h4{ margin:0; padding:0; font-size:18px; text-align:center; }img{ cursor:hand; } #Category{ float:left; width:250px; border:1px solid #99BEEF;; background:#D2E4FC; color:inherit; margin:3px; padding:3px;} #Category ul{ margin:0 0 0 10px; padding:2px 0 0 0; list-style:none; }#Category li{ margin:0 0 0 10px; padding:2px 0 0 0; } #Category .Opened{ }#Category .Closed{ }#Category .Child { } #Category .Closed ul{ display:none; } #Category .Opened img{ background:url(Image/Opened.gif); background-repeat:no-repeat; width:16px; height:16px; }#Category .Closed img{ background:url(Image/Closed.gif); background-repeat:no-repeat; width:16px; height:16px; }#Category .Child img{ background:url(Image/Child.gif); background-repeat:no-repeat; width:16px; height:16px; cursor:default; }

博客介绍

正文

[Ajax].NET+Ajax.Pro实现无刷新动态树2007-03-01 10:53:00

评论