Creating a ASP.NET Contact Form
Testing Local host (IIS)
Before continuing, let’s ensure IIS is installed and configured properly to handle ASP.NET. Open your preferred web browser and type the following address:
If you get an error screen, don’t panic. Sometimes during the installation and configuration of the .NET framework & IIS, the ASP client isn’t registered with IIS. It’s nothing to fret about and can be easily fixed by opening a command line and typing the following:
C:\WINDOWS\Microsoft.NET\Framework\[version]\aspnet_regiis -i
Where version is the version of the .NET framework installed on your computer. Once this is complete, refresh your browser and a welcome screen should show.
Create a Virtual Directory/Application
In the ASP.NET environment, when creating web forms, you’ll want to create them within a virtual directory or application in IIS. Associating web forms to a virtual directory or application within IIS allows your application to operate more efficiently and allows your application access to features that makes working with ASP.NET web forms far easier than most server side environments. Such features include:
- Access to a Web.config file that allows your application to contain information including:
- Connection string information to a database, default compilation settings such as programming languages (C# or VB.NET), registration of in-house written components and authentication settings.
- Creation of two Web form files:
- WebForm.aspx
- WebForm.aspx.cs
More on the intricacies of these files will be discussed later in the article.
In order to create a virtual directory or application in IIS, you need a physical folder setup on your hard drive. Once completed, follow the steps below to open IIS:
- From the desktop, click Start : Settings : Control Panel
- In the Control Panel window, double click Administrative Tools
- In the Administrative Tools window, double click Internet Information Services
- In the Internet Information Services window, expand the plus sign next to your computer name, which should show two folders, Web Sites and Default SMTP Server
- Expand the plus sign next to Web Sites, which should show Default Web Site.
- To create the virtual directory/application, right click on Default Web Site and select New : Virtual Directory
- In the Virtual Directory Wizard window, click Next
- For the alias name, type dev, which is what you’ll use to identify your virtual directory/application, and then, click Next
- For the directory, click Browse and select your physical root folder where you’ll be creating the web form
- For the access permissions, leave as is, and click Next, which should show a finished window, click Finish
- In the IIS window, you should see your newly created virtual directory/application as well as the files it contains. The directory should be empty.
Close the IIS window and open Visual Web Developer Express, we’re ready to begin creating our contact form.
Open Local Web Site from Visual Web Developer Express
When you first open Visual Web Developer Express, a start up screen will show with a default language setting. For the purposes of this article, we’ll be using C# (pronounced C-sharp). To open our web application, follow these steps:
- From the main menu, select File : Open Web Site
- In the Open Web Site window, on the left side, select Local IIS
- You should see the virtual directory/application you just created, left click to select it and left click Open
Creating the Web Form
With the local web site open, you should see your virtual directory/application in the upper right side of the screen. In order to create our contact form, complete the following steps:
- Right click your application and select Add New Item
- In the Add New Item window, by default web form is selected, leave it selected
- In the file name box, change the file name to contact.aspx, check the box Place code in separate file and then left click Select
You will notice when the editor created our file, it created two:
- Contact.aspx
- Contact.aspx.cs
The first file contains our presentational logic, such as HTML, CSS, JavaScript, our web and validation controls, while the second file contains our business logic such as event handlers that will send the email message to our specified recipient, and perform client and server-side validation.
Working with our presentation file (contact.aspx) first
Even though these files are associated together, it often helps to work with them separately, and more importantly, work with the presentational file first, and then focus on making the form do what we want later. For the purposes of this article, we’ll be working strictly from code view, as that’s the best way to learn how the environment works.
Creating and analyzing the form
Inside the file, you’ll notice that it looks just like any other HTML page. It has a normal HTML structure that you would expect, but behind this ordinary markup, there’s a wealth of power and flexibility we’ll tap into. You’ll notice that by default our editor created a <form> tag. By default, all ASP.NET web forms have a form tag and we’ll understand why that’s important later in the article. Inside the opening and closing form tag, let’s create a basic table structure that will collect first and last name, email, and comments from our visitor as shown below:
We'll continue with the code for our page next.