ASP.NET Core中优雅实现带样式的邮件确认功能

方案1：使用Razor视图模板生成邮件内容 #

这是ASP.NET Core中最适配的解决方案，既能保留HTML的格式可读性，又能自然嵌入C#动态逻辑（比如编码后的回调链接）。

步骤： #

1. 创建Razor视图模板
   在项目中新建Views/EmailTemplates文件夹，添加VerifyEmail.cshtml视图文件，编写带完整样式的邮件HTML，通过模型传递动态数据：

   @model VerifyEmailModel
   <!DOCTYPE html>
   <html lang="zh-CN">
   <head>
       <meta charset="UTF-8">
       <title>@Model.Title</title>
       <style>
           .email-container {
               max-width: 600px;
               margin: 0 auto;
               padding: 20px;
               font-family: Arial, sans-serif;
               border: 1px solid #eee;
               border-radius: 8px;
           }
           .verify-btn {
               display: inline-block;
               padding: 12px 24px;
               background-color: #007bff;
               color: white;
               text-decoration: none;
               border-radius: 4px;
               margin: 20px 0;
           }
           .footer {
               margin-top: 30px;
               font-size: 12px;
               color: #666;
           }
       </style>
   </head>
   <body>
       <div class="email-container">
           <h2>欢迎注册！</h2>
           <p>请点击下方按钮完成邮箱验证：</p>
           <a href="@Model.CallbackUrl" class="verify-btn">验证邮箱</a>
           <p>如果按钮无法点击，请复制以下链接到浏览器打开：</p>
           <p>@Model.CallbackUrl</p>
           <div class="footer">
               <p>此邮件为系统自动发送，请勿回复。</p>
           </div>
       </div>
   </body>
   </html>
   

   对应的模型类：

   public class VerifyEmailModel
   {
       public string Title { get; set; }
       public string CallbackUrl { get; set; }
   }
   

2. 实现Razor视图渲染服务
   创建一个IEmailTemplateRenderer接口和实现类，用于将Razor视图渲染为HTML字符串：

   public interface IEmailTemplateRenderer
   {
       Task<string> RenderTemplateAsync<TModel>(string viewName, TModel model);
   }
   
   public class EmailTemplateRenderer : IEmailTemplateRenderer
   {
       private readonly IRazorViewEngine _razorViewEngine;
       private readonly ITempDataProvider _tempDataProvider;
       private readonly IServiceProvider _serviceProvider;
   
       public EmailTemplateRenderer(IRazorViewEngine razorViewEngine, ITempDataProvider tempDataProvider, IServiceProvider serviceProvider)
       {
           _razorViewEngine = razorViewEngine;
           _tempDataProvider = tempDataProvider;
           _serviceProvider = serviceProvider;
       }
   
       public async Task<string> RenderTemplateAsync<TModel>(string viewName, TModel model)
       {
           var actionContext = new ActionContext(new DefaultHttpContext { RequestServices = _serviceProvider }, new RouteData(), new ActionDescriptor());
   
           using var sw = new StringWriter();
           var viewResult = _razorViewEngine.FindView(actionContext, viewName, false);
   
           if (!viewResult.Success)
           {
               throw new InvalidOperationException($"找不到视图：{viewName}");
           }
   
           var viewDictionary = new ViewDataDictionary<TModel>(new EmptyModelMetadataProvider(), new ModelStateDictionary())
           {
               Model = model
           };
   
           var viewContext = new ViewContext(
               actionContext,
               viewResult.View,
               viewDictionary,
               new TempDataDictionary(actionContext.HttpContext, _tempDataProvider),
               sw,
               new HtmlHelperOptions()
           );
   
           await viewResult.View.RenderAsync(viewContext);
           return sw.ToString();
       }
   }
   

3. 注册服务并使用
   在Program.cs中注册服务：

   builder.Services.AddScoped<IEmailTemplateRenderer, EmailTemplateRenderer>();
   

   发送邮件时调用渲染服务：

   public async Task SendVerificationEmail(string email, string callbackUrl)
   {
       var encodedUrl = HtmlEncoder.Default.Encode(callbackUrl);
       var model = new VerifyEmailModel
       {
           Title = "邮箱验证",
           CallbackUrl = encodedUrl
       };
       var htmlContent = await _emailTemplateRenderer.RenderTemplateAsync("EmailTemplates/VerifyEmail", model);
       // 调用邮件发送方法传入email、标题、htmlContent
       await _emailSender.SendEmailAsync(email, "请验证您的邮箱", htmlContent);
   }
   

