类似 MSDN CSDN 导航树效果 ASP.Net(C#) + JavaScript 实现!
测试站点:
http://www.triaton.com.cn/../dotnet/tree/WebFORM1.aspx
虽然号称 .Net 了!
但实际还是传统 CGI、ASP 的思想,没有使用Codebehind="WebFORM1.aspx.cs",仍然采取了 B/S 混合(HTML/C#)脚本的方式:
<%@ Page language="c#" Codebehind="WebFORM1.aspx.cs" AutoEventWireup="false" Inherits="WebApplication5.WebFORM1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebFORM1</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio 7.0">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="javascript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
</HEAD>
<body MS_POSITIONING="GridLayout">
<FORM id="FORM1" method="post" runat="server">
</FORM>
<FONT face="宋体"></FONT><iframe width="100%" height="100" id="hiddenframe"></iframe>
<script>
function ExpandNode(ParentNode,ParentId){
var NodeX = eval(ParentNode.id + '_0');
if (NodeX.style.display == 'none')
{
NodeX.style.display="block";
if (NodeX.loaded == 'no')
{
document.frames['hiddenframe'].location.replace("http://localhost/webservice/WebApplication5/WebFORM2.aspx?PID=" + ParentId + "&PNode=" + ParentNode.id);
NodeX.loaded = 'yes';
}
}
else
{
NodeX.style.display='none';
}
}
</script>
<CENTER>
<TABLE border="1" width="20%" height="60%">
<TR>
<TD>
<DIV style="OVERFLOW: auto;WIDTH: 100%;HEIGHT: 100%">
<TABLE width="300%">
<TR>
<TD>
<%
System.Data.OleDb.OleDbConnection oleDbConnection1 = new System.Data.OleDb.OleDbConnection();
oleDbConnection1.ConnectionString =@"Provider=SQLOLEDB.1;Persist Security Info=False;User ID=sa;Initial Catalog=Test;Data Source=TRIATON\PSQL2KE";
oleDbConnection1.ConnectionString =@"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + Server.MapPath("/dvbbs") + @"\Tree.mdb;Persist Security Info=False";
oleDbConnection1.Open();
System.Data.OleDb.OleDbCommand OleDbCommand1 = new System.Data.OleDb.OleDbCommand("select *,(select count(*) from tree where parentid = T.id) as children from tree T where rootid = id",oleDbConnection1) ;
System.Data.OleDb.OleDbDataReader OleDbDataReader1 = OleDbCommand1.ExecuteReader();
int i = 0;
while (OleDbDataReader1.Read())
{
%><div id='Node_<% = i %>'><a href='#'
<%if (System.Convert.ToInt64(OleDbDataReader1["children"])>0) {%>
onClick='ExpandNode(Node_<% = i %>,<% =OleDbDataReader1["id"] %>)'>+</a>
<%;}
else {%>
>-</a><% ;}%>
<a href='#'
<%if (System.Convert.ToInt64(OleDbDataReader1["children"])>0)
{%>
onDblClick='ExpandNode(Node_<% = i %>,<% =OleDbDataReader1["children"]%>)'
<%} %>
>
<% =OleDbDataReader1["children"]%></a>
</div>
<div id='Node_<% = i %>_0' style='display: none' loaded='no'>
正在加载 ...
</div>
<%
i++;
}
%>
</TD>
</TD>
</TR>
</TABLE>
</DIV></TD></TR></TABLE>
</CENTER>
</body>
</HTML>
<%@ Page language="c#" Codebehind="WebFORM2.aspx.cs" AutoEventWireup="false" Inherits="WebApplication5.WebFORM2" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebFORM2</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio 7.0">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="javascript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
</HEAD>
<body MS_POSITIONING="GridLayout">
<FORM id="WebFORM2" method="post" runat="server">
<FONT face="宋体"></FONT>
</FORM>
<%
string ParentNode;
ParentNode = Request.QueryString["pnode"];
//Response.Write(ParentNode.Replace("_",""));
int i;
int j;
string nSpace="";
j= ParentNode.Length - ParentNode.Replace("_","").Length;
for (i=0;i<j;i++)
nSpace = nSpace + " ";
string sHTML ="";
i=0;
System.Data.OleDb.OleDbConnection oleDbConnection1 = new System.Data.OleDb.OleDbConnection();
oleDbConnection1.ConnectionString =@"Provider=SQLOLEDB.1;Persist Security Info=False;User ID=sa;Initial Catalog=Test;Data Source=TRIATON\PSQL2KE";
oleDbConnection1.ConnectionString =@"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + Server.MapPath("/dvbbs") + @"\Tree.mdb;Persist Security Info=False";
oleDbConnection1.Open();
System.Data.OleDb.OleDbCommand OleDbCommand1 = new System.Data.OleDb.OleDbCommand("select *,(select count(*) from tree where parentid =T.id ) as Children from tree T where parentid = " + Request.QueryString["PID"],oleDbConnection1) ;
System.Data.OleDb.OleDbDataReader OleDbDataReader1 = OleDbCommand1.ExecuteReader();
while (OleDbDataReader1.Read())
{
sHTML = sHTML + "<div id='" + ParentNode + "_" + (i + 1).ToString() + "'>" + nSpace + "<a href='#'";
if (System.Convert.ToInt64(OleDbDataReader1["children"])>0)
sHTML = sHTML + " onClick='ExpandNode(" + ParentNode + "_" + (i + 1).ToString() + "," + OleDbDataReader1["id"] + ")'>+";
else
sHTML = sHTML + ">-";
sHTML = sHTML + "</a>\\n" + "<a href='#'";
if (System.Convert.ToInt64(OleDbDataReader1["children"])>0)
sHTML = sHTML + " onDblClick='ExpandNode(" + ParentNode + "_" + (i + 1).ToString() + "," + OleDbDataReader1["id"] + ")'";
sHTML = sHTML + ">" + OleDbDataReader1["id"] + ": " + OleDbDataReader1["remark"] + "</a></div>";
if (System.Convert.ToInt64(OleDbDataReader1["children"])>0)
sHTML = sHTML + "<div id='" + ParentNode + "_" + (i + 1).ToString() + "_0' style='display: none' loaded='no'>" + nSpace + " 正在加载 ...</div>";
i++;
}
Response.Write(sHTML);
%>
<script>
var x = eval('parent.' + '<% =Request.QueryString["pnode"] + "_0"%>' ) ;
x.innerHTML="<% =sHTML %>";
</script>
</body>
</HTML>
