Question posted in 
I have an e-commerce web application consisting of Blazor WASM for the client side, Blazor Server for administration, and Web API for integration with the database and services. After order completion, I am sending an email to the customer.
I am using ASP.NET Core Identity IEmailSender SendEmailAsync
There is no problem sending emails but I need a more professional email body. So I decided to use a template with some changes. Here is the sample template (Email Template)
There are 2 subjects I need to accomplish. Generating a similar look with CSS and how to deal with dynamic content in this template. If there are more than 1 order I have to somehow add them to the template.
Here is how I try to generate the template with CSS (not complete just a portion for simplicity);
var bodyBuilder = new BodyBuilder
{
HtmlBody = @"
<html>
<head>
<style>
body {
min-height: 100vh;
background-size: cover;
font-family: 'Lato', sans-serif;
color: rgba(116, 116, 116, 0.667);
background: linear-gradient(140deg , #fff , 50% , #BA68C8);
}
...
</style>
</head>
<body>
<div class='container-fluid my-5 d-flex justify-content-center'> <div class='card card-1'> <div class='card-header bg-white'> <div class='media flex-sm-row flex-column-reverse justify-content-between '> <div class='col my-auto'> <h4 class='mb-0'>Thanks for your Order,<span class='change-color'>@orderHeaderDTO.Name</span> !</h4> </div> <div class='col-auto text-center my-auto pl-0 pt-sm-4'> <img class='img-fluid my-auto align-items-center mb-0 pt-3' src='https://i.imgur.com/7q7gIzR.png' width='115' height='115'> <p class='mb-4 pt-0 Glasses'>Walk In Style</p> </div> </div> </div> <div class='card-body'> <div class='row justify-content-between mb-3'>
...
// Send the email
await _emailSender.SendEmailAsync(orderHeaderDTO.Email, "Order Confirmation", bodyBuilder.HtmlBody);
After sending the mail, I checked it but it did not look like the sample template. How can I make a similar template and how can I dynamically add orders to this template?
2
Answers
Here is how I solved my problem, hope it helps others as well.
Created a sample HTML page:
Here is my method to fill dynamic values
Here is the email:
I just need to figure out how to display the product image on the email. Hope someone can guide me.
The template that you provided also needs the links to bootstrap and jquery to work. I can not see there references in your sample code.
Nevertheless, it is not a good idea to include external stylesheets or scripts in an email because they will most likely be blocked by the receiving email client.
I recommend choosing a plain html template with inline css styles, which has the best compatibility, see https://www.smashingmagazine.com/2017/01/introduction-building-sending-html-email-for-web-developers/#inline-css