我有一个电子商务 Web 应用程序,其中包含用于客户端的 Blazor WASM、用于管理的 Blazor Server 以及用于与数据库和服务集成的 Web API。订单完成后,我将向客户发送电子邮件。 我正在使用
ASP.NET Core Identity IEmailSender SendEmailAsync
发送电子邮件没有问题,但我需要更专业的电子邮件正文。所以我决定使用一个经过一些更改的模板。这是示例模板(电子邮件模板)
我需要完成 2 个科目。使用 CSS 生成类似的外观以及如何处理此模板中的动态内容。如果订单数量超过 1 个,我必须以某种方式将它们添加到模板中。
这是我尝试使用 CSS 生成模板的方法(为了简单起见,仅完成一部分);
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);
发送邮件后,我检查了它,但它看起来不像示例模板。如何制作类似的模板以及如何动态向该模板添加订单?
您提供的模板还需要 bootstrap 和 jquery 的链接才能工作。我在您的示例代码中看不到引用。
尽管如此,在电子邮件中包含外部样式表或脚本并不是一个好主意,因为它们很可能会被接收电子邮件客户端阻止。
我建议选择带有内联css样式的纯html模板,它具有最好的兼容性,请参阅https://www.smashingmagazine.com/2017/01/introduction-building-sending-html-email-for-web-developers /#内联CSS