Creating a ASP.NET MVC Contact Form

Over the last few years, Microsoft’s investment in transforming Active Server Pages from a basic scripting language into an object oriented language with .NET integration has been remarkable. Some noteworthy features in traditional web forms are the ability to maintain page state on a page refresh, the ability to bind (associate) data to a standard set of web controls, and separation of code between a web form and code-behind.

Microsoft has invested resources lately into transforming traditional ASP.NET web forms into a new paradigm. ASP MVC (Model View Controller) is the new programming model that developers use, and it provides:

In this article we’ll create a simple ASP MVC contact form that will validate and email the message contents to any desired recipient. You will have a functional MVC contact form with validation, providing a means to lead visitors to your form again and again.

Download Project Files
Source Files

Prerequisites

We will need the following installed:

Start Visual Studio 2010

From the desktop:

New Projects window

In the name, location and solution name text fields, choose the following:

New Projects window

Click OK. In the New ASP.NET MVC Project window, choose Internet Application and leave the rest as defaults:

New ASP.NET 4 Project

Click OK. Visual Studio will work in the background for a bit and once finished, we’ll have a complete solution created, as well as HomeController.cs opened.

The Solution Explorer

Before moving forward, it’s important to understand the structure and files created in an ASP MVC project. Let’s use the following table for a brief, but concise explanation of the folders and files created:

Folder Created Explanation of contents
App_Start Contains specific configuration files including but not limited to RouteConfig.cs, which allows us to customize how uniform resource locators (URL’s) look in a browser’s address bar.
Content: Contains all content related files, such as style sheets, word/pdf documents, and web pages that are not razor syntax.
Controllers Contains all action related files. In the MVC paradigm, controllers determine which razor pages display based on controller actions. These files are usually named with the following convention: HomeController.cs, or AboutController.cs, which can be catered to your needs, but is recommended you stick to the naming conventions used in Visual Studio, which end in <NameofController>Controller.cs.
Models: Contains all database related files. In the MVC paradigm, models handle database calls namely, Microsoft SQL Server – LINQ calls and validation of form fields that are passed to a controller and then the appropriate view. These files are usually named with the following convention: HomeModel.cs, or AboutModel.cs, which can be catered to your needs, but is recommended you stick to the naming conventions used in Visual Studio, which end in <NameofModel>Models.cs.
Scripts: Contains JavaScript files, namely JQuery library. You can use any JavaScript library you choose.
Views: Contains razor HTML 5 web pages. These files are always named with a .CSHTML extension, and are used in conjunction with our controllers to determine which pages display based on actions.
Global.asax and web.config files are as follows: Global.asax: maps App_Start configuration files for the entire solution. Web.config: configuration file that contains information specific to connecting to a database engine, which version of .NET framework you’re using, and whether or not we have unobtrusive JavaScript enabled.

A few things to note…

We have removed the default _ViewStart.cshtml file from the solution, and taken its one line razor snippet and placed at the top of our index, contact, and about razor files which reside in Views: Home directory of our solution.

We’ve also removed default indentation of these razor views to alleviate the extra bytes that would be sent on each HTTP request, plus, it makes our markup look a bit more readable. Last, we’ve left the default style sheet in place just to make things a bit easier from a stylistic stand point, so we can focus on the form itself.

Create the model

In order to bind and validate our HTML 5 form fields, we need to create a model. Models in MVC are where you create class level variables that will pass the data collected to a view or controller. Models also allow us to validate input and make sure required fields are not empty, as well as handling regular expressions, and setting or checking minimum/maximum length.

For our form, we’ll have four fields:

  1. First Name
  2. Last Name
  3. Email
  4. Comments

Let’s create our model by following these steps:

Models Add Class

Create model

Click Add.

In our new model class, let’s create our form field’s variables:

public class ContactModels
{
public string FirstName { get; set; }
public string LastName { get; set; }
public string Email { get; set; }
public string Comment { get; set; }
}

As you can see, we now have four public string-class variables to hold the data entered from our form. Save your changes.

We'll continue with adjusting our view next.