Creating a ASP.NET Contact Form / Page 3

Creating a ASP.NET Contact Form [con't]

Create our submit and reset buttons

In order for our contact form to send an email message to a specified recipient, we need to add buttons to our form that will trigger code to make this happen. Modify our file as shown below:

<tr> <td colspan="2"><asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="SendMail"/><asp:Button ID="btnReset" runat="server" Text="Reset" OnClick="Reset"/></td> </tr>

As you can see from the example above, we added an extra table row, and created two web control buttons, one for sending the mail, and another one for clearing the form fields. One difference in these buttons from the others includes using the text property to set their text values to submit and reset accordingly that will show a textual description for the buttons. Another important difference is the onclick property. The first confusing aspect of this property is one tends to think this is a client-side event, in this case, it's not. It's a server-side event that will trigger a server-side event to occur in our code-behind file that will ensure validation takes place, as well as emailing the results of information to our specified recipient, which we'll get to next. Save your changes and close the file. Open the code-behind file (contact.aspx.cs) and add the following event handlers below the page load event handler:

protected void Page_Load(object sender, EventArgs e) { } protected void SendMail(object sender, EventArgs e) { } protected void Reset(object s, EventArgs e) { }

As you can see from the examples above, the name of our event handler matches our onclick event in our presentational file. It should be noted that if you set an onclick event on a button without creating a corresponding event handler, your web form will throw an error. We'll discuss the code within this file shortly.

Event driven environment

In typical web environments, such as PHP or ASP, when you want an action to occur, like a form submission that sends an email, you create an input button and specify its type as submit. When the button is clicked, the file that's attached to the action attribute of the form, typically a script is then executed performing the business logic. Even though an "event" is technically occurring, it's typically not considered an event, since that's the default behavior of a form.

When Microsoft created the .NET framework, and integrated ASP into it, it created the ability for any web form to respond to events, such as a button click. As a result, since our submit button has an onclick event declared, when the button is "clicked", it causes an "event" to execute on the server, thus forcing our presentation file to look for the associated code behind file, locate our "event", and execute the business logic.

Examining the code

Before creating and examining our code, it's important to understand that our code-behind file is being written in C# (pronounced C-sharp). C# was created by Microsoft in an attempt to compete with Sun Microsystems Java, both of which are object-oriented languages. The idea behind C# was to leverage the power of the C constructs, while leveraging the easy syntax of Visual Basic. As a result, all code-behind files for ASP.NET are written in object-orientated languages, which are then compiled by the server into efficient binary or dynamic link libraries.

Continuing, you'll see the following:

using System; using System.Collections.Generic; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class contact : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void SendMail(object sender, EventArgs e) { } protected void Reset(object s, EventArgs e) { } }

Starting from the beginning of the file, you'll notice many using statements. Since ASP was integrated in the .NET framework, it has access to all the classes and libraries; you just have to import them. In C#, you give your web form access to them by declaring using statements, which imports which classes you want your web form to have. The only one we need to add is the class for email, which is found in the System.Net.Mail namespace. Simply modify the code to include an additional using statement as shown below:

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

Understanding event handlers

As we continue through the code, let's examine the event handlers:

• Protected: means any variables, or actions inside this event are protected from the rest of the application and aren't in scope to the rest of the page.
• Void: means the event handler doesn't return a value.
• Object sender: contains information about the event that's been triggered or executed
• EventArgs e: contains information about the control that triggered the event to execute

Extending the Send Mail Event

In order for us to collect the information entered in our form and send the mail to our specified recipient, we'll create a mail message object. We do this by adding the code shown below:

protected void SendMail(object sender, EventArgs e) { MailMessage mail = new MailMessage(); }

As you can see from the example above, we want to create our object from the mail message class. At this point, in object-oriented languages, when you assign a variable with the new keyword, followed by a class constructor, you are said to be creating an instance of an object of that class. As a result, our object, mail, has access to all properties and methods of the mail message class.

Setting the from address of our mail object

When we send the mail to the specified recipient, we want to know who contacted us so that we can follow up with them at our convenience. Since we have an email text box that's used to collect our visitor's email address, we'll use that as a way to touch base with our client when the need arises. Let's modify our code as shown below:

protected void SendMail(object sender, EventArgs e) { MailMessage mail = new MailMessage(); mail.From = new MailAddress(EmailTB.Text); }

As you can see from the example above, we set the property, from, of our mail object to a new instance of the mail address class, and pass in our email text box control as an argument.

Setting the email recipient of our mail object

In order for our clients to reach us, we need to send the email result to a specified recipient. We do this by adding the following code as shown below:

protected void SendMail(object sender, EventArgs e) { MailMessage mail = new MailMessage(); mail.From = new MailAddress(EmailTB.Text); mail.To.Add("myemail@domain.com"); }

