"> ارسال Email Template در ASP.NET Core | آمورش ASP.NET Core | ام اس پی سافت

ارسال Email Template در ASP.NET Core

Email Template

در این مقاله، نحوه ی ارسال ایمیل را با استفاده از Email Template در ASP.NET Core و سی شارپ خواهید آموخت.تا پایان مقاله همراه ما باشید.

در این مقاله، نحوه ی ارسال ایمیل را با استفاده از یک فایل Template در ASP.NET Core Application مورد بحث قرار خواهیم داد.

ارسال ایمیل با استفاده از فایل Template مشابه با ارسال ایمیل با استفاده از متن ساده می باشد.

تنها تفاوت موجود این است که اکنون، منبع محتوا به جای محتوای مستقیم برای ایمیل، یک فایل متنی می باشد.

اگر نمی دانید چطور در برنامه های ASP.NET Core ایمیل ارسال کنید، لطفا به مقاله ی پیشین من، تنظیم ایمیل سرویس در ASP.NET Core با استفاده از MailKit، مراجعه کنید.

بیایید فرض کنیم که از قبل سرویس ایمیل را در برنامه ی ASP.NET Core پیکربندی کرده ایم.

شاخص ها

  1.  ایجاد یک قالب ایمیل ساده.
  2.  پیکربندی تنظیمات ایمیل در ASP.NET Core Application.
  3. خواندن محتوا از قالب ایمیل با استفاده از StreamReader()
  4. شخصی سازی محتوای ایمیل
  5. ارسال ایمیل به کاربر

ایجاد یک قالب ایمیل ساده

فایل قالب را بطور جداگانه نگهداری خواهیم کرد تا بتوانیم در هر زمان، طراحی فایل و محتوای آن را تغییر دهیم.

بیایید این فایل های قالب را در بخش wwwroot => Templates => EmailTemplate نگه داریم.

  1. برای این مرحله، یک پوشه ی جدید به نام Templates در پوشه ی wwwroot ایجاد کنید.
  2. پوشه ای جدید به نام Email Template در پوشه ی Templates ایجاد کنید.
  3. یک آیتم جدید در Email Template اضافه کنید (بر روی پوشه ی Email Template راست کلیک کرده و Add New Item را انتخاب کنید).
  4. ASP.NET Core و سپس HTML Page را انتخاب کنید.
  5. نامی برای فایل HTML انتخاب کنید.

در این مثال، بصورت Welcome_EmailTemplate.html نام گذاری شده.  (اما در راستای اهداف نمایشی از Confirm_Account_Registration.html استفاده خواهیم کرد که طراحی آن نیز همان است اما نام فایل آن متفاوت می باشد).

ارسال Email Template در ASP.NET Core

هنگامیکه Email Template ها را ایجاد کردید، Solution Explorer بصورت زیر در خواهد آمد. (در مثال ما، ۵ Email Template وجود دارد)

Solution Explorer

حال می توانید کدهای طراحی خود را با استفاده از CSS و HTML درون خطی (inline) جهت ایجاد Email بنویسید.

در مثال ما، قالب به این شکل است :

Email Template

کد نمونه ی Email Template فوق در ادامه آورده شده است.

قطعه کد:

<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>Welcome Email from TCP</title>  
</head>  
  
