Sunday, April 19, 2015

How to Send Emails from an MVC App using Gmail SMTP


In this post we describe Step by step How to Send Emails from an MVC App using Gmail SMTP and C#.  
We implement here in just 15 minutes an Email sender in Asp.Net MVC, using the SMTP from Gmail.
The complete code for this tutorial can be get from the following GitHub repository:
https://github.com/CarmelSoftware/MVC_EmailSender
Also, we use Twitter Bootstrap for the Web design of the app:

How to Send Emails from an MVC App using Gmail SMTP



Step by step How to Send Emails from an MVC App using Gmail SMTP



First, let's allow the Gmail security options to sending Emails from "less secure applications", by entering to    https://www.google.com/settings/security/lesssecureapps  :

How to Send Emails from an MVC App using Gmail SMTP


Then , open your MVC project and create a class to represent the Email object:

How to Send Emails from an MVC App using Gmail SMTP


Next, add an empty Controller:


How to Send Emails


Add a View for the Index Action method:


How to Send Emails from an MVC


We want to create an Email entity , so use the "Create" scaffold template, and the "Email" Model class:


Send Emails from an MVC App using Gmail SMTP

You will automatically get the following View:


Emails from an MVC App using Gmail SMTP

Now, let's customize this template to use the Twitter Bootstrap:


How to Send Emails from an MVC App

If you like, copy paste the code from the GitHub repository at  https://github.com/CarmelSoftware/MVC_EmailSender .
The next step is to take care of the Email object that this View will send to the Controller using the HTTP POST method. We add another Action method to take care of that. Change the "Index" action name for something more relevant to our issue, like "JustSendIt" (also, change the name of the View accordingly):



How to Send Emails from an MVC App using Gmail

This Controller method will receive and send the Email using an utility class that we'll code next.
Now add another action method named "Details" for showing the user the email contents that have been sent:



How to Send Emails from an MVC App using Gmail SMTP     1
This method just fetches the Email object stored at the TempData and display its properties . Add a Strongly typed View for en Email object using the "Details" template:

How to Send Emails from an MVC App using Gmail SMTP      2




How to Send Emails from an MVC App using Gmail SMTP    3

Customize the tool generated markup with the following, to add the CSS3 style from Twitter Bootstrap:


How to Send Emails from an MVC App using Gmail SMTP    4

Add the most updated versions of the Twitter Bootstrap and the JQuery javascript framework , at the _Layout.cshtml file in the Shared folder:

How to Send Emails from an MVC App using Gmail SMTP    5

Add the Data Annotations to the Email class, to generate the javascript that validates the data at client side:


Send Emails from an MVC App using Gmail SMTP

Finally, let's code the class that will send Emails using Gmail. Create the following utility class, that uses the SmtpClient, the MailMessage and the MailAddress classes:


How to Send from an MVC App using Gmail SMTP


Take care of respecting the Port 587 and the rest of the settings; elsewhere, this will not work.
Also, add a method for safely reading settings from the Web.config file, as follows:

Send Emails  MVC App using Gmail SMTP
Set the above AppSettings keys at the Web.config file, using exactly the same User Name and User Password as at your Gmail account:

 MVC App using Gmail SMTP


Then, your Controller will receive a boolean flag ("Item1" from the Tuple) and redirect the HTTP request to the Details action, or in case of error, will show the Error Message in Item2 and redirect back to the main web page:

How to MVC App using Gmail
To browse to the main web page, change the RouteConfig's default route as follows:


App using Gmail SMTP
Run the application:


 using Gmail SMTP
This Bootstrap design will also display the validation checking as follows:


Gmail SMTP

After sending the Email, the Details View displays its contents:


How to Send SMTP


We hope that this post has helped you ..

Happy programming.....

      by Carmel Schvartzman


כתב: כרמל שוורצמן