如何使用 ASP.NET Core 发送动态 HTML 电子邮件?

问题描述 投票:0回答:1

我有一个电子商务 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);

发送邮件后,我检查了它,但它看起来不像示例模板。如何制作类似的模板以及如何动态向该模板添加订单?

c# html css asp.net-core mailkit
1个回答
0
投票

您提供的模板还需要 bootstrap 和 jquery 的链接才能工作。我在您的示例代码中看不到引用。

尽管如此,在电子邮件中包含外部样式表或脚本并不是一个好主意,因为它们很可能会被接收电子邮件客户端阻止。

我建议选择带有内联css样式的纯html模板,它具有最好的兼容性,请参阅https://www.smashingmagazine.com/2017/01/introduction-building-sending-html-email-for-web-developers /#内联CSS

© www.soinside.com 2019 - 2024. All rights reserved.