<body>  
    <table width="100%" border="0" cellspacing="0" cellpadding="0">  
        <tr>  
            <td align="center" valign="top" bgcolor="#ffe77b" style="background-color:#ffe77b;">  
                <br>  
                <br>  
                <table width="600" border="0" cellspacing="0" cellpadding="0">  
                    <tr>  
                        <td height="70" align="left" valign="middle"></td>  
                    </tr>  
                    <tr>  
                        <td align="left" valign="top"><img src="http://localhost:2131/Templates/EmailTemplate/images/top.png" width="600" height="13" style="display:block;"></td>  
                    </tr>  
                    <tr>  
                        <td align="left" valign="top" bgcolor="#564319" style="background-color:#564319; font-family:Arial, Helvetica, sans-serif; padding:10px;">  
                            <div style="font-size:36px; color:#ffffff;">  
                                <b>{0}</b>  
                            </div>  
                            <div style="font-size:13px; color:#a29881;">  
                                <b>{1} : ASP.NET Core Demp App</b>  
                            </div>  
                        </td>  
                    </tr>  
                    <tr>  
                        <td align="left" valign="top" bgcolor="#ffffff" style="background-color:#ffffff;">  
                            <table width="100%" border="0" cellspacing="0" cellpadding="0">  
                                <tr>  
                                    <td align="center" valign="middle" style="padding:10px; color:#564319; font-size:28px; font-family:Georgia, 'Times New Roman', Times, serif;">  
                                        Congratulations! <small>You are registered.</small>  
                                    </td>  
                                </tr>  
                            </table>  
                            <table width="95%" border="0" align="center" cellpadding="0" cellspacing="0">  
                                <tr>  
                                    <td width="40%" align="center" valign="middle" style="padding:10px;">  
                                        <img src="http://localhost:2131/Templates/EmailTemplate/images/Weak_Password.gif" width="169" height="187" style="display:block">  
                                    </td>  
                                    <td align="left" valign="middle" style="color:#525252; font-family:Arial, Helvetica, sans-serif; padding:10px;">  
                                        <div style="font-size:16px;">  
                                            Dear {2},  
                                        </div>  
                                        <div style="font-size:12px;">  
                                            Thank you for showing your interest  in  our website.  
                                            All you need to do is click the button below (it only takes a few seconds).  
                                            You won’t be asked to log in to your account – we're simply verifying ownership of this email address.  
                                            <hr>  
                                            <center>  
  
                                                <button type="button" title="Confirm Account Registration" style="background: #1b97f1">  
                                                    <a href="{6}" style="font-size:22px; padding: 10px; color: #ffffff">  
                                                        Confirm Email Now  
                                                    </a>  
                                                </button>  
  
                                            </center>  
                                        </div>  
                                    </td>  
                                </tr>  
                            </table>  
                            <table width="100%" border="0" cellspacing="0" cellpadding="0">  
                                <tr>  
                                    <td align="center" valign="middle" style="padding:5px;">  
                                        <img src="http://localhost:2131/Templates/EmailTemplate/images/divider.gif" width="566" height="30">  
                                    </td>  
                                </tr>  
                            </table>  
                            <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="margin-bottom:15px;">  
                                <tr>  
                                    <td align="left" valign="middle" style="padding:15px; font-family:Arial, Helvetica, sans-serif;">  
                                        <div style="font-size:20px; color:#564319;">  
                                            <b>Please keep your credentials confidential for future use. </b>  
                                        </div>  
                                        <div style="font-size:16px; color:#525252;">  
                                            <b>Email         :</b> {2}  
                                            <br />  
                                            <b>Username :</b> {3}  
                                            <br />  
                                            <b>Password :</b> {4}  
                                        </div>  
                                    </td>  
                                </tr>  
                            </table>  
                            <table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-bottom:10px;">  
                                <tr>  
                                    <td align="left" valign="middle" style="padding:15px; background-color:#564319; font-family:Arial, Helvetica, sans-serif;">  
                                        <div style="font-size:20px; color:#fff;">  
                                            <b>Update your password now.</b>  
                                        </div>  
                                        <div style="font-size:13px; color:#ffe77b;">  
                                            Weak passwords get stolen and lead to hacked accounts. Celebrate World Password Day with a new, strong password.  
                                            <br>  
                                            <br>  
                                            <a href="#" style="color:#ffe77b; text-decoration:underline;">CLICK HERE</a> TO CHANGE PASSOWORD  
                                        </div>  
                                    </td>  
                                </tr>  
                            </table>  
                            <table width="95%" border="0" align="center" cellpadding="0" cellspacing="0">  
                                <tr>  
                                    <td width="50%" align="left" valign="middle" style="padding:10px;">  
                                        <table width="75%" border="0" cellspacing="0" cellpadding="4">  
                                            <tr>  
                                                <td align="left" valign="top" style="font-family:Verdana, Geneva, sans-serif; font-size:14px; color:#000000;">  
                                                    <b>Follow Us On</b>  
                                                </td>  
                                            </tr>  
                                            <tr>  
                                                <td align="left" valign="top" style="font-family:Verdana, Geneva, sans-serif; font-size:12px; color:#000000;">  
                                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">  
                                                        <tr>  
                                                            <td width="33%" align="left" valign="middle">  
                                                                <a href="https://twitter.com" title="Facebook">  
                                                                    <img src="http://localhost:2131/Templates/EmailTemplate/images/tweet48.png" width="48" height="48">  
                                                                </a>  
                                                            </td>  
                                                            <td width="34%" align="left" valign="middle">  
                                                                <a href="https://linkedin.com" title="Linkedin">  
                                                                    <img src="http://localhost:2131/Templates/EmailTemplate/images/in48.png" width="48" height="48">  
                                                                </a>  
                                                            </td>  
                                                            <td width="33%" align="left" valign="middle">  
                                                                <a href="https://facebook.com" title="Facebook">  
                                                                    <img src="http://localhost:2131/Templates/EmailTemplate/images/face48.png" width="48" height="48">  
                                                                </a>  
                                                            </td>  
                                                        </tr>  
                                                    </table>  
                                                </td>  
                                            </tr>  
                                        </table>  
                                    </td>  
                                    <td width="50%" align="left" valign="middle" style="color:#564319; font-size:11px; font-family:Arial, Helvetica, sans-serif; padding:10px;">  
                                        <b>Hours:</b> Mon-Fri 9:30-5:30, Sat. 9:30-3:00, Sun. Closed <br>  
                                        <b>Customer Support:</b> <a href="mailto:name@yourcompanyname.com" style="color:#564319; text-decoration:none;">name@yourcompanyname.com</a><br>  
                                        <br>  
                                        <b>Company Address</b><br>  
                                        Company URL: <a href="http://www.yourcompanyname.com" target="_blank" style="color:#564319; text-decoration:none;">http://www.yourcompanyname.com</a>  
                                    </td>  
                                </tr>  
                            </table>  
                        </td>  
                    </tr>  
                    <tr>  
                        <td align="left" valign="top"><img src="http://localhost:2131/Templates/EmailTemplate/images/bot.png" width="600" height="37" style="display:block;"></td>  
                    </tr>  
                </table>  
                <br>  
                <br>  
            </td>  
        </tr>  
    </table>  
