New, reply, reply all and forward the e-mail

New, reply, reply all and forward e-mail functions are all achieved through the page New_Mail.aspx. There are many similar features between them.

First, we are going to look at the way the above functions start.

Listing 1: The four methods related JavaScript code

Obviously herein, for different functions, when the page New_Mail.aspx starts the incoming parameters are different. In addition to the "New E-mail" method, the other methods all contain two parameters. Here, the parameter act specifies the operation type, while the parameter id specifies the code of the e-mail to manipulate (previously stored in the hidden field HiddenField1).

Distinguish new, reply, reply all and forward operations

To distinguish the new, reply, reply all and forward e-mail operations, you may pay attention to the two points: 1, in the above client scripts, we use the method window.open to start the New_Mail.aspx page and pass different parameters; 2, there are also some differences in the behind-code file New_Mail.aspx.cs. Let's look into the related code, as follows:

Clearly, here also by identifying two different QueryString parameters we distinguish between new, reply, reply all and forward messages and other operations.

In addition, you can easily find that through the initial downloaded messages stored in the global variables defined in the file Global.asax, the message sender, recipient, message subject, and the original text content get related values, respectively.

Although this approach of using a large number of global variables is one of the options to solve the problem, but in the actual development (now, you must use the paid e-mail), these functions are all implemented by re-downloading messages to obtain related e-mail field values. For this, the source code also provides more practical coding which has been all commented up.

As for the helper method BuildOriginalMail(), its responsibility is easy to understand: grabbing previously-downloaded info to construct the contents of the original e-mail.

Develop an IntelliSense and AJAX-styled text box control

You may find that when you entered the recipient's e-mail address, we used an IntelliSense and AJAX-styled text box control.

As far as the above feature is mentioned, many friends may remember the well-known ASP.NET AJAX extender AutoCompleteExtender. Combined with simple Web service programming, you readers can easily achieve an AJAX styled text box control that supports automatically intelligent perception. However, in this case, the AJAX text box control that supports the IntelliSense support is a custom ASP.NET server control developed using ASP.NET asynchronous callback technology. Due to limited space, we select to omit the detailed explanation of this control (interested readers can refer to the attached source yourselves), but only concern about its basic usage.

The following gives the use of the custom ASP.NET server controls shTextBox related code (see file New_Mail.aspx):

Listing 2: Use the custom server control shTextBox in the HTML code

The HTML markup code above is easy to understand:

(1) Refer to the assembly TextBox.dll that defines the custom ASP.NET server control shTextBox and related namespace.

(2) Define the control shTextBox in the declarative mode. Note here through its DataSourceID property we specify its data source is SqlDataSource1.

(3) Define the data source control SqlDataSource and bind it to the above shTextBox control.

(4) The data source control SqlDataSource obtains the MailAddress field related values from the database table AddressBook through its ConnectionString and SelectCommand properties. And finally, via the control shTextBox, when users enter some letters the friendly tips will be given in IntelliSense mode.

In addition, when inputting the message body content, we also use the FreeTextBox control. In this way, a user can enter multi-format rich text data, even pictures.

Use the FreeTextBox control to enter the message body content

FreeTextBox is a free Asp.Net server control, widely used in Asp.Net news publishing systems and blog systems. Similar to Microsoft's desktop RTF control, FreeTextBox is very powerful, in which you can set font, color, insert images, set up hyperlinks, insert tables and other operations. Up to now, the latest version of the control version is 4.0 beta1. For the sake of security and stability, we set to use the 3.2.2.40658 version. The downloaded file is FTBv3-2-2.zip, with size 1.63MB. This version is also relatively simple to use. Compared with the previous versions, you do not need to do other extra work, but to copy the FreeTextBox.dll file under the Framework-3.5 directory to the bin directory of your Web application directory.

In our case, we use the FreeTextBox control to write the content of the message body. Detailed use about the FreeTextBox control, please refer to the next section - the process of sending messages.

