Sending an HTML and Plain Text E-newsletter with ASP.NET | WebReference

Sending an HTML and Plain Text E-newsletter with ASP.NET

By Ryan Butler


[next]

Download the files for this article.

When developing a website, especially for advertising, marketing, or recruiting agency, the ability to keep in touch with your audience through an attractive e-newsletter that provides information about current events and news surrounding your company is essential to keep your visitors in touch, in tune and wanting more. Most of the time, developers in charge of the website purchase mailing list programs that can be expensive, difficult to customize, both in appearance and in the script, and hard to setup on the remote server. The reason for this is simple; they don't have the knowledge or experience to develop one from scratch.

However, if you're familiar with HTML and CSS, using ASP.NET, you can develop an e-newsletter easily as long as you keep the expectations of what can be achieved visually through email within reason. In this article, we'll take a completed web page and learn how to integrate the HTML markup into an ASP.NET web form that will send the email to a recipient of our choice. Throughout the article, we'll identify the following: best methods used for the layout, formatting the visual appearance of the newsletter with CSS, recommended practices for using images, and last, how to write a script that will send both an HTML and plain text version of the newsletter.

If you would like to learn how to create an e-newsletter using the tools you already have in a practical context please do follow along below.

See Finished Web Page

email.html

Examining the finished web page: Layout

Since this article's purpose is about integrating and sending an e-newsletter through ASP.NET, we'll focus on moving the finished newsletter into an ASP.NET page. As you can see from looking at the newsletter in a browser, there's nothing extraordinary about the design or the code behind it. Continuing, if you look at the source of the web page, you'll notice a fairly archaic markup that is reminiscent of the early 90's when web developers thought that using inline styles for CSS and table layouts were here to stay. Obviously, that has changed, and today developers are pushing the limits on pure CSS layouts. However, we didn't do that in the newsletter. Our reason is simple; support for advanced CSS such as positioning in email clients is marginal at best. As a result, it's recommended to keep the layout in tables and use CSS, in our case, inline styles to format other characteristics of the page, such as headings, paragraphs, etc.

Examining the finished web page: DOCTYPES

Even though support for CSS in email is limited, the pros of using a DOCTYPE outweigh the cons of not using one.

Examining the finished web page: Inline styles

You'll notice there are no linked style sheets or embedded styles, that's because some email clients strip those out, so we'll stick with inline styles.

Examining the web page: Images

You'll notice we limited our use of images. There are several reasons for this. For starters, images take time to download and display in an email client. If you send a large size image through email to a visitor with a slower Internet connection, the image will take several seconds if not minutes to download and display, which could result in an unpleasant viewing experience. Furthermore, and arguably more important, images that are large in file size take time to be processed by the server that is sending the email, and by the server that is receiving the email. As a result, the desired number of images used in e-newsletters need to be limited. Also, it should be mentioned we're using an absolute path to retrieve our images. The reason(s) for this will be explained when moving our finished web page into the code behind file of our ASP.NET page.

Requirements for ASP.NET

Before creating our project and corresponding ASP.NET page, make sure you have .NET version 3.5 installed on your development machine. The reason for this will be explained in more detail later in the article, but it deals with needing to use Ajax server side controls.

Creating the project & ASP.NET page

In order to create the ASP.NET page that will have access to the Ajax server side controls, we'll need to create a new web project through either Microsoft Visual Web Developer Express or Microsoft Visual Studio. For the purposes of this article, we'll use the former, since it's a free download. From the program, follow these steps to create the new web project:

  • From the main menu, select File:New Project
  • For project type, select Visual C#, and then Web
  • For templates, select ASP.NET web application
  • In the name field, type SendEmail
  • Choose an appropriate directory for your solution
  • Left click OK

Your new web project will be created with a web form (default.aspx), and its corresponding code behind file, as well as a configuration file, web.config. Double click default.aspx; the default markup will be the following:

We'll modify the markup shown above with ours. Add the following inside default.aspx:

