In this article I will explain with an example, how to send email using jQuery AJAX in ASP.Net MVC Razor.
The jQuery AJAX function will call a Web API Action method which will send email using Gmail SMTP Mail Server in ASP.Net MVC Razor.
Once the Email is sent, a Confirmation will be sent back to the jQuery AJAX function which in turn will be display a Success message using JavaScript Alert Message Box.
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>
Model
Following is a Model class named EmailModel with the following properties.
public class EmailModel
{
public string Email { get; set; }
public string Subject { get; set; }
public string Body { get; set; }
}
Controller
The Controller consists of the following Action method.
Action method for handling GET operation
Inside this Action method, simply the View is returned.
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
}
Namespaces
You will need to import the following namespaces.
using System.Net;
using System.Net.Mail;
using System.Configuration;
using System.Net.Configuration;
Web API Controller
The Web API Controller consists of the following Action method.
Action method for Sending Email
This Action method handles the call made from the POST call from the jQuery AJAX function.
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).
Inside this Action method of the Web API, the posted values are captured through the EmailModel 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.
Finally, object of the SmtpClient class is created and the settings of the Mail Server such has Host, Port, 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 returned to the calling jQuery AJAX function, which will be later displayed using JavaScript Alert Message Box.
public class AjaxAPIController : ApiController
{
[Route("api/AjaxAPI/SendEmail")]
[HttpPost]
public string SendEmail(EmailModel email)
{
//Read SMTP section from Web.Config.
SmtpSection smtpSection = (SmtpSection)ConfigurationManager.GetSection("system.net/mailSettings/smtp");
using (MailMessage mm = new MailMessage(smtpSection.From, email.Email))
{
mm.Subject = email.Subject;
mm.Body = email.Body;
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);
}
}
return "Email sent sucessfully.";
}
}
View
The View consists of two TextBoxes, a TextArea and a Button. The Button has been assigned with a jQuery Click event handler.
When the Send button is clicked, the TextBoxes and TextArea values are passed to the SendEmail Action method of Web API using jQuery AJAX function.
Finally, the received Success Message is displayed using JavaScript Alert Message Box.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>To:</td>
<td><input type="text" id="txtEmail"/></td>
</tr>
<tr>
<td>Subject:</td>
<td><input type="text" id="txtSubject"/></td>
</tr>
<tr>
<td valign="top">Body:</td>
<td><textarea id="txtBody" rows="3" cols="20"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="button" id="btnSend" value="Send"/></td>
</tr>
</table>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnSend").click(function () {
var email = '{Email: "' + $("#txtEmail").val() + '", Subject: "' + $("#txtSubject").val() + '", Body: "' + $("#txtBody").val() + '" }';
$.ajax({
type: "POST",
url: "/api/AjaxAPI/SendEmail",
data: email,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
alert(response);
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
});
});
</script>
</body>
</html>
Screenshots
Email Form
![ASP.Net MVC: Send Email using jQuery AJAX]()
Received Email
![ASP.Net MVC: Send Email using jQuery AJAX]()
Downloads