As you can see from the example above, we first set the property, to, of our mail object that specifies a collection, that is, a collection of email address(s) that this message could be sent to. For example, you could send this email to other recipients. Then we use the add method to add the specified email address to our mail object's collection and pass in a literal string of an appropriate email address.

Setting the subject line of our mail object

In most cases, we'll want to have a pre-defined subject line so that when our clients do email us, we'll be easily able to identify what the message is about. To do this, we modify our code as shown below:

protected void SendMail(object sender, EventArgs e) { MailMessage mail = new MailMessage(); mail.From = new MailAddress(EmailTB.Text); mail.To.Add("myemail@domain.com"); mail.Subject = "Contact Us"; }

As you can see from the example above, we set the subject property of our mail object to a literal string of our choice.

Setting the content type of our mail object

When sending an email message from a contact form, you have the option of specifying whether it will be plain text or HTML. Some people choose not to accept HTML encoded emails because they can contain malicious code that can be used to capture sensitive information or spread viruses and/or worms on a person's computer. However, since we're sending this email to ourselves, we know the content will be legitimate; therefore, we'll go ahead and specify that this email can contain HTML by modifying the code as shown below:

protected void SendMail(object sender, EventArgs e) { MailMessage mail = new MailMessage(); mail.From = new MailAddress(EmailTB.Text); mail.To.Add("myemail@domain.com"); mail.Subject = "Contact Us"; mail.IsBodyHtml = true; }

As you can see from the example above, we set the IsBodyHTML property of our mail object to true, which will allow any HTML enabled email client to parse and read the HTML.

Collecting the forms contents through our mail object

In order for us to collect the information that our visitors entered in our form, we need to set our mail object's body property to a literal string that will ultimately contain a concatenated string from our form in a nicely formatted message that's readable through an email client. Concatenation is a fancy word for saying "append to an existing string". Let's add this functionality by adding the code shown below:

protected void SendMail(object sender, EventArgs e) { MailMessage mail = new MailMessage(); mail.From = new MailAddress(EmailTB.Text); mail.To.Add("myemail@domain.com"); mail.Subject = "Contact Us"; mail.IsBodyHtml = true; mail.Body = "First Name: " + FNameTB.Text + "<br />"; mail.Body += "Last Name: " + LNameTB.Text + "<br />"; mail.Body += "Email: " + EmailTB.Text + "<br />"; mail.Body += "Comments: " + CommentsTB.Text + "<br />"; }

As you can see from the example above, we first set the body property of our mail object to a literal string that contains "First Name:", then we concatenate by using the plus (+) sign the value entered by our visitor via our text box control by using its text property, and then to create separation for the next line in our string, we append an ordinary HTML break tag. We continue the body of the mail message by concatenating to the existing string our additional form fields, followed by their appropriate controls.

Sending the email through SMTP client class

Since we have set everything we need, we now need to send the mail message to our recipient. In order for us to do this, we need to create a new instance of an object based off the SMTP client class. Before moving forward, it should be noted that all our script can do is send the email message to a relay server and hope the server delivers the message. Once our web form sends the email message, all responsibility for sending the message is delegated to the relay server, in our case, IIS. With that said, let's modify our page with the code as shown below:

protected void SendMail(object sender, EventArgs e) { MailMessage mail = new MailMessage(); mail.From = new MailAddress(EmailTB.Text); mail.To.Add("myemail@domain.com"); mail.Subject = "Contact Us"; mail.IsBodyHtml = true; mail.Body = "First Name: " + FNameTB.Text + "<br />"; mail.Body += "Last Name: " + LNameTB.Text + "<br />"; mail.Body += "Email: " + EmailTB.Text + "<br />"; mail.Body += "Comments: " + CommentsTB.Text + "<br />"; SmtpClient smtp = new SmtpClient(); smtp.Host = "your_relay_mail_server"; smtp.Send(mail); }

As you can see from the example above, we create a new instance of the SMTP client class with an object named SMTP. From there, we set its host property to a relay server. It should be noted that the way of sending email to a relay server on a production server can differ significantly between hosts. The above method is meant to be a generic look at how to do it. As a result, if the above doesn't work for you, ask your hosting provider for additional details. Lastly, to send our results from our form, we set the send method of our SMTP object and pass our mail object as an argument. Save your file. We'll send a test email a little later on.

Find a programming school near you

Zip Code:

Subject: - Select All Subjects - Computer Applications Computer Engineering Computer Science Computer Prog. - Software Dev. Computer Game Programming Web Design Web Development Internet Systems Internet Certification Database Design and Development Information Systems Management Information Technology Project Management Network Design - Development Systems Analyst

Degree: - Select All Degrees - Associate's Bachelor's Master's Doctoral Certificates Diplomas Coursework MBA

Online Campus Both