AjaxPro.NET框架生成高效率的Tree(Asp.net2.0)(示例代码下载)

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

(一). 说明
        用Tree显示菜单及物品列表(从服务端获取数据)比较方便, 当前显示Tree 主要有两种方式:
        1. 在Tree初始化时将数据全部一次性从服务端获取, 获取完数据后页面展开或收缩时就不再需要获取数据,这样, 获取完数据使用时效率比较高, 但当树节点很多时, 在每次初始化时会有较大的延迟.
        2. 初始化时只加载展开的节点, 当用户需要查看某个节点下的数据时, 再去取数据, 这样, 初始化时延迟会相对减少, 但每次单击节点时要获取数据, 页面每次都要刷新, 所以也会产生延迟.
        此事例用Ajax实现第二种方式, 每次只动态加载要展开的节点数据(闭合节点不展开时,则不获取其子节点的数据), 另外加载节点时页面不会刷新.

(二). 运行示例图

(三). AjaxPro.NET简介

首先对AjaxPro.NET作一下介绍, AjaxPro.NET是一个优秀的Ajax框架, 在实际应用中只要添加其DLL引用并进行简单的配置, 即可以非常方便的在客户端直接调用服务端方法, 来获取Tree节点.

(四).使用AjaxPro.NET预配置

1. 添加 AjaxPro.dll 文件的引用(示例代码中已经包含,直接COPY过来使用即可).
2. 在Web.config文件中添加以下配置.

3. 在要使用AjaxPro.NET框架的页面 *.aspx.cs 的 Page_Load事件中加如下代码:

AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default));

4. 经过以上三步骤后, 只要在后台服务端的方法前面增加属性[AjaxMethod]后:

[AjaxMethod()] // or [AjaxPro.AjaxMethod]
public ArrayList GetSearchItems( string strQuery )

就可以在客户端直接使用服务端方法, 非常方便, 客户端调用后台代码如下:

var returnValue = 后台代码类名.GetSearchItems(参数);

(五). 代码

1. 页面 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="424px" Width="251px">
             <div id="CategoryTree" class="TreeMenu"></div>
         </asp:Panel>
         <script language="jscript">
             var tree = document.getElementById("CategoryTree");
             var root = document.createElement("li");
             root.id = "li_0";
             tree.appendChild( root );
             ExpandSubCategory( 0 );
             function ExpandSubCategory( categoryID )

2. 页面后台文件 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
}

(六). 示例代码下载:
http://www.cnitblog.com/Files/ChengKing/AjaxPro.net_EfficientTree.rar