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

2 Following


Comment Count = 2

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

how can i get the soft copy

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

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