Thursday, April 22, 2010

Directory Browser using Asp.Net

Notes - Functionality:
  1. RootDirectory default to web application physical directory, using RootDirecotry property you can change it to any destination if you want
  2. Directory browser lists all the child directories starting from RootDiectory as a treeview
  3. When you click on any listed directory in the treeview it does a postback and show the directory full path in the text box at the top
  4. At the initial state text box get the value of root direcotry
Notes - Implementation:
  1. I have implemented direcotory browser as a custom web control. Inheriting WebControl  class and INamingContainer interface.
  2. Default property of this custom web control is DirecotryBrowser
  3. Default property of the directory browser is RootDirecotry
  4. SelectedDirectoryName is the output property that you can consume
  5. In the initializaton phase, control calls CreateControlHeirarchy method to create its controls
  6. Inside CreateControlHeirarchy it calls a method call AddChildDirectories which accepts two parameters, TreeNode and DirectoryInfo
  7. AddChildDirectories method lists all the child directories inside a given directory and then its call itslef recursively to list direcotries of child directories of the given directory
  8. Finally RenderBeginTag, and RenderEndTag wrap the control with <div> tag as my design team always prefer to have div around custom controls over default <span> tag (you would inherit Panel to get rid of this problem but I didnt)
Directory browser : 4.0
    public class DirectoryBrowserField : WebField
        #region Events
        public event EventHandler SelectedDirectoryChanged;
        #region Attributes
        TextBox txtDirectoryName = new TextBox();
        TreeView treeView = new TreeView();
        PlaceHolder contentPlaceHodler = new PlaceHolder();
        string baseDirecotry = string.Empty;
        #region Properties
        public string RootDirectory { getset; }
        public string TextBoxCssClass { getset; }
        public string TreeViewCssClass { getset; }
        public string SelectedDirectoryName { getset; }
        public bool ShowFullPath { getset; }
        #region Constructors
        public DirectoryBrowserField()
        #region Methods
        private void Initialize()
            this.baseDirecotry = HttpContext.Current.Server.MapPath("~\\");
            this.SelectedDirectoryName = this.RootDirectory = 
            this.TextBoxCssClass = "TextBox";
            this.TreeViewCssClass = "TreeView";
            this.CssClass = this.GetType().Name;
            this.ShowFullPath = false;
        protected override void OnInit(EventArgs e)
        public void CreateControlHeirarchy()
                if (this.RootDirectory.StartsWith("~/"))
                    this.RootDirectory = 
                if (this.RootDirectory.StartsWith("/") || this.RootDirectory.StartsWith("\\"))
                    this.RootDirectory = 
                if (this.RootDirectory.StartsWith("~\\"))
                    this.RootDirectory = HttpContext.Current.Server.MapPath(this.RootDirectory);
            if (Directory.Exists(this.RootDirectory))
                this.txtDirectoryName.CssClass = this.TextBoxCssClass;
                this.SelectedDirectoryName = this.RootDirectory;
                this.txtDirectoryName.Text = this.ResolveDirecotry();
                treeView.CssClass = this.TreeViewCssClass;
                Panel panel = 
                    new Panel() { CssClass = string.Format("{0}Wrapper"this.TreeViewCssClass) };
                DirectoryInfo root =new DirectoryInfo(this.RootDirectory);
                TreeNode node = 
                    new TreeNode(string.Format(".\\{0}", root.Name), this.RootDirectory);
                this.AddChildDirectories(node, root);
                foreach (TreeNode n in node.ChildNodes) n.Collapse();
                treeView.SelectedNodeChanged += new EventHandler(SelectedNodeChanged);
                this.ChildControlsCreated = true;
        private void SelectedNodeChanged(object sender, EventArgs e)
            this.SelectedDirectoryName = this.treeView.SelectedNode.Value;
            this.txtDirectoryName.Text = this.ResolveDirecotry();
            if (this.SelectedDirectoryChanged != nullthis.SelectedDirectoryChanged(this, e);
        private void AddChildDirectories(TreeNode node, DirectoryInfo direcotry)
            foreach (DirectoryInfo child in direcotry.GetDirectories())
                TreeNode childNode = new TreeNode(child.Name, child.FullName);
                if (child.GetDirectories().Count() > 0)
                    this.AddChildDirectories(childNode, child);
        private string ResolveDirecotry()
            if (!this.ShowFullPath)
                return string.Format(".\\{0}",
                    this.SelectedDirectoryName.Replace(this.baseDirecotry, string.Empty));
            return this.RootDirectory;
        protected override void RenderContents(HtmlTextWriter writer)
            StringBuilder sb = new StringBuilder();
            HtmlTextWriter htw = new HtmlTextWriter(new StringWriter(sb));

Next steps
  1. Add a test page to your web project
  2. Add Register your control <%@ Register Assembly="Y" Namespace="X" TagPrefix="active" %>
  3. Utilise your control 
  4. <active:DirectoryBrowser runat="server" ID="dbSample" />
Using Direcotry Browser
        protected void Page_Load(object sender, EventArgs e)
            this.dbfBrowse.SelectedDirectoryChanged += new EventHandler(dbfBrowse_SelectedDirectoryChanged);
        void dbfBrowse_SelectedDirectoryChanged(object sender, EventArgs e)
            DirectoryInfo d = new DirectoryInfo(this.dbfBrowse.SelectedDirectoryName);
                foreach (FileInfo f in d.GetFiles())
                    string ext = f.Extension.ToLower();
                    if (ext.Equals("txt") || ext.Equals("doc") || ext.Equals("pdf"))
                        lbxFiles.Items.Add(new ListItem(Path.GetFileName(f.Name), f.Name));
        } Forums

No comments:

iPhone Launch Screen Sizes

iPhone Portrait iOS 8 Retina HT 5.5 = 1242 X 2208 Retna HD 4.7 = 750 X 1134 iPhone Landscape iOS 8 Retina HD 5.5  2208 X 1242 iPho...