As you can see from the code above, we added the following:

  • <h3>
    • Gives our page a title of Send E-Newsletter
  • <form runat="server">
    • Every ASP.NET web form must have a form tag with an attribute of runat equal to server
  • <asp:TextBox
    • A server side text box control with the following parts:
    • ID="txtTo"
      • Gives our text box control a unique name so we can reference it in our code behind file
    • Runat="server"
      • Allows our button control to be run from the server with the resulting output being read by the browser
  • <asp:Button
    • A server side button control with the following parts:
    • ID="sendEmailBtn"
      • Gives our button control a unique name so we can reference it in our code behind file
    • Runat="server"
      • Allows our button control to be run from the server with the resulting output being read by the browser
    • Text="Send Email"
      • Gives our button a visual text to indicate to our visitors what the button can do
    • Onclick="sendEmailBtn_Click"/>
      • Gives our button control a server-side event handler that will be used to send our newsletter
  • <asp:Label
    • A server side label control with the following parts:
    • ID="lblMessage"
      • Gives our label control a unique name so we can reference it in our code behind file
    • Runat="server"
      • Allows our button control to be run from the server with the resulting output being read by the browser

The label control is used to indicate whether our email was sent successfully. Its text property will be set to a literal text string from our code behind file after the email has been sent. Save your changes and keep the file open.

Adding the send email event handler

When moving the HTML markup to our code behind file (done later in the article), we need to place it within our send mail event handler. In order to do this, let's first add an event handler to our code behind file. To do this, double click the send email button from default.aspx. After double clicking the button, the code behind file should open automatically and insert the following code:

protected void sendEmailBtn_Click(object sender, EventArgs e)
 {
}

As you can see from the code above, by double clicking the button, the program automatically added the correct event handler, sendEmailBtn_Click, which is the same name as our onClick attribute of our button control, with the appropriate parameters.

Add the mail name space

In order to eventually send the e-newsletter in an email, we need to add the name space that will allow us to create a mail message object. In our code behind file, add the following below the existing name spaces:

using System.Web.UI.WebControls;
using System.Net.Mail;

As you can see from the code above, we added System.Net.Mail name space in order to expose the mail message class. There's a reason why didn't use System.Web.Mail, which is explained later in the article

Create variable for html email and mail message object

Continuing, let's create the variable that will hold our HTML markup from our fnished page, as well as create a mail message object that will be used to specify who the email is from and who the email is going to. In our code behind file, in the send email event handler, add the following code:

As you can see from the code above, we added the following: a string variable named bodyHTML and set its value to empty. This makes the contents of our variable read-only. Continuing, we create an instance of a new object, mailMsg from the mail message class and pass in two parameters. The mail message class constructor accepts two parameters at a minimum, which can include any of the following: the sender of the email, the receipient of the email, the subject, or the body. In our case, for the sender, we used an email address. It's important to note here that hosts will not let you send an email from an account that isn't active on your domain. As a result, create a generic name, such as [email protected] to serve as the sender. For the receipient, we used our text box control, which allows us to send our e-newletter to any email address we choose. Lastly, we use the subject property of the mail message object and set it to "MWD E-Newsletter", and set the IsBodyHtml property to true, since this is an HTML email. Before moving on, now would be a good time to save your changes.

Adding the HTML markup to our bodyHTML variable

In order to put the HTML markup of our finished page into our variable, we set our variable to accept a literal (verbatim) string as shown below:

As you can see from the code above, we set our variable to accept a literal (verbatim) string of text by using the at (@) sign, following by two double quotes. In other words, using the at (@) symbol allows C# to read our html markup exactly as we have it.

Next, to get our finished web page into our variable, follow these steps:

  • Open the finished web page in a browser
  • Right click and select View Source
  • Press Cntrl + A on your keyboard to select all the markup
  • With the markup highlighted, right click and select Copy

In our code behind file, place your mouse cursor in the double quotes of our variable, right click and select Paste. You'll notice the code behind file doesn't like the html markup. The reason for this is simple, we haven't escaped our double and single quotes correctly. To resolve the conflicts, use default_htmlversion.aspx as a reference. As you can see by looking at the example file, our finished web page is simply copied inside the double quotes of our variable, thus we replaced the double quotes from our original html markup with single quotes. Now would be a good time to save your changes.


[next]