In this article I will explain with an example, how to send email using Contact Us Form in ASP.Net MVC Razor.
The Contact Us Form contains some TextBox controls, a Rich TextBox and a FileUpload control to attach file.
When the Send Button is clicked, the values from the TextBox fields are embedded into HTML string and the HTML string is send as Email along with the Attachment in ASP.Net MVC Razor.
Model
Following is a Model class named ContactFormModel with the following properties.
public class ContactFormModel
{
public string Name { get; set; }
public string Subject { get; set; }
public string Email { get; set; }
[AllowHtml]
public string Body { get; set; }
public HttpPostedFileBase Attachment { get; set; }
}
Mail Server Settings in Web.Config file
The following Mail Server settings need to be saved in the Web.Config file.
<system.net>
<mailSettings>
<smtp deliveryMethod="Network" from="sender@gmail.com">
<network
host="smtp.gmail.com"
port="587"
enableSsl="true"
userName="sender@gmail.com"
password="GMAILor2STEP-PASSWORD"
defaultCredentials="true"/>
</smtp>
</mailSettings>
</system.net>
Note: Please replace the Email and Password with actual Gmail Email and Password.
Namespaces
You will need to import the following namespaces.
using System.Net;
using System.Net.Mail;
using System.Configuration;
using System.Net.Configuration;
Controller
The Controller consists of two Action methods.
Action method for handling GET operation
Inside this Action method, simply the View is returned.
Action method for handling POST operation
This Action method handles the call made from the POST function from the View.
MailMessage Class Properties
Following are the required properties of the MailMessage class.
From – Sender’s email address.
To – Recipient(s) Email Address.
CC – Carbon Copies (if any).
BCC – Blind Carbon Copies (if any).
Subject – Subject of the Email.
Body – Body of the Email.
IsBodyHtml – Specify whether body contains text or HTML mark up.
Attachments – Attachments (if any).
ReplyTo – ReplyTo Email address.
SMTP Class Properties
Following are the properties of the SMTP class.
Host – SMTP Server URL (Gmail: smtp.gmail.com).
EnableSsl – Specify whether your host accepts SSL Connections (Gmail: True).
UseDefaultCredentials – Set to True in order to allow authentication based on the Credentials of the Account used to send emails.
Credentials – Valid login credentials for the SMTP server (Gmail: email address and password).
Port – Port Number of the SMTP server (Gmail: 587).
When the Form is submitted, the posted values are captured through the ContactFormModel class object.
The Sender email address (from) is fetched from the SmtpSection of the Web.Config file, the Subject and Body are fetched from their respective Model properties.
If a file is attached then it is added as attachment to the Attachments List of the MailMessage object and all these values are set into an object of the MailMessage class.
Finally, object of the SmtpClient class is created and the settings of the Mail Server such has Host, Port, DefaultCredentials, EnableSsl, Username and Password are fetched from the mailSettings section of the Web.Config file and are set in respective properties of the SmtpClient class object.
Note: It is necessary to use the sender’s email address credentials while defining the Gmail SMTP Server Credentials as Gmail the sender’s email address must be same as the Gmail Username specified in credentials.
Finally, a success message is set to a ViewBag object named Message which will be later displayed on the View.
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Index(ContactFormModel model)
{
//Read SMTP section from Web.Config.
SmtpSection smtpSection = (SmtpSection)ConfigurationManager.GetSection("system.net/mailSettings/smtp");
using (MailMessage mm = new MailMessage(smtpSection.From, "admin@aspsnippets.com"))
{
mm.Subject = model.Subject;
mm.Body = "Name: " + model.Name + "<br /><br />Email: " + model.Email + "<br />" + model.Body;
if (model.Attachment.ContentLength > 0)
{
string fileName = Path.GetFileName(model.Attachment.FileName);
mm.Attachments.Add(new Attachment(model.Attachment.InputStream, fileName));
}
mm.IsBodyHtml = true;
using (SmtpClient smtp = new SmtpClient())
{
smtp.Host = smtpSection.Network.Host;
smtp.EnableSsl = smtpSection.Network.EnableSsl;
NetworkCredential networkCred = new NetworkCredential(smtpSection.Network.UserName, smtpSection.Network.Password);
smtp.UseDefaultCredentials = true;
smtp.Credentials = networkCred;
smtp.Port = smtpSection.Network.Port;
smtp.Send(mm);
ViewBag.Message = "Email sent sucessfully.";
}
}
return View();
}
}
View
Inside the View, in the very first line the ContactFormModel class is declared as Model for the View.
The View consists of an HTML Form which has been created using the Html.BeginForm method with the following parameters.
ActionName – Name of the Action. In this case the name is Index.
ControllerName – Name of the Controller. In this case the name is Home.
FormMethod – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
The Form consists of HTML TextBox, TextArea, FileUpload element and a Submit Button.
The Body TextArea (Multiline TextBox) is made a Rich TextBox using the TinyMCE RichTextEditor plugin.
When the Send Button is clicked, the Form gets submitted and the Model object is sent to the Controller.
@model Contact_Form_MVC.Models.ContactFormModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
</head>
<body>
<div>
@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 80px">Name:</td>
<td>@Html.TextBoxFor(model => model.Name)</td>
</tr>
<tr>
<td>Subject:</td>
<td>@Html.TextBoxFor(model => model.Subject)</td>
</tr>
<tr>
<td>Email:</td>
<td>@Html.TextBoxFor(model => model.Email)</td>
</tr>
<tr>
<td>Body:</td>
<td>@Html.TextAreaFor(model => model.Body, new { rows = "3", cols = "20" })</td>
</tr>
<tr>
<td></td>
<td>@Html.TextBoxFor(model => model.Attachment, new { type = "file" })</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Send"/></td>
</tr>
</table>
<br/>
<span style="color:green">@ViewBag.Message</span>
}
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.0.20/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({ selector: 'textarea', width: 300 });
</script>
</body>
</html>
Errors while sending Email using Gmail
The following error occurs when you try to send email using Gmail credentials in your ASP.Net MVC application.
The SMTP server requires a secure connection or the client was not authenticated. The server response was: 5.5.1 Authentication Required. Learn more at
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.
Exception Details: System.Net.Mail.SmtpException: The SMTP server requires a secure connection or the client was not authenticated. The server response was: 5.5.1 Authentication Required. Learn more at
Solution
Screenshots
The Contact Us Form
![Contact Us Form in ASP.Net MVC]()
The received email
![Contact Us Form in ASP.Net MVC]()
Downloads