方案2：使用C#多行字符串+占位符替换 #

如果不想引入Razor视图的复杂度，可以用C#的逐字多行字符串保留HTML格式，通过占位符替换动态内容：

public string GenerateVerificationEmailHtml(string encodedCallbackUrl)
{
    return $@"
<!DOCTYPE html>
<html lang=""zh-CN"">
<head>
    <meta charset=""UTF-8"">
    <title>邮箱验证</title>
    <style>
        .email-container {{
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            font-family: Arial, sans-serif;
            border: 1px solid #eee;
            border-radius: 8px;
        }}
        .verify-btn {{
            display: inline-block;
            padding: 12px 24px;
            background-color: #007bff;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            margin: 20px 0;
        }}
        .footer {{
            margin-top: 30px;
            font-size: 12px;
            color: #666;
        }}
    </style>
</head>
<body>
    <div class=""email-container"">
        <h2>欢迎注册！</h2>
        <p>请点击下方按钮完成邮箱验证：</p>
        <a href=""{encodedCallbackUrl}"" class=""verify-btn"">验证邮箱</a>
        <p>如果按钮无法点击，请复制以下链接到浏览器打开：</p>
        <p>{encodedCallbackUrl}</p>
        <div class=""footer"">
            <p>此邮件为系统自动发送，请勿回复。</p>
        </div>
    </div>
</body>
</html>";
}

使用时直接调用生成HTML：

var encodedUrl = HtmlEncoder.Default.Encode(callbackUrl);
var htmlContent = GenerateVerificationEmailHtml(encodedUrl);
await _emailSender.SendEmailAsync(email, "请验证您的邮箱", htmlContent);

方案3：嵌入式HTML模板文件 #

将HTML模板作为嵌入式资源存储，读取后替换占位符，实现代码与HTML分离：

1. 创建HTML模板文件
   在项目中新建EmailTemplates/verify-email.html，编写带占位符的HTML：

   <!DOCTYPE html>
   <html lang="zh-CN">
   <head>
       <meta charset="UTF-8">
       <title>{{Title}}</title>
       <style>
           /* 完整样式 */
       </style>
   </head>
   <body>
       <div class="email-container">
           <h2>欢迎注册！</h2>
           <p>请点击下方按钮完成邮箱验证：</p>
           <a href="{{CallbackUrl}}" class="verify-btn">验证邮箱</a>
           <!-- 其他内容 -->
       </div>
   </body>
   </html>
   

2. 设置文件为嵌入式资源
   在文件属性中，将“生成操作”设置为“嵌入式资源”。

3. 读取模板并替换占位符

   public async Task<string> LoadEmailTemplateAsync(string templateName)
   {
       var assembly = Assembly.GetExecutingAssembly();
       var resourceName = $"YourProjectNamespace.EmailTemplates.{templateName}";
       using var stream = assembly.GetManifestResourceStream(resourceName);
       using var reader = new StreamReader(stream);
       return await reader.ReadToEndAsync();
   }
   
   public string ReplaceTemplatePlaceholders(string template, Dictionary<string, string> placeholders)
   {
       foreach (var placeholder in placeholders)
       {
           template = template.Replace($"{{{{{placeholder.Key}}}}}", placeholder.Value);
       }
       return template;
   }
   

   使用示例：

   var template = await LoadEmailTemplateAsync("verify-email.html");
   var placeholders = new Dictionary<string, string>
   {
       { "Title", "邮箱验证" },
       { "CallbackUrl", HtmlEncoder.Default.Encode(callbackUrl) }
   };
   var htmlContent = ReplaceTemplatePlaceholders(template, placeholders);
   await _emailSender.SendEmailAsync(email, "请验证您的邮箱", htmlContent);
   

额外注意事项 #

• 邮件客户端对CSS支持有限，建议优先使用内联样式，或使用工具将外部CSS转为内联样式（开发时可写外部样式，预处理后再放入模板）。
• 避免使用复杂的CSS选择器（如后代选择器），尽量使用类选择器或直接内联样式。

内容的提问来源于stack exchange，提问作者David