MrJazsohanisharma

Implement a custom email template using MailKit in a Blazor application

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>&copy; 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

Create a utility to read and replace placeholders (like  {{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

Use a library like MailKit or System.Net.Mail to 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.

Post a Comment

If you have any questions or concerns, please let me know.

Previous Post Next Post