</body>  
</html>  

اکنون، Email Template ما آماده است.

تأیید مالکیت ایمیل کاربر هنگام ثبت نام

نیاز است یک ایمیل تأییدیه جهت تأیید مالکیت ایمیل، درست پس از ثبت نام اولیه ی کاربر با ایمیل خود در برنامه مان، به وی ارسال کنیم.

روند کار بدین صورت است:

  •  جمع آوری اطلاعات جزئی کاربر از فرم ثبت نام
  • متد Register از Account Controller از نوع [HttpPost]، با استفاده از کد زیر یک کاربر جدید ایجاد می کند.
//Take user details from Registration Form ie. model carries data from Registration form to here
var user = new ApplicationUser { UserName = model.Email, Email = model.Email };

//CreateAsync inside UserManager creates new user when userdetails and password supplied.
var result = await _userManager.CreateAsync(user, model.Password);
  •  تولید کد منحصر بفرد برای جزئیات کاربر جدید.
var code = await _userManager.GenerateEmailConfirmationTokenAsync(user);
  •  یک callbackUrl منحصر بفرد و تصادفی با استفاده از کد تولید شده و UserId تولید می شود.
var callbackUrl = Url.Action(nameof(ConfirmEmail), "Account", new { userId = user.Id, code = code }, protocol: HttpContext.Request.Scheme);
  •  ارسال callbackUrl به کاربر از طریق ایمیل.
string Message = "Please confirm your account by clicking <a href=\"" + callbackUrl + "\">here</a>";
//Send Email to User
await _emailSender.SendEmailAsync(model.Email, subject, messageBody);
  •  هنگامی که کاربر بر روی send callback URL کلیک می کند، مجدد به متد ConfirmEmail از Account Controller فرستاده می شود.
//Find User Details by userId
var user = await _userManager.FindByIdAsync(userId);
if (user == null)
{
return View("Error");
}
var result = await _userManager.ConfirmEmailAsync(user, code);
ViewData["Message"] = "Your email has been confirmed. Please Login now. ";
ViewData["MessageValue"] = "1";
  • این خط با جزئیات دریافت شده ی کاربر و کد از طریق callbackUrl مطابقت داشته و مقدار ConfirmedEmail را در پایگاه داده برابر true قرار می دهد.

