Sending emails using ASP.NET is relatively easy, but sending emails in html format with images embedded in them is a little tricky (not difficult at all though). Keep in mind that embedding images within the email is not the same as attaching images to emails. The embedded images appear inside the content of the email with no sign of any attachments.
Sending HTML emails
First we will see how to send a simple hello world html based email using ASP.NET.Add proper namespace
using System.Net.Mail;
The HTML email function
I like to write the email code as a separate function for reusability benefit. This function will take parameters and will send email accordingly.
protected void sendHtmlEmail(string from_Email, string to_Email, string body,
string from_Name, string Subject, string SMTP_IP, Int32 SMTP_Server_Port)
{
//create an instance of new mail message
MailMessage mail = new MailMessage();
//set the HTML format to true
mail.IsBodyHtml = true;
AlternateView htmlView = AlternateView.CreateAlternateViewFromString(body, null, "text/html");
//Add view to the Email Message
mail.AlternateViews.Add(htmlView);
//set the "from email" address and specify a friendly 'from' name
mail.From = new MailAddress(from_Email, from_Name);
//set the "to" email address
mail.To.Add(to_Email);
//set the Email subject
mail.Subject = Subject;
//set the SMTP info
SmtpClient smtp = new SmtpClient(SMTP_IP, SMTP_Server_Port);
//send the email
smtp.Send(mail);
}
Calling the email function
Prepare the html email message and put it in a string.
string Themessage = @"<html>
<body>
<table width=""100%"">
<tr>
<td style=""font-style:arial; color:maroon; font-weight:bold"">
Hello World!
</td>
</tr>
</table>
</body>
</html>";
Call the function
sendHtmlEmail("raza@someEmail.com", "user@someEmail.com", Themessage,
"Raza", "Test HTML Email", "192.168.1.100", 25);
When you execute the code so far, you should receive an email like the image below.
Embedding the Image
We will change our email function to load an image. The image I will use is located on the server where the email code will reside and the path to the image is c:/myImage.png.
Linked Resource
To embed an image, we first will need to declare it as a LinkedResouce. The linked resource will have an ID and this ID will be available to us as a handle within an email.
//Add Image
LinkedResource theEmailImage = new LinkedResource("C:\\myImage.png");
theEmailImage.ContentId = "myImageID";
Once the linked resource image is declared, we will need to add it to the email’s alternate view. Continuing with our code from the email function:
//Add the Image to the Alternate view
htmlView.LinkedResources.Add(theEmailImage);
That’s it! After the above code the image is available for use inside the email. To display the image we can call it as follows:
<img src=cid:myImageID>
So our final function looks as follows:
protected void sendHtmlEmail(string from_Email, string to_Email, string body,
string from_Name, string Subject, string SMTP_IP, Int32 SMTP_Server_Port)
{
//create an instance of new mail message
MailMessage mail = new MailMessage();
//set the HTML format to true
mail.IsBodyHtml = true;
//create Alrternative HTML view
AlternateView htmlView = AlternateView.CreateAlternateViewFromString(body, null, "text/html");
//Add Image
LinkedResource theEmailImage = new LinkedResource("C:\\myImage.png");
theEmailImage.ContentId = "myImageID";
//Add the Image to the Alternate view
htmlView.LinkedResources.Add(theEmailImage);
//Add view to the Email Message
mail.AlternateViews.Add(htmlView);
//set the "from email" address and specify a friendly 'from' name
mail.From = new MailAddress(from_Email, from_Name);
//set the "to" email address
mail.To.Add(to_Email);
//set the Email subject
mail.Subject = Subject;
//set the SMTP info
SmtpClient smtp = new SmtpClient(SMTP_IP, SMTP_Server_Port);
//send the email
smtp.Send(mail);
}
HTML Message
We will modify our html to include the image this time.
string Themessage = @"<html>
<body>
<table width=""100%"">
<tr>
<td style=""font-style:arial; color:maroon; font-weight:bold"">
Hello World! <br>
<img src=cid:myImageID>
</td>
</tr>
</table>
</body>
</html>";
Run the code
If we run the modified code, our email looks like the image below:
Full Code
The full code for the page is as follows:
using System;
using System.Net.Mail;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string Themessage = @"<html>
<body>
<table width=""100%"">
<tr>
<td style=""font-style:arial; color:maroon; font-weight:bold"">
Hello World! <br>
<img src=cid:myImageID>
</td>
</tr>
</table>
</body>
</html>";
sendHtmlEmail("raza@someEmail.com", "user@someEmail.com", Themessage, "Raza", "Test HTML Email", "192.168.1.1", 25);
}
protected void sendHtmlEmail(string from_Email, string to_Email, string body,
string from_Name, string Subject, string SMTP_IP, Int32 SMTP_Server_Port)
{
//create an instance of new mail message
MailMessage mail = new MailMessage();
//set the HTML format to true
mail.IsBodyHtml = true;
//create Alrternative HTML view
AlternateView htmlView = AlternateView.CreateAlternateViewFromString(body, null, "text/html");
//Add Image
LinkedResource theEmailImage = new LinkedResource("C:\\myImage.png");
theEmailImage.ContentId = "myImageID";
//Add the Image to the Alternate view
htmlView.LinkedResources.Add(theEmailImage);
//Add view to the Email Message
mail.AlternateViews.Add(htmlView);
//set the "from email" address and specify a friendly 'from' name
mail.From = new MailAddress(from_Email, from_Name);
//set the "to" email address
mail.To.Add(to_Email);
//set the Email subject
mail.Subject = Subject;
//set the SMTP info
SmtpClient smtp = new SmtpClient(SMTP_IP, SMTP_Server_Port);
//send the email
smtp.Send(mail);
}
}
2 comments:
Hey Thanks..
very easy to implement.
Very helpful for us.
Thank you so much....
Post a Comment