正文

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

【评论】 【打印】 【字体: 】 本文链接:http://blog.pfan.cn/fengfei/23571.html

分享到:

            昨天花了半天的时间搞的, 其中碰到一个很郁闷的错误, 就是我写完运行, 程序不能无刷新调用服务器端方法.   调了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; }

阅读(10158) | 评论(25)


版权声明:编程爱好者网站为此博客服务提供商,如本文牵涉到版权问题,编程爱好者网站不承担相关责任,如有版权问题请直接与本文作者联系解决。谢谢!

评论

loading...
您需要登录后才能评论,请 登录 或者 注册