You are here: Home > Articles > Article Display

Formatting complex ASP output using HTML templates

Mixing HTML and ASP code can be very difficult to maintain. Concatenating long strings in the code makes things difficult to read, and switching back and forth between ASP code and HTML can be very inefficient. Worst of all, you cannot use your HTML editor to edit the content presentation just as you usually do; you have to edit everything by hand. In this article we'll see how to solve this issue using HTML templates.

Published: Apr 24, 2002
Tested with: ASP 3.0
Category: ASP
16,945 views

Introduction

Mixing HTML and ASP code can be very difficult to maintain. Concatenating long strings in the code makes things difficult to read, and switching back and forth between ASP code and HTML can be very inefficient. Worst of all, you cannot use your HTML editor to edit the content presentation just as you usually do; you have to edit everything by hand. In this article we'll see how to solve this issue using HTML templates.

A typical complex output

Sending emails through an ASP page has become pretty common. Typically, a user fills out some fields in a form, which then gets submitted to some ASP script responsible for reading the inputs and sends the email in some nice formatted way. A polite, and sometimes necessary feature, is to include the user's inputs in the email. Consider the following common scenario for submitting and processing just eight form fields.

1 Dim strName
2 Dim strEmail
3 Dim strSubject
4 Dim strMessage
5 Dim strAddress
6 Dim strPhone
7 Dim strFax
8 Dim strProfession
9 Dim objEmail
10 strName = Request.Form("Name")
11 strEmail = Request.Form("Email")
12 strSubject = Request.Form("Subject")
13 strMessage = Request.Form("Message")
14 strAddress = Request.Form("Address")
15 strPhone = Request.Form("Phone")
16 strFax = Request.Form("Fax")
17 strProfession = Request.Form("Profession")
18 Set objEmail = Server.CreateObject("CDONTS.NewMail")
19     objEmail.From = strEmail
20     objEmail.To = "someone@somewhere.com"
21     objEmail.Subject = strSubject
22     objEmail.Body = "Email sent at " & Now() & vbcrlf _
23         & "by " & strName & vbcrlf _
24         & "---------------------------------------" & vbcrlf & vbcrlf _
25         & "Address: " & strAddress & vbcrlf _
26         & "Phone: " & strPhone & vbcrlf _
27         & "Fax: " & strFax & vbcrlf _
28         & "Profession: " & strProfession & vbcrlf _
29         & "Message: " & strMessage & vbcrlf
30     objEmail.Send
31 Set objEmail = Nothing

It soon becomes apparent that this is no way to edit your output. As the number of submitted inputs increases and your formatting becomes more complicated, your ASP code becomes hard to manage: hard to understand and hard to edit. This becomes even worse if you have to edit your output as HTML. What if you could use your favorite HTML editor to do this?

The solution: HTML templates

Diagram of how the template works

By HTML template I simply mean an HTML file with keywords of where we would like our content to be dynamic. Choose a word string that would not normally exist in a document. I chose REPLACE_, followed by what to replace. For example Name should be REPLACE_Name. We load the HTML template using the File System Object and simply read the contents of the file into a text stream. Then we search and replace our templated keywords with dynamic content.

Formatting an HTML Email with CDONTS

Let's say you would like to send people their inputs in a nicely formatted HTML email. Using your favorite HTML editor, create an HTML template and save it as an HTML file. Call it template.htm. You might want to go into the source code and erase everything, except what's between the of the document. You just want the content, and not the rest of the stuff that editors add by default. For example, when you create you file, your source code will look something like this:

1 <html>
2 <head>
3     <title>Untitled</title>
4 </head>
5 <body>
6     <!--template start; erase all above-->
7     ...
8     <!--template end; erase all below-->
9 </body>
10 </html>

Here's an example of a template of mine:

Xefteri

REPLACE_Name:

Thank you for submitting your input.
Below is the information you provided to us.

Your Personal Info
Name: REPLACE_Name
Email: REPLACE_Email
Phone: REPLACE_Phone
Fax: REPLACE_Fax
Address: REPLACE_Address
Profession: REPLACE_Profession
Your Message
Subject: REPLACE_Subject
Message: REPLACE_Message

