Extending the EmailSender to Include a Html Template


Ken Haggerty
Created 02/22/2019 - Updated 02/22/2019 16:38

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:
From MS Docs. @ (C# Reference)
For GANGA:

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.

Templated Html Email

Article Tags:

Email

Comment Count = 2

Ibekwe Stanley
Ibekwe Stanley
Posted 06/21/2019 14:16
Member Since 06/21/2019

how can i get the soft copy

Ken Haggerty
Ken Haggerty *
Posted 06/25/2019 18:59
Member Since 01/04/2019

As a registered member, you may download the Bootstrap Native Project from Manage > Assets which implements the features from most of the articles.

Please log in to comment or follow.

Login Register
Follow to get web notifications when new comments are posted to this article.
Logged in users receive web notifications for new articles, topics and assets.
Web Notifications