Sending emails from web applications is a critical feature for modern applications. It enhances user engagement, supports communication, and ensures the application delivers a professional and interactive experience.
To implement a custom email template using MailKit in a Blazor application, you can follow these steps:
1. Create the Email Template
Design an HTML template for your email. This can include inline styles to ensure compatibility across email clients.
Example EmailTemplate.html
:
<!DOCTYPE html> <html> <head> <style> body { font-family: Arial, sans-serif; background-color: #f4f4f9; margin: 0; padding: 20px; } .email-container { background-color: #ffffff; padding: 20px; border: 1px solid #ddd; border-radius: 5px; max-width: 600px; margin: auto; } .header { font-size: 24px; font-weight: bold; color: #333; } .content { margin-top: 20px; font-size: 16px; color: #555; } .footer { margin-top: 20px; font-size: 12px; color: #aaa; } </style> </head> <body> <div class="email-container"> <div class="header">Welcome to Our Service!</div> <div class="content"> <p>Dear {{UserName}},</p> <p>Thank you for joining our platform. We are excited to have you on board.</p> <p>If you have any questions, feel free to contact us.</p> </div> <div class="footer"> <p>© 2024 Our Service. All rights reserved.</p> </div> </div> </body> </html>
2. Embed the Template in the Application
You can use the template as a file or embed it as a string.
Option A: Store as File Save EmailTemplate.html in a folder, e.g., wwwroot/templates.
Option B: Embed as a Resource Add it as an embedded resource in your project.
3. Replace Placeholders with Data
{{UserName}}
) in the template.Example helper method:
using System.IO; using System.Reflection; public static class EmailTemplateHelper { public static string GetEmailTemplate(string templatePath, Dictionary<string, string> placeholders) { var template = File.ReadAllText(templatePath); foreach (var placeholder in placeholders) { template = template.Replace($"{{{{{placeholder.Key}}}}}", placeholder.Value); } return template; } }
4. Send the Email
Example using MailKit:
using MailKit.Net.Smtp; using MimeKit; public class EmailService { public async Task SendEmailAsync(string toEmail, string subject, string body) { var emailMessage = new MimeMessage(); emailMessage.From.Add(new MailboxAddress("Your Company", "your_email@example.com")); emailMessage.To.Add(new MailboxAddress(toEmail)); emailMessage.Subject = subject; emailMessage.Body = new TextPart("html") { Text = body }; using (var client = new SmtpClient()) { await client.ConnectAsync("smtp.example.com", 587, false); await client.AuthenticateAsync("your_username", "your_password"); await client.SendAsync(emailMessage); await client.DisconnectAsync(true); } } }
5. Integrate with Blazor
Use dependency injection to call the email service in your Blazor components or pages.
Example:
@inject EmailService EmailService <button @onclick="SendWelcomeEmail">Send Welcome Email</button> @code { private async Task SendWelcomeEmail() { var placeholders = new Dictionary<string, string> { { "UserName", "John Doe" } }; var templatePath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/templates/EmailTemplate.html"); var emailBody = EmailTemplateHelper.GetEmailTemplate(templatePath, placeholders); await EmailService.SendEmailAsync("user@example.com", "Welcome to Our Service!", emailBody); } }
Summary
- Create a reusable HTML email template.
- Use a helper method to inject dynamic data.
- Send the email using a reliable library like MailKit.
- Call the email service from your Blazor components.
This approach allows you to maintain clean separation between your email templates and application logic.