You will be hearing from us shortly.

Sincerely,
Xefteri.com

In our ASP processing page we create a function that reads and properly outputs the template.

1 Function ReadFile(filename)
2     Dim objFSO
3     Dim objTStream
4     Dim strText
5     Const ForReading = 1
6     Set objFSO = Server.CreateObject("Scripting.FileSystemObject")
7     Set objTStream = objFSO.OpenTextFile(Server.MapPath(filename), ForReading)
8     strText = objTStream.ReadAll
9     Set objTStream = Nothing
10     Set objFSO = Nothing
11     strText = Replace(strText, "REPLACE_Name", strName)
12     strText = Replace(strText, "REPLACE_Email", strEmail)
13     strText = Replace(strText, "REPLACE_Phone", strPhone)
14     strText = Replace(strText, "REPLACE_Fax", strFax)
15     '-- Notice that below I am replacing all line breaks with the HTML <br>.
16     ' This applies to all form textboxes, where the user can enter line breaks
17     ' and it achieves proper display of the contents in HTML.
18     strText = Replace(strText, "REPLACE_Address", Replace(strAddress, vbcrlf, "<br>"))
19     strText = Replace(strText, "REPLACE_Profession", strProfession)
20     strText = Replace(strText, "REPLACE_Subject", strSubject)
21     strText = Replace(strText, "REPLACE_Message", Replace(strMessage, vbcrlf, "<br>"))
22     ReadFile = strText
23 End Function

We can call this method from anywhere in our code to return a properly formatted HTML output. We can output it on the screen and/or use it in a process, like sending it as the Body of an email. Changing our original email code, we can now set the Body attribute of the email object to the ReadFile function:

1 ...
2 Set objEmail = Server.CreateObject("CDONTS.NewMail")
3     objEmail.BodyFormat = 0 'CdoBodyFormatHTML objEmail.MailFormat = 0 'CdoMailFormatMime
4     objEmail.From = strEmail
5     objEmail.To = "someone@somewhere.com"
6     objEmail.Subject = strSubject
7     objEmail.Body = ReadFile("template.htm")
8     objEmail.Send
9 Set objEmail = Nothing

Conclusion

I have showed how to use this technique to properly format an HTML email, but you can use it for any kind of output. The VBScript Replace function may not be the most effective way to search and replace words in a text stream, but I have tested it against hundreds of lines of code and it is pretty fast. You can use regular expressions instead to do that, and it would probably become faster depending on how big your HTML template is.

 



Other articles in this category
  1. Exporting Word files to HTML
    March 5, 2003
    In this article we will first discuss the case for and against using Word as your HTML editor. Then we will see how to properly save a Word file to smaller, more compact HTML files. Third and last, we will see how to do this through code, and possibly create a batch process for converting numerous Word files to HTML at once.
  2. GetRows VBScript Class - Part III: Paging the results
    January 16, 2003
    In Part I of this series, we saw how to create a VBScript class to query our database using the very fast GetRows() method, and return a recordset as a local array. In Part II, we extended the class to allow ADDing and UPDATEing a row in the database. In this Part III, we will expand the class further to allow pagination of the returned recordset.
  3. Dynamic Tree Menu of your site
    May 31, 2002
    We'll see how to create a menu system that is cross-browser and includes all your site's folders/files. It uses ASP, XML and DHTML and by simply copying it to your site you have an instant Windows Explorer-like navigation of the contents.
  4. Generating an XML file of your website's folders/files
    May 24, 2002
    Using the File System Object (FSO) we can traverse through our website's contents and write them out in a nicely nested form in an XML file. We can then use that file for example, in a content management system or a TreeView control.
  5. Downloading any file using ASP, FSO and the ADODB Stream object
    May 8, 2002
    In this article, we will see how to allow a user to download any file from our web server. They will see a prompt, giving them the option of opening or saving it, rather than simply opening it which is the default. We can achieve this using the FSO and ADODB objects.