Designing the Interface and More for an Online E-Mail System in ASP.NET 2.0 - Check Your Mailbox List
(Page 3 of 5 )
To see the mailbox list, we use three pages: Main.aspx, LeftTree.aspx, and MailDesktop.aspx, respectively, which concretely contain the following functions:
Display the mailboxes in tree-like form;
Display the mailboxes in table-like form;
Provide the hyperlink to rename a mailbox;
Provide the hyperlink to check the e-mails in a mailbox;
Provide the hyperlink to create a new mailbox; and
Delete a mailbox.
As the main page of the whole online e-mail system, the Main.aspx page is composed of two HTML frame elements (i.e. <frame>) named Left (used for loading the LeftTree.aspx page) and Desktop (used for loading the MailDesktop.aspx page) respectively. The following gives you the crucial HTML code related to this:
<frameset id="Frame" cols="180,*" rows="*" border="0" framespacing="0">
<frame name="Left" src="LeftTree.aspx" scrolling="no" frameborder="0" noresize="true">
<frame name="Desktop" src="MailDesktop.aspx" scrolling="auto" frameborder="0">
</frameset>
And Figure 6 illustrates the run-time snapshot of the main.aspx page (called by the index.aspx page) in Microsoft IE:
Figure 6-the run-time snapshot of the main page of the online e-mail system
The LeftTree.aspx page is responsible for showing the mailboxes in a TreeView control corresponding to the left part in Figure 6. When initialized, the Page_Load function invokes a helper function named InitOperationTree to bind the data to the OperationView control (i.e. the TreeView control in Figure 6):
protected void Page_Load(object sender, EventArgs e) {
if(!Page.IsPostBack)
{ ///initialize the operation tree
InitOperationTree();
}
}
private void InitOperationTree()
{ ///obtain data
IFolder folder = new Folder();
SqlDataReader dr = folder.GetFolders();
///fine the mail folder node
TreeNode mailFolderNode = OperationView.FindNode("-1/0");
if(mailFolderNode == null) { return; }
///add the mail folder
while(dr.Read())
{ ///create the node
TreeNode node = new TreeNode();
node.NavigateUrl = "~/ViewMail.aspx?FolderID=" + dr["FolderID"].ToString();
node.Target = "Desktop";
node.Text = dr["Name"].ToString();
node.Value = dr["FolderID"].ToString();
mailFolderNode.ChildNodes.Add(node);
}
dr.Close();
}
In the helper function InitOperationTree above, we first call the GetFolders method of the Folder class to obtain the required dataset, then find the mail folder node, and finally add the folder information from the dataset onto the TreeView control through a typical while loop. Note that when we create the tree node, we set up the hyperlink to the related folder in the ViewMail.aspx page.
With regard to viewing the mail list, this is accomplished through the MailDesktop.aspx page (which corresponds to the right part of Figure 6) whose design-time snapshot in shown in Figure 7 below.
Figure 7-the design-time snapshot of page MailDesktop.aspx
This page is rather simple, with merely a GridView (named FolderView, used to display the mailboxes) and a Button (named NewFolderBtn, used to add new mailbox hyperlink) on it. When the MailDesktop.aspx page initializes, we bind data to the FolderView control (i.e. show the information in the specified mailbox). Since this code is quite similar to that of the LeftTree.aspx page, we omit it. When you click on the NewFolderBtn button, you will be directed to another page, namely NewFolder.aspx, to create the required mailbox hyperlink.
Response.Redirect("~/NewFolder.aspx");
Next: Check the E-mails in Your Mailbox >>
More ASP.NET Articles
More By Xianzhong Zhu
/ 5 