حال، در حین این فرآیند، اگر بخواهیم با استفاده از Email Templateهای سفارشی خود ایمیل ارسال کنیم، باید:

  1. محتوای Email Template را بخوانیم.
  2. User Details دریافت شده از User Registration Form را بخوانیم.
  3. User Details را به محتویات Email Template بفرستیم.
  4. {۰}, {۱}, {۲} را با مقادیر مربوطه جایگزین کنیم.
  5. ایمیل را به کاربر ارسال کنیم. (در حال حاضر با استفاده از Mail Kit)

خواندن محتویات از فایل Template

اطلاعاتی در رابطه با web Hosting Environment که برنامه مان در آن اجرا می شود، بدست آورید.

      private readonly UserManager<ApplicationUser> _userManager;  
       private readonly SignInManager<ApplicationUser> _signInManager;  
       private readonly IEmailSender _emailSender;  
       private readonly ISmsSender _smsSender;  
       private readonly ILogger _logger;  
       private readonly string _externalCookieScheme;  
       private IHostingEnvironment _env;  
  
       public AccountController(  
           UserManager<ApplicationUser> userManager,  
           SignInManager<ApplicationUser> signInManager,  
           IOptions<IdentityCookieOptions> identityCookieOptions,  
           IEmailSender emailSender,  
           ISmsSender smsSender,  
           ILoggerFactory loggerFactory, 
 
           IHostingEnvironment env)  
       {  
           _userManager = userManager;  
           _signInManager = signInManager;  
           _externalCookieScheme = identityCookieOptions.Value.ExternalCookieAuthenticationScheme;  
           _emailSender = emailSender;  
           _smsSender = smsSender;  
           _logger = loggerFactory.CreateLogger<AccountController>(); 
 
           _env = env;  
       }   

پوشه ی wwwroot را بگیرید.

var webRoot = _env.WebRootPath; //get wwwroot Folder

TemplateFile واقع در wwwroot/Templates/EmailTemplate/Register_EmailTemplate.html را بگیرید.

//Get TemplateFile located at wwwroot/Templates/EmailTemplate/Register_EmailTemplate.html  
                    var pathToFile = _env.WebRootPath  
                            + Path.DirectorySeparatorChar.ToString()  
                            + "Templates"  
                            + Path.DirectorySeparatorChar.ToString()  
                            + "EmailTemplate"  
                            + Path.DirectorySeparatorChar.ToString()  
                            + "Confirm_Account_Registration.html";   

BodyBuilder() را مقداردهی اولیه کنید.

var builder = new BodyBuilder();

محتوای فایل Template را با استفاده از StreamReader خوانده و به BodyBuilder() الحاق کنید.

using (StreamReader SourceReader = System.IO.File.OpenText(pathToFile))
{

builder.HtmlBody = SourceReader.ReadToEnd();

}

ارسال مقدار و فرمت بندی محتوای Template با مقادیر پویا

  • از string.Format format item, dynamic values as parameters استفاده کنید. در مثال ما، مقادیر {x} در Templateها جهت جایگزینی با مقادیر پویا می باشند.
//{۰} : Subject  
//{۱} : Current DateTime  
//{۲} : Email  
//{۳} : Username  
//{۴} : Password  
//{۵} : Message  
//{۶} : callbackURL 

قطعه کد

string messageBody = string.Format(builder.HtmlBody,   
                        subject,  
                        String.Format("{0:dddd, d MMMM yyyy}", DateTime.Now),  
                        model.Email,   
                        model.Email,   
                        model.Password,   
                        Message,  
                        callbackUrl  
                        );  

ارسال ایمیل با استفاده از Mailkit:

اگر نمی دانید چگونه با استفاده از Mail kit در ASP.NET Core Application ها ایمیل ارسال کنید، لطفا به پست پیشین من مراجعه کنید.

برای زمان حال، از تنظیمات سرویس ایمیل گذر می کنیم.

await _emailSender.SendEmailAsync(model.Email, subject, messageBody);  
//Success Message ViewData["Message"] = $"Please confirm your account by clicking this link: <a href='{callbackUrl}' class='btn btn-primary'>Confirmation Link</a>";  
ViewData["MessageValue"] = "1";  

خط await _emailSender.SendEmailAsync mode.Email, subject, messageBody ; ایمیلی را به آدرس ایمیل کاربر ارسال خواهد کرد.

کد مورد استفاده در متد Register از Account Controller

