65.9K
CodeProject 正在变化。 阅读更多。
Home

按需构建 TreeView（使用 AJAX）

AJFK
starIconstarIconstarIcon
emptyStarIcon
starIcon
emptyStarIcon

3.19/5 (11投票s)

2006年11月22日

CPOL

4分钟阅读

viewsIcon

100111

downloadIcon

1116

一个使用 XML、ASP.NET 和 C# 生成 TreeView 的简单 AJAX 实现。

Sample Image - ajaxtreeview.gif

引言

AJAX，即异步 JavaScript 和 XML，是一个免费的框架，可用于快速创建新一代更高效、更具交互性、高度个性化的 Web 体验，并能在所有最流行的浏览器中运行。AJAX 是一个相对较新的现象，基于并非全新的技术，旨在为企业提供一种与客户在互联网上互动的方式。

在本文中，我们使用当前的 AJAX 技术（以最简单的方式）来实现一个按需 TreeView。由于 XML 是一种通用标准且易于实现，因此我在我的示例应用程序中使用了 XML 而不是数据库。我在网上找到了另一篇关于使用 AJAX 构建 TreeView 的文章。

历史（如果您感到无聊，请跳过此部分）

据我所知，这项技术最初由微软于 1999 年推出，当时被称为“DHTML / JavaScript Web 应用程序与远程调用”。这项技术的整个想法是允许 Internet 浏览器异步 HTTP 调用远程页面/服务，并使用接收到的结果更新当前 Web 页面，而无需刷新整个页面。创作者认为，这应该能改善客户体验，使 HTTP 页面看起来和感觉上与 Windows 应用程序非常相似。

由于这项技术的核心实现基于 Internet 浏览器功能，因此当时的可用性非常有限。几年后，随着新的浏览器支持以及 Google、Amazon.com、eBay 等巨头的广泛实施，这项技术得以重塑。

如今，它被称为 AJAX，并被认为是任何具有高级用户体验的动态 Web 页面的自然组成部分。网上也有许多现成的框架，例如 Microsoft AJAX/ATLAS 和 Enterprise AJAX。

为什么使用 AJAX

这个示例应用程序提供了一个从 XML 文件实现的 TreeView。在实际场景中，我注意到构建完整的树结构（具有多级子节点）并将其渲染到浏览器需要很长时间。我尝试了不同的方法，其中一种是按需构建树。但我不喜欢回发（我确信您也一样）。然后我发现 AJAX 是最佳选择。通过这种方式，我们可以避免回发和浏览器闪烁；我们只是更改页面的一部分，从而减少服务器流量并提高性能。

工作

其思想是使用 UL 和 LI 标签构建树结构，并结合样式表和一些 JavaScript，所有这些共同产生一些真实的效果。在页面加载或预渲染事件时，将加载根节点；然后，通过单击加号/减号图像，您可以展开或折叠树。您可以注意到子节点是动态生成的（当然，您可以缓存数据源）。由于 AJAX 是异步的，我显示了一个图像来指示已经向服务器发出了请求。

实现

代码文件包括

  • TreeSource.XML：定义树结构的源文件。
    • <?xml version="1.0" encoding="utf-8" ?>
<Nodes>
  <Node NodeID="0" NodeName="World" ParentID="-1"></Node>
  <Node NodeID="1" NodeName="North America" ParentID="0"></Node>
<Node NodeID="13" NodeName="United States" ParentID="1"></Node>
  • AJAXroutine.js：JavaScript 文件，包含处理异步调用和标准 AJAX 方法所需的所有方法。正如您所见，JavaScript 是这项技术的核心组件。它负责更改检测、数据请求接收以及将数据放置在页面上。
    • //To toggle the node image and expand collapse
