小弟最近用C#写了一个ASP.NET小应用,使用了一些XML和XSL技术,
本应用主要是用ASP.NET应用来模拟一个Windows资源管理器 一个窗体左边为动态加载的文件夹树状列表,而右边能查看某些类型的文件的内容 ![]() 本网战使用了一些图片,请在相册中查找
<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./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" onclick="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" onclick="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", "<div id=‘loadflag" + intIDCount + "‘> 正在加载子节点...</div>"); window.status = "正在加载 " + MainObj.innerText + " 的子节点..."; CurrentLoadingID = strID; resultDoc.load(MainObj.childlist); return ; } // 展开或收缩子节点 if(MainObj != null && myObj != null && myIcon != null && myTable != null ) { if(myObj.expend=="1") { myTable.style.display="none"; myObj.expend = "0"; myObj.src = "collapse.gif"; myIcon.src = "close.bmp"; myIcon.align = "absmiddle"; } else { myTable.style.display=""; myObj.expend = "1"; myObj.src = "expend.gif"; myIcon.src = "open.bmp"; myIcon.align = "absmiddle"; } window.status = "文件夹:" + MainObj.innerText + " 共有子节点 " + myTable.rows.length + " 个"; } } // 页面加载的时候加载根节点 ExpendNodeByID("maintree"); //document.getElementById("maintree").innerText = "根节点"; --> </script> </body> </HTML> 文件 fileview.aspx 该页面的HTML代码只有 <%@ Page language="c#" Codebehind="fileview.aspx.cs" AutoEventWireup="false" Inherits="fileview.FileView" %> 它的CS源代码为
文件 htmlcontent.xml 的内容 <?xml version="1.0" encoding="utf-8" ?> <xsl:stylesheet xmlns:xsl="http://www./1999/XSL/Transform" version="1.0"> <!-- 用于根据描述单个文件信息的XML文件进行处理,生成实际显示该文档的HTML页面代码 你可以任意参考修改和引用所有的代码,可将所有的代码不受限制的使用于任意性质的系统中. 但在使用时请尊重知识产权,修改的时候望手下留情, 请不要窜改或删除可怜巴巴这么一点的知识产权声明 南京 袁永福 2004-8-8 yyf9989@hotmail.com --> <xsl:output method="html" /> <xsl:template match="/*"> <xsl:choose> <xsl:when test="name(.) = ‘filelist‘ "> <html> <head> <title>文件列表</title> </head> <body leftmargin="1" topmargin="1"> <xsl:value-of select="concat(‘文件夹‘ , @text,‘ 的子项目列表 共‘,count(*),‘个子项目‘)" /> [<a href="fileview.aspx?viewtype=list">设置列表视图模式</a>] [<a href="fileview.aspx?viewtype=preview">设置预览视图模式</a>] <br /> <xsl:if test="@viewtype=‘preview‘"> <xsl:for-each select="*[@imgfile=‘1‘]"> <a> <xsl:attribute name="href"> <xsl:value-of select="@href" /> </xsl:attribute> <img> <xsl:attribute name="src"> <xsl:value-of select="concat(@href,‘&preview=1‘)" /> </xsl:attribute> <xsl:attribute name="alt"> <xsl:value-of select="@text" /> </xsl:attribute> </img> </a> </xsl:for-each> </xsl:if> <xsl:if test="@viewtype=‘list‘"> <table width="100%" cellspacing="0" rules="all" bordercolor="#CC0066" border="1" id="lvwTable" style="border-color:#CC0066;width:100%;border-collapse:collapse;Z-INDEX: 101; LEFT: 40px;font-family: 宋体; font-size: 12px"> <tr style="background-color:#CCCCFF;"> <td>文件名 </td> <td>大小</td> <td>类型</td> <td>修改时间</td> </tr> <xsl:for-each select="*"> <!-- 计算当前节点的代号 --> <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> <img id="Img1" align="absmiddle" width="16" height="16"> <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"> <xsl:if test="@href != ‘‘"> <xsl:attribute name="href"> <xsl:value-of select="@href" /> </xsl:attribute> </xsl:if> <xsl:value-of select="concat( ‘ ‘ ,@text)" /> </a> </td> <td> <xsl:value-of select="@size" /> </td> <td> <xsl:value-of select="@type" /> </td> <td> <xsl:value-of select="@accesstime" /> </td> </tr> </xsl:for-each> </table> </xsl:if> </body> </html> </xsl:when> <xsl:when test="@type=‘swf‘"> <!-- Flash 动画,需要调用Flash播放器 --> <html> <head></head> <body> <div> 本文档为一个Flash动画,将使用Falsh动画播放器播放 <br />请确认你的计算机系统安装了Flash动画播放器 </div> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"> <param name="movie"> <xsl:attribute name="value"> <xsl:value-of select="@url" /> </xsl:attribute> </param> <param name="quality" value="high" /> <embed quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash"> <xsl:attribute name="src"> <xsl:value-of select="@url" /> </xsl:attribute> </embed> </object> </body> </html> </xsl:when> <!-- 图片 --> <xsl:when test="@type=‘jpg‘ or @type=‘jpeg‘ or @type=‘bmp‘ or @type=‘png‘ or @type=‘gif‘ or @type=‘icon‘ or @type=‘ico‘ "> <html> <head></head> <body leftmargin="1" topmargin="1" bgcolor="#000000"> <div align="center"> <img border="1" align="center" style="border-color: #FF0000"> <xsl:attribute name="src"> <xsl:value-of select="@url" /> </xsl:attribute> </img> </div> </body> </html> </xsl:when> <!-- 视频或音频文档,需要调用Windows媒体播放器 以下代码在安装了Windows Media Player 9 的Windows2000系统上调试通过 --> <!--xsl:when test=" @type=‘mpg‘ or @type=‘mpge‘ or @type=‘mp3‘ or @type=‘avi‘ or @type=‘asf‘ or @type=‘wmv‘ or @type=‘mpga‘ or @type=‘wma‘ "--> <xsl:when test="@type!=‘‘ and contains(‘.cda.aif.aifc.aiff.asf.asx.wax.wm.wma.wmd.wmp.wmv.wmx.wpl.wvx.avi.wav.wmz.mpga.mpeg.mpg.m1v.mp2.mpa.mpemp2v.mpv2.mid.midi.rmi.au.mp3.m3u.vob‘, concat(‘.‘,@type))"> <html> <head></head> <body> <div> 当前文档为音频或视频文件,将使用Windows Media Player 来播放 <br />在此使用Windows Media Player 9来播放, <br />请确保你的计算机系统上安装了Windows Media Player 9 <br />目前支持的文件扩展名包括 <br /> .cda .aif .aifc .aiff .asf .asx .wax .wm .wma .wmd .wmp .wmv .wmx <br /> .wpl .wvx .avi .wav .wmz .mpga .mpeg .mpg .m1v .mp2 .mpa .mpemp2v <br /> .mpv2 .mid .midi .rmi .au .mp3 .m3u .vob </div> <object classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" id="WindowsMediaPlayer1" width="419" height="242"> <param name="URL"> <xsl:attribute name="value"> <xsl:value-of select="@url" /> </xsl:attribute> </param> </object> </body> </html> </xsl:when> <!--xsl:when test="@type=‘txt‘"> <html> <head> </head> <body> <pre id="txtpre"> <script language="vbscript"> dim txtdata set txtdata = CreateObject("Microsoft.XMLHTTP") txtdata.open "GET","<xsl:value-of select="@url" />" ,false txtdata.send "" alert txtdata.responsetext document.getElementById("txtpre").innerHTML = txtdata.responseText set txtdata = nothing </script> </pre> </body> </html> </xsl:when--> <!-- 对其他所有的文件使用javascript脚本进行页面重定向 --> <xsl:when test="boolean(‘true‘)"> <script language="javascript"> document.location = "<xsl:value-of select="@url" />" ; </script> </xsl:when> </xsl:choose> </xsl:template> </xsl:stylesheet> |
|