// POST: /Account/Register  
        [HttpPost]  
        [AllowAnonymous]  
        [ValidateAntiForgeryToken]  
        public async Task<IActionResult> Register(RegisterViewModel model, string returnUrl = null)  
        {  
            ViewData["ReturnUrl"] = returnUrl;  
            if (ModelState.IsValid)  
            {  
                var user = new ApplicationUser { UserName = model.Email, Email = model.Email };  
                var result = await _userManager.CreateAsync(user, model.Password);  
  
                // var user = await _userManager.FindByEmailAsync(model.Email);  
                if (result.Succeeded)  
                {  
                    // Send an email with this link  
                    var code = await _userManager.GenerateEmailConfirmationTokenAsync(user);  
                    var callbackUrl = Url.Action(nameof(ConfirmEmail), "Account", new { userId = user.Id, code = code }, protocol: HttpContext.Request.Scheme);  
                    //Email from Email Template  
                    string Message = "Please confirm your account by clicking <a href=\"" + callbackUrl + "\">here</a>";  
                   // string body;  
  
                    var webRoot = _env.WebRootPath; //get wwwroot Folder  
  
                    //Get TemplateFile located at wwwroot/Templates/EmailTemplate/Register_EmailTemplate.html  
                    var pathToFile = _env.WebRootPath  
                            + Path.DirectorySeparatorChar.ToString()  
                            + "Templates"  
                            + Path.DirectorySeparatorChar.ToString()  
                            + "EmailTemplate"  
                            + Path.DirectorySeparatorChar.ToString()  
                            + "Confirm_Account_Registration.html";  
  
                    var subject = "Confirm Account Registration";  
  
                    var builder = new BodyBuilder();  
                    using (StreamReader SourceReader = System.IO.File.OpenText(pathToFile))  
                    {  
                        builder.HtmlBody = SourceReader.ReadToEnd();  
                    }  
                    //{۰} : Subject  
                    //{۱} : DateTime  
                    //{۲} : Email  
                    //{۳} : Username  
                    //{۴} : Password  
                    //{۵} : Message  
                    //{۶} : callbackURL  
  
                    string messageBody = string.Format(builder.HtmlBody,   
                        subject,  
                        String.Format("{0:dddd, d MMMM yyyy}", DateTime.Now),  
                        model.Email,   
                        model.Email,   
                        model.Password,   
                        Message,  
                        callbackUrl  
                        );  
  
  
                    await _emailSender.SendEmailAsync(model.Email, subject, messageBody);  
  
                    ViewData["Message"] = $"Please confirm your account by clicking this link: <a href='{callbackUrl}' class='btn btn-primary'>Confirmation Link</a>";  
                    ViewData["MessageValue"] = "1";  
  
                    _logger.LogInformation(3, "User created a new account with password.");  
                    return RedirectToLocal(returnUrl);  
                }  
                ViewData["Message"] = $"Error creating user. Please try again later";  
                ViewData["MessageValue"] = "0";  
                AddErrors(result);  
            }  
  
            // If we got this far, something failed, redisplay form  
            return View(model);  
        } 

اجرای برنامه و خروجی

  1. اکنون بیایید solution را rebuild کرده و برنامه را اجرا کنیم.
  2. بیایید به عنوان یک کاربر جدید در /Account/Register ثبت نام کنیم.

Email Template

هنگامی که به عنوان کاربر جدید ثبت نام می کنیم، یک ایمیل تأییدیه به ایمیل ثبت شده ارسال می شود.

با بررسی inbox ایمیل، ایمیلی به این صورت دریافت می کنیم.

Email Template

ایمیل شخصی سازی شده ی ارسال شده از Demo ASP.NET Core Application را دریافت می کنیم.

سناریویی که در آن به Email Templateها نیاز داریم

  •  ارسال ایمیل های شخصی سازی شده به همه ی کاربران/کاربران منتخب برای رویدادها و اخبار.
  • خبرنامه
  • اطلاعیه ها و فراخوانی رویدادها
  •  ایمیل خوش آمدگویی به کاربران جدید
  • گزارش ماهیانه ی خودکار به مدیران و کارکنان
  •  و بسیاری موارد دیگر….

خلاصه

تا به اینجا، نحوه ی ارسال ایمیل های شخصی سازی شده به کاربران را با استفاده از Email Template ها آموختیم.

  • پسورد: www.mspsoft.com
زهره سلطانیان

نوشته‌های مرتبط

دیدگاه‌ها

*
*

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.