A Basic Ajax Content Management Framework
On my one project, which I just took control of, tracks documents that the webmaster is placing into a folder so it can be linked to multiple records in the table in such. That part is not important, but I thought I would tell you where I thought of this. As I was coding the checking to see if a file exists I was like man, Ajax could be the missing link to those web content management tools out there. You have a site builder like on Brinkster or any of the other free hosts. I was always annoyed by how slow they were to react when navigating since it always had to do the full page refresh to get the documents and such. If you had to go 10 files deep in the tree, I needed a beer and a bag of pretzels waiting for it to happen.
So I just made a quick vb.net project that is not fancy. It is a basic framework for you to be able to navigate through a directory on my web server and look at the files. The code is a basic starting point for anyone that wants to create a way for a user to look for files on the servewr. I see a lot of people saying that they want a file input to be able to search the server. With this code, you can create it. If I had more time, I would create a look like file browser, but I am busy with the book! If anyone out there does it, send me an email and I will post a link on my blog to it.
Now, you really need to address security here since you are allowing people to access the folder structure on the server! I did a very(infite+1) small check that I am sure could be bypassed. If anyone has some good ideas on security for this, lets us know!
The code here does three things:
- Creates a Breadcrumb Navigation
- Lists the Folders
- Lists the Files
The Client Side Code
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="testAj.aspx.vb" Inherits="datagrid.testAj"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>testAj</title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<style> #Nav{ display: block; float: left; background: #ffffff; font-size: 15px; width: 50%}
#Nav ul{ list-style-type: none; margin: 0px; padding: 0px; }
#Nav ul li{ display : block; width: 100%; border: 1px solid black;}
#Nav ul li a{ color: #000000; text-decoration : none; width: 100%; display: block; padding: 4px; }
#Nav ul li a:hover{ background-color: #CCCCFF; }
#Nav #folders { background-color: #E7E7FF; }
#Nav #files { background-color: #CECECE; }
#Bread{font-size:16px; font-weight: bold;}
#Bread a{ color: #0000FF; text-decoration : underline;}
#Bread a:hover{ color: #000000;}
</style>
<script>
var reqXML;
function LoadXMLDoc(url,strAction,strURL){
if (window.XMLHttpRequest){
reqXML = new XMLHttpRequest();
}
else if(window.ActiveXObject){
reqXML = new ActiveXObject("Microsoft.XMLHTTP");
}
if(reqXML){
reqXML.onreadystatechange = function(){BuildXMLResults(strAction);}
reqXML.open("POST", url, true);
reqXML.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
reqXML.send("q=" + strAction + "&f=" + strURL);
}
else{
alert("Your browser does not support Ajax");
}
}
var winPop=false;
function BuildXMLResults(strOutMethod){
if(reqXML.readyState == 4){
if(reqXML.status == 200){
var strText = reqXML.responseText;
if(strOutMethod=="file"){
if(winPop)winPop.close();
winPop = window.open("about:blank","winPop","toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=300,height=300");
winPop.document.write("<html><head><title>Preview</title></head><body><pre>");
winPop.document.write(strText);
winPop.document.write("</pre></body></html>");
winPop.document.close();
winPop.focus();
}
else{
document.getElementById("Nav").innerHTML = strText;
}
}
else{
alert("There was a problem retrieving the XML data:\n" + reqXML.statusText);
}
}
}
</script>
</HEAD>
<body onload="LoadXMLDoc('contentManagement.aspx','folder','DEFAULT')">
<form id="Form1" method="post" runat="server">
<span id="Nav"></span>
</form>
</body>
</HTML>
contentManagement.aspx
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="contentManagement.aspx.vb" Inherits="datagrid.redirect"%>
contentManagement.aspx.vb
Imports System.IO
Imports System.Text
Public Class contentManagement
Inherits System.Web.UI.Page
#Region " Web Form Designer Generated Code "
'This call is required by the Web Form Designer.
Private Sub InitializeComponent()
End Sub
'NOTE: The following placeholder declaration is required by the Web Form Designer.
'Do not delete or move it.
Private designerPlaceholderDeclaration As System.Object
Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
'CODEGEN: This method call is required by the Web Form Designer
'Do not modify it using the code editor.
InitializeComponent()
End Sub
#End Region
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
'Grab the passed values
Dim strAction As String = Request.Form("q")
Dim strPath As String = Request.Form("f")
'Set some default settings
Dim strOrgPath As String = "C:/Inetpub/wwwroot/datagrid"
Dim strDefaultDisplay As String = "Main"
'See if we should use the default
If strPath.ToUpper = "DEFAULT" Then
strPath = strOrgPath
End If
'Check to make sure someone is not trying to get somewhere else
If strPath.IndexOf(strOrgPath) <> 0 Then
Response.Write("<h1>Invalid Command</h1>")
Exit Sub
End If
'See if we are looking for a folder or a file
If strAction = "folder" Then
'Grab all of the folders
Dim strOut As StringBuilder = New StringBuilder("<h3<Folders:>/h3><ul id='folders'>")
Dim sFile As String
Dim oDirectory As Directory
For Each sFile In oDirectory.GetDirectories(strPath)
Dim sName() As String = sFile.Split("\\")
sFile = sFile.Replace("\", "/")
strOut.Append("<li><a href='javascript:LoadXMLDoc(""redirect.aspx"",""folder"",""" & sFile & """)'>" & sName(sName.Length - 1) & "</a></li>")
Next
strOut.Append("</ul><br/>")
'Grab all of the files
strOut.Append("<h3>Files:</h3>")
strOut.Append("<ul id='files'>")
For Each sFile In oDirectory.GetFiles(strPath)
Dim sName() As String = sFile.Split("\\")
sFile = sFile.Replace("\", "/")
strOut.Append("<li><a href='javascript:LoadXMLDoc(""redirect.aspx"",""file"",""" & sFile & """)'>" & sName(sName.Length - 1) & "</a></li>")
Next
strOut.Append("</ul>")
Dim strBread As StringBuilder = New StringBuilder("<div id='Bread'>")
strPath = strPath.Replace("\", "/").Replace(strOrgPath, "")
Dim strParts() As String = strPath.Split("/")
Dim str As String
Dim strBuildLink As StringBuilder = New StringBuilder(strOrgPath)
Dim bFirst As Boolean = False
For Each str In strParts
If bFirst = False Then
strBread.Append("<a href='javascript:LoadXMLDoc(""redirect.aspx"",""folder"",""DEFAULT"")'>" & strDefaultDisplay & "</a>/")
bFirst = True
Else
strBuildLink.Append("/" & str)
strBread.Append("<a href='javascript:LoadXMLDoc(""redirect.aspx"",""folder"",""" & strBuildLink.ToString & """)'>" & str & "</a>/")
End If
Next
strBread.Append("</div>")
strBread.Append(strOut)
Response.Write(strBread.ToString)
Else
strPath = strPath.Replace(strOrgPath & "/", "")
Dim a As String = "a"
Response.Redirect(strPath)
End If
End Sub
End Class
And A screen shot:
Hope this helps you out!
Eric Pascarello
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for Dynamic Web Pages
Co-Author of: Ajax in Action