function Toggle(node){

  // Unfold the branch if it isn't visible
  if (node.nextSibling.style)   {           
        if (node.childNodes.length > 0)     {
              if (node.childNodes.item(0).nodeName == "IMG"){
         ...

异步请求的核心函数是

//The core function to get the xml http request object
function GetXmlHttpObject(){ 
  var objXMLHttp=null
  if (window.XMLHttpRequest){
        ...

HTML 将如下所示：

<ul id="treeUL" class="treeUL">
  <li id='10'>
  <span title='World' valign='bottom' 
    onclick="javascript:if (Toggle(this))showContentsEx('divTree0','0','');">

客户端 SPAN 将调用以下函数来调用服务器请求

/***********************************************************
//Builds the query string and invoke a request to the server 
//using javascript async call
/***********************************************************/
function showContentsEx(div, str, lmsg){ ...
  • WebForm1.aspx：示例 .aspx 文件。此示例中的根级别已硬编码。我添加了一些样式使其看起来不错。您可以动态构建该部分。
  • WebForm1.aspx.cs：.aspx 文件的代码隐藏。
  • GetTreeContents.aspx：设计模式下为空。
  • GetTreeContents.aspx.cs：所有客户端请求都处理此代码隐藏并在浏览器中呈现。当发出客户端 HTTP 请求时，以下脚本将在服务器上执行并在浏览器中呈现 HTML。
private void Page_Load(object sender, System.EventArgs e)
{           
    if (!IsPostBack)
    {
        //id passed thro' the url query string
        string key = Request.QueryString["q"]; 

        if (key != null)
        {
            //read the xml tree file from the web.config file 
            //add the following key in web.config
            //<appSettings>
            //<add key="XmlTree" value="~/TreeSource.XML" />
            String path = Server.MapPath(ConfigurationSettings.AppSettings["XmlTree"]);

            //I use XmlDocument object here to manipulate Xml- You can use other objects
            //You can cache the XmlDocument.OuterXml string
            XmlDocument xmlTree = new XmlDocument();
            xmlTree.Load(path);
            System.IO.StringReader xmlSR = new System.IO.StringReader(xmlTree.OuterXml);

            //If you want to use database driven tree you skip above codes
            //but the columns should be there in the data table
            DataSet ds = new DataSet();
            ds.ReadXml(xmlSR);
            DataView dv = ds.Tables[0].DefaultView;

            //filter for the parent
            dv.RowFilter = " ParentID = '" + key + "'";

            //render the brower with a <UL> tag and <LI> list
            //I have used some styles
            Response.Write ("<ul class='wTreeStyle'>"); 

            //write all the children here
            for(int i=0; i < dv.Count; i++)
            {     
                //formatted <LI> tag - 
                Response.Write (string.Format("<li id='{0}'><span valign='bottom' " + 
                      "title='{1}' onclick=\"javascript:if (Toggle(this))" + 
                      "showContentsEx('divTree{0}','{0}','');\"><IMG  " + 
                      "align='bottom' SRC='plus.gif'> <span class='treeStyleNode' >" + 
                      "{1}</span></span><span id ='divTree{0}'></span></li>", 
                      dv[i]["NodeID"].ToString(), dv[i]["NodeName"].ToString())); 
            }
            Response.Write ("</ul>"); 
        } ...
  • Images：Loading.gif, plus.gif, minus.gif
  • Web.config：用于密钥
<add key="XmlTree" value="~/TreeSource.XML" />

为了简单起见，我只包含必要的代码，因为我想分享实现；您可以在您的项目中自定义或增强它。

结论

本文旨在说明在任何 ASP.NET 应用程序中使用 AJAX 技术的简便性。是否以这种方式使用该技术取决于开发人员。我只是对该技术进行了实际实现，因为核心代码已经到位。我已在 MS Visual Studio V.7/ MDE 2003 和 MS .NET Framework 1.1 以及 C# - ASP.NET 中测试了该应用程序。

致谢

在神的帮助下，我将这篇文章提交到这里。我想感谢 Codeproject.com 社区和其他一些信息网站提供的优质服务。我还感谢我的同事和朋友们的支持、合作和审阅。

您可以下载这些文件，我希望它们是完全可用的。大多数读者（包括我）都希望有一个好的示例来开始。我已尽力为此目的付出努力。希望您喜欢这个简单的实现。

© . All rights reserved.