Extending the EmailSender to Include a Html Template
In the previous article ASP.NET Core 2.2 - SMTP EmailSender Implementation the EmailSender was sending just simple html message emails. That implementation used Dependency Injection for EmailSettings set in appsettings.json. This article will demonstrate how to add a html template.
I will add a private GetEmailTemplate method with parameters for subject and message to the EmailSender. We can use this method to take the simple html message and create a more appealing message with a banner header and email signature. If you followed the previous article, you have a page configured to test the email settings. I will use the same example to demonstrate the added function.
Edit EmailSender.cs, add a new GetEmailTemplate method.
private string GetEmailTemplate(string subject, string message)
{
StringBuilder sb = new StringBuilder(@"<!DOCTYPE html>
<html>
<head>
<meta charset="" utf-8"" />
<title>#Subject#</title>
</head>
<body style="" font-family: Arial, Helvetica, sans-serif;"">
<table border="" 0"" cellspacing="" 0"" width="" 100%"">
<tr>
<td></td>
<td width="" 700"">
<div style="" border: 2px solid #BannerColor#; background-color: #BannerBackcolor#; color: #BannerColor#; width: 90%; margin: 0 auto;"">
<div style="" padding: 5px 0; width: 100%; margin: 0 auto; text-align:center; font-size: 28px;"">#BannerText#</div>
</div>
<div style="" padding: 10px 10px; width: 90%; margin: 0 auto; font-size: 18px;"">
<h3>#Subject#</h3>
<p>
#Message#
</p>
<p>
Thank you,<br />
#EmailSignature#
</p>
<p>
This is an automated message.
</p>
</div>
<div style="" background-color: #BannerBackcolor#; color: #BannerColor#; padding: 10px 10px; width: 90%; margin: 0 auto; bottom: 10px;"">
© #Year#
</div>
</td>
<td></td>
</tr>
</table>
</body>
</html>");
sb.Replace("#BannerBackcolor#", _emailSettings.BannerBackcolor);
sb.Replace("#BannerColor#", _emailSettings.BannerColor);
sb.Replace("#BannerText#", _emailSettings.BannerText);
sb.Replace("#Subject#", subject);
sb.Replace("#Message#", message);
sb.Replace("#EmailSignature#", _emailSettings.EmailSignature);
sb.Replace("#Year#", DateTime.Now.Year.ToString());
return sb.ToString();
}
You can edit this template to fit your requirements, but you should check the references. I ran into a few issues while designing the template. I used a blank web page with no master Layout which helped with initial layout and colors. Converting the html to a literal was next but not difficult. That allowed substitutions with StringBuilder and EmailSettings. It was responsive but I had to deal with no max width. I had to move style classes declared in the head section to element inline styles for GANGA (Gmail app for non-Google accounts). I have created a couple of specific templates based on this catch-all.
Section references:
This new method uses a few more EmailSettings so let's add them.
Edit appsettings.json and appsettings.Development.json, add the new EmailSettings.
"EmailSettings": {
"MailServer": "smtp.some_server.com",
"MailPort": 587,
"SenderName": "some name",
"Sender": "some_email@some_server.com",
"Password": "some_password",
"BannerBackcolor": "yellow",
"BannerColor": "orange",
"BannerText": "MyWebsite.Com",
"EmailSignature": "Support"
}
Add the new properties to the EmailSettings class in the Entities folder.
public class EmailSettings
{
public string MailServer { get; set; }
public int MailPort { get; set; }
public string SenderName { get; set; }
public string Sender { get; set; }
public string Password { get; set; }
public string BannerBackcolor { get; set; }
public string BannerColor { get; set; }
public string BannerText { get; set; }
public string EmailSignature { get; set; }
}
Call the GetEmailTemplate from SendEmailAsync in the EmailSender.
Edit EmailSender.cs > SendEmailAsync().
var builder = new BodyBuilder
{
TextBody = textMessage,
//HtmlBody = htmlMessage
HtmlBody = GetEmailTemplate(subject, htmlMessage)
};
In the previous article ASP.NET Core 2.2 - SMTP EmailSender Implementation we setup a test from a razor page and then updated the test for text and html messages.
Add this label and form to Index.cshtml.
<div class="row">
<div class="col-6">
<label class="alert alert-success">@Model.EmailStatusMessage</label>
</div>
</div>
<div class="row">
<div class="col-6">
<form method="post">
<div class="form-group">
<label asp-for="Email"></label>
<input asp-for="Email" class="form-control" />
<span asp-validation-for="Email" class="text-danger"></span>
</div>
<button type="submit" class="btn btn-primary">Email Test</button>
</form>
</div>
</div>
Edit Index.cshtml.cs.
public class IndexModel : PageModel
{
private readonly IEmailSender _emailSender;
public IndexModel(IEmailSender emailSender)
{
_emailSender = emailSender;
}
public string EmailStatusMessage { get; set; }
[Required]
[BindProperty]
public string Email { get; set; }
public void OnGet()
{
}
public async Task OnPostAsync()
{
if (!ModelState.IsValid)
{
return Page();
}
var email = Email;
var subject = "Email Template Test";
var textMessage = "This is the text message.";
var htmlMessage = "This is the <strong>html</strong> message.";
await _emailSender.SendEmailAsync(email, subject, textMessage, htmlMessage);
EmailStatusMessage = "Send test email was successful.";
return Page();
}
}
The result of my test.
Ken Haggerty
Created 02/22/19
Updated 02/22/19 16:38 GMT
Log In or Reset Quota to read more.
Article Tags:
EmailSuccessfully completed. Thank you for contributing.
Contribute to enjoy content without advertisments.
Something went wrong. Please try again.
Not accepting new comments.
Your comment has been submitted.
You will be emailed when approved.
Submit your comment. Comments are moderated.
Comments(0)