建立对需求的TreeView使用AJAX
{S0}简介
AJAX的异步JavaScript和XML，是一个免费的框架，用于快速创建一个跨所有最流行的的浏览器的工作更有效，更具交互性，高度个性化的Web体验的新一代。 AJAX是一个相对较新的现象，是不是很新的技术为基础，创建的方式，为企业在互联网上与客户进行互动，。
在这篇文章中，我们使用目前的Ajax技术（在其最简单的方法）来实现对需求的树视图。由于XML是一个通用的标准，易于实现，我在我的示例应用程序，而不是数据库中使用XML。我发现这里的另一篇文章，以建立一个{A}使用AJAX。历史（跳过，如果你感觉无聊本节）
介绍了这项技术首先由微软（我所知）早在1999年，并已作为quot; DHTML / JavaScript的Web应用程序与远程callsquot;该技术的整体思路是允许一个互联网浏览器向远程页面/服务作异步的HTTP调用和更新当前网页收到的结果，而无需刷新整个页面。在创作者的意见，这应该有改善客户体验，使得HTTP页面外观和感觉非常类似于Windows应用程序。
，由于这项技术的核心实现是基于互联网浏览器的功能，实用性当时是非常有限的。几年后，该技术是脱胎换骨这样的巨头，像Google，Amazon.com，eBay等新的浏览器支持和大规模实施
今天，它被称为AJAX，被视为一个自然的一部分，任何先进的用户体验的动态网页。许多现成的框架，也可像
的互联网。为什么Ajax
这个示例应用程序提供了一个从XML文件中的树视图的实现。在真实的情景，我已经注意到，建设完整的树结构（与许多水平儿童）和渲染的浏览器需要相当长的时间处理。我尝试不同的方法，其中之一是建设需求树。但我不喜欢后（我相信你太）。后来我发现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>
异步请求的核心功能是://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','');">
客户端跨度将调用下面的函数来调用服务器的请求:/***********************************************************
//Builds the query string and invoke a request to the server
//using javascript async call
/***********************************************************/
function showContentsEx(div, str, lmsg){ ...
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>");
} ...
<add key="XmlTree" value=" /TreeSource.XML" />
为方便起见，我只把需要的代码，因为我想分享的实施;可以自定义此或加强它在您的项目。结论
本文旨在说明在任何ASP.NET应用程序中使用AJAX技术的简单性。它的开发者要使用这样的技术。我只是做了一个实际执行的技术，因为核心代码已经到位。我已经测试在微软的Visual Studio五.7 / MDE的2003和MS的应用。NET框架1.1。和C＃ - ASP.NET。
积分
与上帝的帮助下，我提交这篇文章在这里。我想感谢Codeproject.com社会和一些其他的信息网站，提供了极大的服务。我还要感谢我的同事和朋友的支持，合作，并审阅了本文。
您可以下载文件，我希望它是一个完全的工作之一。大多数读者（我是其中之一）想开始一个很好的样本。我尝试我最好的事业。我希望你会喜欢这个简单的实现。| AJFK