Send e-mail

Whether it is creating new e-mail, replying, replying all, or forwarding, the ultimate step is all sending the message. In this section, we achieve sending e-mail through the method SendMail.

On the whole, the SendMail function performs the following operations and steps to succeed in sending the message out:

(1) Create two instance variables of the SmtpClient and MailMessage classes.

(2) Configure the mail server host address.

(3) Configure the contents of the message body as the value of the Text property of the FreeTextBox control, setting the message body encode mode to UTF8 and the format of the message body as HTML.

(4) Configure the mail sender address.

(5) Add the recipient address.

(6) Configure the message subject and encoding.

(7) Add e-mail attachments.

(8) Using the Web.config file, set the authentication configuration information.

(9) For gmail, establish the SSL security certificate.

(10) Set the port number to send the message.

(11) Send the message.

The complete code of the SendMail function to send the message is as follows:

Listing 3: The complete code of the SendMail function

If sending message is successful, then show the prompt "Mail sent succeeded!"; otherwise, display the appropriate failure or error message.

When the user clicks the button "Add Attachment", an upload file HTML button control is added, which is implemented through the JavaScript function addFile. We are to elide the related coding discussion – please study it yourselves.

Write-off and Delete Message Modules

First of all, we must make clear the relationship between writing off and deleting the message. In the case of this system, after the messages get downloaded from a remote mail server, we will not delete them on the server. However, when you click the "Delete" button, the messages on the remote mail server will be really removed. Do remember that this deletion has a prerequisite: you must first write off the target messages by clicking the "Write Off" button, as shown in Figure 1.

Figure 1: The Code column was marked with a "Cancelled" sign

Then, when the user clicks the "Delete" button, the mail with the "Canceled" sign will be completely removed from the remote mail server. Figure 2 indicates the related warning dialog.

Figure 2: The warning dialog prompting the user whether to really delete the messages

Next, we are to detail into the write-off and delete process.

Write off messages

Writing off the message is actually marking the mail with the sign "Cancelled" that is stored in the local database.

Here, let's look at the "Write Off" button corresponding coding, as follows:

Listing 4: The "Write Off" button related code

On the whole, the write-off process can be divided into two steps:

(1) Write off the specified messages in the local database (by calling the method DeleteLocalMessage).

(2) Refresh and display the message data in the local database again (through the helper method ShowData discussed previously).

By more detailed tracking, you will find that writing off the message from the database (through the CommonLib.RemarkSubject function) is, in essence, set the field "cancelled" in the database table MailDownloadTemp to 1 (i.e. true).

On the other hand, the key to refresh and display the message is to call the method CommonLib.BuildHtmlFromSubject to build a list of summary information to be displayed on the screen. Please note the following statement:

After the previous write-off operation, if the value of the field Cancelled is true, then the message summary information is displayed with the Code column set to "Canceled"; otherwise, show the normal number.

Next, we will discuss the programming logic to delete the message.

Remove messages

According to previous analysis, the premise of deleting mails from the remote mail server is first writing off the related messages.

Here, we are to look into the "Delete" button corresponding code, as follows:

Listing 5: The deleting message related operation

Overall, the removal process contains only two steps:

(1) Actually delete from the remote server the messages with a "Canceled" sign in the local database table.

(2) Trigger the button "Receive" related event to display the latest results.

Next, we will more specifically analyze the actual delete related function RemoveMarkedEmailsFromRemoteHost(). The general functions of this function can be divided into the following:

(1) Create an instance of the message receiving class OpenPOP.POP3.POPClient.

(2) By calling the function CommonLib.GetRemarkedMessage, obtain the e-mail array list with a "Canceled" message Code stored in the local database table.

(3) Set the gmail mailbox required SSL authentication and password authentication.

(4) By calling the function CommonLib.DeleteMessage, actually delete from the remote mail server the previously specified mailing list.

