该博客介绍如何利用C#、XML、XSL和JavaScript技术，在Web环境下构建一个类似于Windows资源管理器的应用程序。通过结合这些技术，实现了动态数据展示和交互功能。
小弟最近用C#写了一个ASP.NET小应用,使用了一些XML和XSL技术,
本应用主要是用ASP.NET应用来模拟一个Windows资源管理器
一个窗体左边为动态加载的文件夹树状列表,而右边能查看某些类型的文件的内容
本应用主要是用ASP.NET应用来模拟一个Windows资源管理器
一个窗体左边为动态加载的文件夹树状列表,而右边能查看某些类型的文件的内容
本网战使用了一些图片,请在相册中查找
站点主页 index.htm 内容
<html> <head> <TITLE>基于Web的文件查看器</TITLE> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <frameset cols="237,767" rows="*"> <frame src="treeview.aspx"> <frame name="frameview" src="说明.txt"> </frameset> <noframes> <body bgcolor="#FFFFFF" text="#000000"> </body> </noframes> </html>文件 说明.txt 内容
基于Web 的文件浏览查看器
本系统为一个ASP.NET应用程序,使用C#语言开发
本系统在一个浏览器/服务器模式下模仿Windows资源管理器的文件系统树状列表
并提供一定类型的文件的查看功能
本系统不是数据库应用系统,因此不需要配置任何数据库
将所有的文件拷贝到一个Web服务器上的某个虚拟目录即可运行
但服务器必须安装 IIS 及 Microsoft .NET Framwork 1.1简体中文版
本系统默认根目录为 D:/ ,但可以在系统运行时修改根目录,也可进入fileview.aspx.cs
中第19行修改默认根目录然后重新编译即可
本系统主页面为 index.htm
本系统为一个ASP.NET应用,因此该程序运行在 ASPNET 用户帐号下,该帐号权限一般比较低
因此若本系统不能查看某个文件目录,此时需要进入相关的系统管理工具设置ASPNET的权限
客户端建议安装 IE6.0及其以上版本
************** 版权声明 *****************************************************
你可以任意参考修改和引用所有的代码,可将所有的代码
不受限制的使用于任意性质的系统中.
但在使用时请尊重知识产权,修改的时候望手下留情,
请不要窜改或删除可怜巴巴这么一点的知识产权声明
以尊重漫漫长夜辛苦敲键盘的人们的劳动成果
南京 袁永福 2004-8-8
yyf9989@hotmail.com
*************** 文件列表 ****************************************************
bmp.bmp gif.bmp htm.bmp html.bmp
jpeg.bmp jpg.bmp txt.bmp new.bmp
用于在树状列表中表示文件类型的图标BMP文件,其中文件名就是
适于该图标的文件的扩展名,默认为 new.bmp
你可以自己添加相应的文件类型的BMP, 所有的这些BMP大小都是 16*16象素
child.gif close.bmp collapse.gif expend.gif
open.bmp line.gif lastchild.gif
用于在树状列表中表现树状结构的图片
index.htm 系统主页面,为一个分为左右两个框架的静态HTML页面
fileview.aspx 用于获得文件列表信息及文件信息和内容的ASP.NET页面
treeview.aspx 用于维护树状列表的ASP.NET页面
htmlcontent.xml 为一个XSLT文档,用于根据文件信息来生成显示该文件内容的HTML代码
文件 treeview.aspx 内容
<%@ Page language="c#" AutoEventWireup="false" Inherits="fileview.treeview" %>
<!-----------------------------------------------------------------------------
基于Web的文件查看器之文件树状列表
本页面综合使用了 ASP.NET , XML ,XSLT 和 DHTML技术
本页面用于维护一个文件树状列表,该树状列表模仿了Windows资源管理器的文件树状列表
你可以任意参考修改和引用所有的代码,可将所有的代码不受限制的使用于任意性质的系统中.
但在使用时请尊重知识产权,修改的时候望手下留情,
请不要窜改或删除可怜巴巴这么一点的知识产权声明
南京 袁永福 2004-8-8
yyf9989@hotmail.com
------------------------------------------------------------------------------>
<%
string strPath = this.Request.Form["baseurl"] ;
if(strPath == null || strPath.Trim().Length == 0 )
strPath = fileview.FileView.BasePath ; // 显示当前根目录
strPath = strPath.Trim();
if(strPath.EndsWith("//")==false)
strPath = strPath + "//";
if(System.IO.Directory.Exists(strPath))
fileview.FileView.BasePath = strPath ;
%>
<HTML>
<HEAD>
<title>动态的XML树状列表</title>
<style>
body{ font-family: "宋体"; font-size: 12px}
.TreeNode { FONT-SIZE: 12px; CURSOR: hand }
.FocusNode { BORDER-RIGHT: #ff0000 1px solid;
BORDER-TOP: #ff0000 1px solid; FONT-SIZE: 12px; MARGIN-BOTTOM: -2px;
BORDER-LEFT: #ff0000 1px solid; CURSOR: hand; COLOR: #ffffff;
BORDER-BOTTOM: #ff0000 1px solid; BACKGROUND-COLOR: #000099; TEXT-ALIGN: left }
</style>
</HEAD>
<body leftmargin="1" topmargin="1">
<form id="Form1" method="post">
<div>
<span id="maintree" childlist="fileview.aspx?type=list">根节点
<input type="text" name="baseurl" style="width:72" value="<%= strPath%>" />
<input type="submit" value="刷新" /></span>
</div>
</form>
<!--
XML数据岛,在此定义用于进行匹配的XSLT文档,
该XSLT文档用于支持动态的生成树状列表
-->
<xml id="treexsl">
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="xml" />
<xsl:template match="/*">
<xsl:variable name="baseurl">
<xsl:value-of select="@baseurl" />
</xsl:variable>
<table border="0" width="100%" cellspacing="0" cellpadding="0" id="createdtable">
<xsl:for-each select="*">
<!-- 树状列表是按照节点文本进行排序的 -->
<xsl:sort select="concat(@file , @text)" />
<!-- 计算当前节点的代号 -->
<xsl:variable name="nodeid">
<xsl:choose>
<xsl:when test="@id!=''">
<xsl:value-of select="concat('ID' , @id)" />
</xsl:when>
<xsl:when test="boolean('true')">
<xsl:value-of select="translate(name(),'.','_')" />
</xsl:when>
</xsl:choose>
</xsl:variable>
<tr>
<td valign="top" align="left" width="16">
<xsl:choose>
<xsl:when test="@childlist != ''">
<xsl:if test="position()!=last()">
<xsl:attribute name="background">line.gif</xsl:attribute>
</xsl:if>
<img src="collapse.gif" expend="0">
<xsl:attribute name="id">
<xsl:value-of select="concat($nodeid,'expend')" />
</xsl:attribute>
<xsl:attribute name="onclick">ExpendNodeByID('<xsl:value-of select="$nodeid" />');</xsl:attribute>
</img>
</xsl:when>
<xsl:when test="boolean('true')">
<xsl:if test="position()!=last()">
<img src="child.gif" />
</xsl:if>
<xsl:if test="position()=last()">
<img src="lastchild.gif" />
</xsl:if>
</xsl:when>
</xsl:choose>
</td>
<td valign="top" nowrap="1">
<!--
用于生成树状列表的图标HTML代码
-->
<img align="absmiddle" οnclick="ExpendNode(this.nextSibling)" width="16" height="16">
<xsl:attribute name="id">
<xsl:value-of select="concat($nodeid,'icon')" />
</xsl:attribute>
<xsl:attribute name="src">
<xsl:choose>
<xsl:when test="@img!=''">
<xsl:value-of select="@img" />
</xsl:when>
<xsl:when test="@childlist != ''">close.bmp</xsl:when>
<xsl:when test="boolean('true')">default.bmp</xsl:when>
</xsl:choose>
</xsl:attribute>
</img>
<!-- 生成树状列表节点的文本 -->
<a class="TreeNode" valign="top" οnclick="ExpendNode(this)" target="frameview">
<xsl:attribute name="id">
<xsl:value-of select="$nodeid" />
</xsl:attribute>
<xsl:if test="@href != ''">
<xsl:attribute name="href">
<xsl:value-of select="concat($baseurl , @href)" />
</xsl:attribute>
</xsl:if>
<xsl:if test="@childlist!=''">
<xsl:attribute name="childlist">
<xsl:value-of select="@childlist" />
</xsl:attribute>
<xsl:attribute name="href">
<xsl:value-of select="concat($baseurl , @childlist)" />
</xsl:attribute>
</xsl:if>
<xsl:value-of select="concat( ' ' ,@text)" />
</a>
</td>
</tr>
</xsl:for-each>
</table>
</xsl:template>
</xsl:stylesheet>
</xml>
<script language="javascript">
<!--
var CurrentTreeNode ; // 定义树状列表的当前节点对象
var intIDCount = 1234; // 定义一个ID号初始值
var CurrentLoadingID = "";
// 初始化XSLT模板
var xslDoc = new ActiveXObject("MSXML.DOMDocument");
xslDoc.async = false;
xslDoc.load (treexsl.XMLDocument);
var resultDoc = new ActiveXObject("MSXML.DOMDocument");
resultDoc.onreadystatechange = XMLStateChange ;
resultDoc.async = true;
function XMLStateChange()
{
//window.status = resultDoc.readyState ;
if(resultDoc.readyState == 4 )
{
var objLabel = document.getElementById("loadflag" + intIDCount) ;
if(resultDoc.parseError.errorCode != 0)
objLabel.innerText = "加载错误:" + resultDoc.parseError.reason ;
else
{
var myObj = document.getElementById(CurrentLoadingID + "expend");// 获得节点的展开点图片对象
var myIcon = document.getElementById(CurrentLoadingID + "icon"); // 获得节点的图标图片对象
var MainObj = document.getElementById(CurrentLoadingID); // 获得节点的文本对象
var myTable ;
var strHTML = resultDoc.transformNode(xslDoc) ;
window.status = "加载完毕,正在生成子节点列表..." ;
MainObj.insertAdjacentHTML("afterEnd", strHTML );
MainObj.removeAttribute("childlist");
// 获得刚刚加载的子节点表格对象并进行初始化
myTable = document.getElementById("createdtable");
objLabel.style.display="none";
if(myTable != null)
{
myTable.style.display = "";
myTable.id = CurrentLoadingID + "table";
}
intIDCount ++ ;
//myTable.style.display="none";
if(myObj != null)
{
myTable.style.display="";
myObj.expend = "1";
myObj.src = "expend.gif";
myIcon.src = "open.bmp";
myIcon.align = "absmiddle";
}
window.status = "";
}
}
}
// 展开一个树状列表节点并设置为当前节点
function ExpendNode(obj)
{
if( CurrentTreeNode != obj && CurrentTreeNode != null)
{
CurrentTreeNode.className = "TreeNode";
}
CurrentTreeNode = obj;
CurrentTreeNode.className = "FocusNode";
window.status = obj.innerText ;
ExpendNodeByID(obj.id);
}
// 展开指定编号的树状列表的节点,若该节点的子节点未加载则加载之
function ExpendNodeByID(strID)
{
var myObj = document.getElementById(strID + "expend"); // 获得节点的展开点图片对象
var myIcon = document.getElementById(strID + "icon"); // 获得节点的图标图片对象
var MainObj = document.getElementById(strID); // 获得节点的文本对象
var myTable ;
myTable = document.getElementById(strID + "table"); // 获得子节点表格
if(MainObj != null && MainObj.childlist != null && myTable == null)
{
// 加载子节点
MainObj.insertAdjacentHTML("afterEnd",
最低0.47元/天 解锁文章
扫一扫
2645
到【灌水乐园】发言
