如何通过Asp.net SMTP发送含HTML/CSS/JS及图片的支付成功邮件模板？

Hey there! I’ve been in your exact spot before—you’ve got a polished HTML/CSS/JS payment success email template, and you want to send it via ASP.NET SMTP without shoving all that markup into your C# code. Good news: there’s a clean, maintainable way to do this that keeps your template separate and easy to update. Here’s how:

Step 1: Keep Your HTML Template as a Separate File #

First, save your complete payment success template as a standalone .html file (e.g., PaymentSuccessTemplate.html) in a dedicated folder like App_Data/Emails (for ASP.NET Framework) or wwwroot/Emails (for ASP.NET Core). This lets you edit the template directly (no C# code changes needed) and even let designers tweak it without touching backend code.

Your template can include placeholders for dynamic data—like {{UserName}}, {{OrderNumber}}, or {{PaymentAmount}}—that you’ll replace later with real user/order details.

Step 2: Read the Template File in Your C# Code #

Next, read the content of the HTML file into a string. The approach varies slightly between ASP.NET Framework and Core:

For ASP.NET Framework:

// Get the full path to your template
string templatePath = Server.MapPath("~/App_Data/Emails/PaymentSuccessTemplate.html");
// Read the template content
string emailBody = System.IO.File.ReadAllText(templatePath);

For ASP.NET Core:

First, inject IWebHostEnvironment into your controller/service, then:

// Combine the web root path with your template folder/file
var templatePath = Path.Combine(_webHostEnvironment.WebRootPath, "Emails", "PaymentSuccessTemplate.html");
// Read the template asynchronously
string emailBody = await System.IO.File.ReadAllTextAsync(templatePath);

Step 3: Replace Dynamic Placeholders #

Now swap out those placeholders with actual user-specific data. For simple cases, string.Replace() works great:

// Assume you have a User and Order object with these properties
emailBody = emailBody.Replace("{{UserName}}", currentUser.FullName)
                     .Replace("{{OrderNumber}}", order.OrderId.ToString())
                     .Replace("{{PaymentAmount}}", order.TotalAmount.ToString("C"))
                     .Replace("{{PaymentDate}}", DateTime.Now.ToString("MMMM dd, yyyy"));

For more complex templates, you could use a lightweight templating library like RazorEngine (for Framework) or even use Razor views to generate the body, but Replace() is perfect for most cases.

Step 4: Handle Images in the Email #

This is a common gotcha! If your template includes images (like a success icon or your logo), you have two reliable options:

Option A: Use Absolute URLs (Simpler)

Host your images on a public CDN or your website, then use full URLs in your HTML:

<img src="https://yourwebsite.com/images/success-icon.png" alt="Success" />

This is easy, but some email clients might block external images by default.

Option B: Embed Images (More Reliable)

Embed images directly into the email using LinkedResource (Framework) or MailKit’s LinkedResources (Core). Here’s how:

ASP.NET Framework Example:

// Create your MailMessage
var mailMessage = new MailMessage(
    "noreply@yourstore.com", 
    currentUser.Email, 
    "Your Payment Was Successful!", 
    emailBody
) { IsBodyHtml = true };

// Add the embedded image
string imagePath = Server.MapPath("~/App_Data/Images/success-icon.png");
LinkedResource successIcon = new LinkedResource(imagePath, "image/png");
successIcon.ContentId = "successIcon"; // Unique ID for the image

// Create an AlternateView for the HTML body and attach the image
var htmlView = AlternateView.CreateAlternateViewFromString(emailBody, null, MediaTypeNames.Text.Html);
htmlView.LinkedResources.Add(successIcon);
mailMessage.AlternateViews.Add(htmlView);

Then update your HTML template’s image tag to use the cid: scheme:

<img src="cid:successIcon" alt="Payment Successful" />

ASP.NET Core Example (Using MailKit):

MailKit is the recommended library for sending emails in Core (it’s more robust than the built-in System.Net.Mail). First, install the MailKit NuGet package. Then:

var message = new MimeMessage();
message.From.Add(new MailboxAddress("Your Store", "noreply@yourstore.com"));
message.To.Add(new MailboxAddress(currentUser.FullName, currentUser.Email));
message.Subject = "Your Payment Was Successful!";

var bodyBuilder = new BodyBuilder();
bodyBuilder.HtmlBody = emailBody;

// Embed the image
var successIcon = bodyBuilder.LinkedResources.Add(
    Path.Combine(_webHostEnvironment.WebRootPath, "Images", "success-icon.png")
);
successIcon.ContentId = MimeUtils.GenerateMessageId(); // Generate a unique ID

// Update your HTML to use cid:[ContentId]
// Example: <img src="cid:@successIcon.ContentId" alt="Success" />

message.Body = bodyBuilder.ToMessageBody();

// Send via SMTP
using (var client = new SmtpClient())
{
    await client.ConnectAsync("smtp.yourprovider.com", 587, SecureSocketOptions.StartTls);
    await client.AuthenticateAsync("your-smtp-username", "your-smtp-password");
    await client.SendAsync(message);
    await client.DisconnectAsync(true);
}

Step 5: Send the Email via SMTP #

Finally, configure your SMTP settings and send the message. For ASP.NET Framework, use SmtpClient:

using (var smtpClient = new SmtpClient("smtp.yourprovider.com", 587))
{
    smtpClient.Credentials = new System.Net.NetworkCredential("your-username", "your-password");
    smtpClient.EnableSsl = true;
    smtpClient.Send(mailMessage);
}

For Core, we already covered the MailKit approach above.

Quick Tips to Avoid Headaches #

• Email Compatibility: Most email clients (like Gmail, Outlook) don’t support external CSS or modern JS. Stick to inline CSS, table-based layouts, and avoid JS entirely in your template.
• Test First: Use tools like Mailtrap to test your emails without sending them to real users—this helps you catch layout issues or spam flags early.
• Escape Special Characters: If user data might include ampersands (&) or angle brackets, use HttpUtility.HtmlEncode() on the values before replacing placeholders to prevent broken HTML.

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