(5) Close the connection with the remote mail server, returning the number of messages deleted.

The function RemoveMarkedEmailsFromRemoteHost() related code is as follows:

Listing 6: The source code for the function RemoveMarkedEmailsFromRemoteHost

In the next section, we are going to look at the address book related management module.

The Address Book Management Module

The address book module is implemented in the file AddressBook.aspx.

One of the functions of address book module is fill in the recipient's e-mail address when the user is populating the related data. As previously introduced, through our own text box control with intelligence perception, the system in the background uses AJAX (the "asynchronous") approach to extract from the address book the recipient address prefix that meets the specified requirements. As long as users click a listed addresses at this time, this address will automatically be populated into the e-mail recipient text box control.

The address book management module implements basic operations, including viewing, editing, adding, and deleting contact addresses. The design logic is simple, with the help of ASP.NET GridView control and LinqDataSource control, mainly through declarative programming mode.

Figure 3 shows one of the design-time snapshots of the page AddressBook.aspx.

Figure 3: Address book management interface at the design time

Below, let's specifically look at the declarative programming code:

Listing 7: The main declarative code for handling the book address data

In the above declarative programming, you need to grasp the following points:

• In order to achieve the partial refresh effect during the course of editing and adding data, we need to use the UpdatePanel control to enclose the GridView control.
• To use the LinqDataSource control together with the GridView control to achieve the functionalities of edit, insert and delete operation, you must set its EnableUpdate, EnableInsert and EnableDelete property to true. And at the same time, we must also set its UpdateParameters, InsertParameters and DeleteParameters attributes. In addition, the LinqDataSource control related ContextTypeName property should be set to eMailDataContext, and the TableName property to AddressBook.
• The GridView control does not provide direct support for the insert operation. To achieve this support, we resort to the FooterTemplate template of the GridView control. I.e. we add a footnote to the GridView control to achieve the insert operation. Moreover, we need to show or hide the contents of this section as required.

When the user clicks the button "Add New Contact" to add contacts, the following will be executed:

Listing 8: The button “Add New Contact” related code

Figure 4 shows one of the running-time interfaces to add contacts.

Figure 4: The run-time interface to add contacts

When the user input data and click the button "Add New Contact", the new record will be added to the above GridView control. The corresponding code is as follows:

Listing 9: Add the new contact into the GridView control

If the user clicks the button "No More Adding", then the GridView control's footnote becomes invisible; at the same time, the "Add New Contact" button above the GridView control becomes visible again. The corresponding code is as follows:

Summary

In this series of articles, we have finally constructed a relatively complex desktop-class e-mail management system client.

In conclusion, during the course of the construction of the online e-mail management system, we used the following key technologies:

• Using the N-tier guideline to design the web architecture.
• Using the LINQ technique to design the data access module.
• Developing a universal message receiver class, fully considering SSL authentication and certification requirements.
• Using the ASP.NET asynchronous callback mechanism to show the contents of the e-mail body. You can see from this sample application that the ASP.NET asynchronous callback mechanism is not only an underlining technology to develop ASP.NET AJAX server controls, but there is still value when developing the page class contents.
• Using the FreeTextBox control to enter the message body content, so that the user can use multimedia format to compose the message body content.

Due to time limit, I've only brought you an e-mail management system client site needed to be increased at all aspects. Interested readers can continue to enhance it from the following aspects:

• Receiving and downloading e-mail attachments (you can achieve these through the GetAttachment() method of the class MIMEParser.Message).
• More humane automatically prompt when new mail arrives.
• More comprehensive contact addresses management techniques, and so on.

About Xianzhong Zhu

I'm a college teacher and also a freelance developer and writer from WeiFang China, with more than fourteen years of experience in design, and development of various kinds of products and applications on Windows platform. My expertise is in Visual C++/Basic/C#, SQL Server 2000/2005/2008, PHP+MyS... This author has published 81 articles on DotNetSlackers. View other articles or the complete profile here.