mirror of https://github.com/abpframework/abp.git
EngincanV
6 years ago
11 changed files with 364 additions and 0 deletions
@ -0,0 +1,364 @@ |
|||||
|
# Replacing Email Template and Sending Emails |
||||
|
|
||||
|
## Introduction |
||||
|
|
||||
|
Hi, in this step by step article, I will show you how you can replace the existing templates and how you can send emails by using the replaced templates. |
||||
|
|
||||
|
## Creating the Solution |
||||
|
|
||||
|
Before starting to development, we need to create a solution named `TemplateReplace` (or whatever you want). We can download a new startup template by using [ABP CLI](https://docs.abp.io/en/abp/latest/CLI) : |
||||
|
|
||||
|
````bash |
||||
|
abp new TemplateReplace |
||||
|
```` |
||||
|
|
||||
|
Our project boilerplate will be ready after the download is finished. Then, open the solution in the Visual Studio (or your favorite IDE). |
||||
|
|
||||
|
Run the `TemplateReplace.DbMigrator` application as below to create the database and seed initial data (which creates the admin user, admin role, permissions etc.). |
||||
|
|
||||
|
 |
||||
|
|
||||
|
* Left click to `TemplateReplace.DbMigrator` and choose the `Debug`. |
||||
|
|
||||
|
 |
||||
|
|
||||
|
* After that, click the `Start new instance` option to start the database migrations. |
||||
|
|
||||
|
 |
||||
|
|
||||
|
Then we can run the `TemplateReplace.Web` project to see our application working. |
||||
|
|
||||
|
> _Default login credentials for admin: username is **admin** and password is **1q2w3E\***_ |
||||
|
|
||||
|
## Starting the Development |
||||
|
|
||||
|
First thing we need to do is, creating a email service to sending emails. ABP Framework provides `IEmailSender` service that is used to send emails. |
||||
|
|
||||
|
### Step - 1 |
||||
|
|
||||
|
Create an `Email` folder in the `TemplateReplace.Application.Contracts` project and add a interface named `IEmailService` inside of it : |
||||
|
|
||||
|
```csharp |
||||
|
using System.Threading.Tasks; |
||||
|
|
||||
|
namespace TemplateReplace.Email |
||||
|
{ |
||||
|
public interface IEmailService |
||||
|
{ |
||||
|
Task<string> SendAsync(); |
||||
|
} |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
### Step - 2 |
||||
|
|
||||
|
Create an `Email` folder in the `TemplateReplace.Application` project and add a class named `EmailService` inside of it to implement the `IEmailService` interface. |
||||
|
|
||||
|
```csharp |
||||
|
using System.Threading.Tasks; |
||||
|
using Volo.Abp.DependencyInjection; |
||||
|
using Volo.Abp.Emailing; |
||||
|
using Volo.Abp.Emailing.Templates; |
||||
|
using Volo.Abp.TextTemplating; |
||||
|
|
||||
|
namespace TemplateReplace.Email |
||||
|
{ |
||||
|
public class EmailService : IEmailService, ITransientDependency |
||||
|
{ |
||||
|
private readonly IEmailSender _emailSender; |
||||
|
private readonly ITemplateRenderer _templateRenderer; |
||||
|
|
||||
|
public EmailService(IEmailSender emailSender, ITemplateRenderer templateRenderer) |
||||
|
{ |
||||
|
_emailSender = emailSender; |
||||
|
_templateRenderer = templateRenderer; |
||||
|
} |
||||
|
|
||||
|
public async Task<string> SendAsync() |
||||
|
{ |
||||
|
var emailBody = await _templateRenderer.RenderAsync( |
||||
|
StandardEmailTemplates.Message, |
||||
|
new |
||||
|
{ |
||||
|
message = "This is email body..." |
||||
|
} |
||||
|
); |
||||
|
|
||||
|
await _emailSender.SendAsync( |
||||
|
"from_email@abp.io", |
||||
|
"target_email@abp.io", |
||||
|
"Subject", |
||||
|
emailBody |
||||
|
); |
||||
|
|
||||
|
return emailBody; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
* ABP framework provides a strong and flexible [text templating system](https://docs.abp.io/en/abp/latest/Text-Templating). So, we can use the text templating system to create dynamic email contents. |
||||
|
|
||||
|
* To create an email content, we need to inject `ITemplateRenderer` and use the `RenderAsync` method to render a template. |
||||
|
|
||||
|
* We've used `StandardEmailTemplates.Message` as standart email template. This provides us a standard and simple message template to send mails. |
||||
|
|
||||
|
* The resulting email body should be like shown below: |
||||
|
```html |
||||
|
<!DOCTYPE html> |
||||
|
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> |
||||
|
<head> |
||||
|
<meta charset="utf-8" /> |
||||
|
</head> |
||||
|
<body> |
||||
|
This is email body... |
||||
|
</body> |
||||
|
</html> |
||||
|
``` |
||||
|
|
||||
|
### Step - 3 |
||||
|
|
||||
|
* Now we need to create a user interface to be able to see the standard email template. To do this quickly, open your existing `Index.cshtml.cs` in your `TemplateReplace.Web` project. It's under the **Pages** folder. And copy-paste the below content. |
||||
|
|
||||
|
```csharp |
||||
|
using TemplateReplace.Email; |
||||
|
|
||||
|
namespace TemplateReplace.Web.Pages |
||||
|
{ |
||||
|
public class IndexModel : TemplateReplacePageModel |
||||
|
{ |
||||
|
private readonly IEmailService _emailService; |
||||
|
public string EmailBody { get; set; } |
||||
|
|
||||
|
public IndexModel(IEmailService emailService) |
||||
|
{ |
||||
|
_emailService = emailService; |
||||
|
} |
||||
|
|
||||
|
public async void OnGet() |
||||
|
{ |
||||
|
if(CurrentUser.IsAuthenticated) |
||||
|
{ |
||||
|
EmailBody = await _emailService.SendAsync(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
* Then, open your `Index.cshtml` file and set the content as below. |
||||
|
|
||||
|
```html |
||||
|
@page |
||||
|
@using Microsoft.AspNetCore.Mvc.Localization |
||||
|
@using TemplateReplace.Localization |
||||
|
@using Volo.Abp.Users |
||||
|
@model TemplateReplace.Web.Pages.IndexModel |
||||
|
@inject IHtmlLocalizer<TemplateReplaceResource> L |
||||
|
@inject ICurrentUser CurrentUser |
||||
|
@section styles { |
||||
|
<abp-style-bundle> |
||||
|
<abp-style src="/Pages/Index.css" /> |
||||
|
</abp-style-bundle> |
||||
|
} |
||||
|
@section scripts { |
||||
|
<abp-script-bundle> |
||||
|
<abp-script src="/Pages/Index.js" /> |
||||
|
</abp-script-bundle> |
||||
|
} |
||||
|
<div class="jumbotron text-center"> |
||||
|
<h1>@L["Welcome"]</h1> |
||||
|
<div class="row"> |
||||
|
<div class="col-md-6 mx-auto"> |
||||
|
<p>@L["LongWelcomeMessage"]</p> |
||||
|
<hr class="my-4" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<a href="https://abp.io?ref=tmpl" target="_blank" class="btn btn-primary px-4">abp.io</a> |
||||
|
@if (!CurrentUser.IsAuthenticated) |
||||
|
{ |
||||
|
<a abp-button="Primary" href="~/Account/Login" class="px-4"><i class="fa fa-sign-in"></i> @L["Login"]</a> |
||||
|
} |
||||
|
</div> |
||||
|
|
||||
|
<div class="email-content"> |
||||
|
@Html.Raw(Model.EmailBody) |
||||
|
</div> |
||||
|
``` |
||||
|
|
||||
|
* After all of this, we can run the `TemplateReplace.Web` application and logged in to see the standard email template. |
||||
|
|
||||
|
 |
||||
|
|
||||
|
* As we see above, `StandardEmailTemplates.Message` template works as expected. But we need to be sure about the mail has been sent or not. To achieve this, we can examine the **logs**. So, open the `Logs` folder (It's under **TemplateReplace .Web** folder). Inside of this folder, there is a file named `logs.txt`. When we open this file and examine the lines, we can see our email details as below (target email address, subject of mail and email body). |
||||
|
|
||||
|
 |
||||
|
|
||||
|
### Step - 4 |
||||
|
|
||||
|
* So far we've sent mail by using standard email template of ABP. But we can want to replace the email template with the new one. We can achieve this by following [the documentation](https://docs.abp.io/en/abp/latest/Text-Templating#replacing-the-existing-templates). |
||||
|
|
||||
|
* First thing we need to do is creating our new **email template**. So, create a folder named `Templates` and add `EmailLayout.cshtml` file inside of it. And copy-paste the below content. |
||||
|
|
||||
|
```html |
||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<style> |
||||
|
a { |
||||
|
text-decoration: none !important; |
||||
|
} |
||||
|
td img { |
||||
|
color: #0f3462; |
||||
|
} |
||||
|
|
||||
|
table { |
||||
|
max-width: 650px; |
||||
|
} |
||||
|
</style> |
||||
|
</head> |
||||
|
<body> |
||||
|
<div class="container"> |
||||
|
<table border="0" align="center" cellspacing="0" cellpadding="0" bgcolor="white" class="email-template"> |
||||
|
<tr> |
||||
|
<td> |
||||
|
<table border="0" cellspacing="0" cellpadding="0" style="color:#0f3462; font-family: sans-serif;"> |
||||
|
<tr> |
||||
|
<td> |
||||
|
<h2 style="text-align:center; margin: 0px; padding-bottom: 25px; margin-top: 25px;"> |
||||
|
<span style="color:lightcoral"></span> |
||||
|
</h2> |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td> |
||||
|
<img src="https://image.flaticon.com/icons/svg/149/149314.svg" height="90px" style="display:block; margin:auto;padding-bottom: 25px;"/> |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td style="text-align: center;"> |
||||
|
<h1 style="margin: 0px;padding-bottom: 25px; color: #E90052">ABP Community</h1> |
||||
|
<h2 style="margin: 0px;padding-bottom: 25px;font-size:22px;">Share your experiences with the ABP Framework!</h2> |
||||
|
<p style=" margin: 0px 40px;padding-bottom: 25px;line-height: 2; font-size: 15px;"> |
||||
|
ABP is an <a href="https://github.com/abpframework">open source</a> and community driven project. This guide is aims to help anyone wants to contribute to the project. |
||||
|
</p> |
||||
|
<p style=" margin: 0px 32px;padding-bottom: 25px;line-height: 2; font-size: 15px;"> |
||||
|
If you want to write articles or "how to" guides related to the ABP Framework and ASP.NET Core, please submit your article to the <a href="https://community.abp.io/">community.abp.io</a> web site. |
||||
|
</p> |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td> |
||||
|
<button type="button" style="background-color:#E90052; color:white; padding:15px 97px; outline: none; display: block; margin: auto; border-radius: 31px; |
||||
|
font-weight: bold; margin-top: 25px; margin-bottom: 25px; border: none; text-transform:uppercase; "> |
||||
|
<a style="text-decoration: none; color:white" href="https://community.abp.io/articles/submit">Contribute</a> |
||||
|
</button> |
||||
|
</td> |
||||
|
</tr> |
||||
|
<tr style="text-align:center;"> |
||||
|
<td> |
||||
|
<a href="https://github.com/abpframework/abp" style="color: black"> |
||||
|
<i class="fab fa-github fa-2x" style="padding: 20px"></i> |
||||
|
</a> |
||||
|
<a href="https://stackoverflow.com/questions/tagged/abp" style="color:orange;"> |
||||
|
<i style="padding: 20px" class="fab fa-stack-overflow fa-2x"></i> |
||||
|
</a> |
||||
|
<a href="https://twitter.com/abpframework"> |
||||
|
<i class="fab fa-twitter fa-2x" style="padding: 20px"></i> |
||||
|
</a> |
||||
|
</td> |
||||
|
</tr> |
||||
|
</table> |
||||
|
</td> |
||||
|
</tr> |
||||
|
</table> |
||||
|
</div> |
||||
|
</body> |
||||
|
</html> |
||||
|
``` |
||||
|
|
||||
|
* Then we need to make the template file as "Embedded Resource". We can do this as below. |
||||
|
|
||||
|
* First left click to **EmailLayout.cshtml** and choose `Properties`. |
||||
|
|
||||
|
 |
||||
|
|
||||
|
* Then be sure about build action is **Embedded resource**. |
||||
|
|
||||
|
 |
||||
|
|
||||
|
### Step - 5 (Replacing the Email Template) |
||||
|
|
||||
|
* To replace the current email template with our new email template, we need to override it. To achieve this, create a class in `TemplateReplace.Web` and fill it with the below content. |
||||
|
|
||||
|
```csharp |
||||
|
using Volo.Abp.DependencyInjection; |
||||
|
using Volo.Abp.Emailing.Templates; |
||||
|
using Volo.Abp.TextTemplating; |
||||
|
|
||||
|
namespace TemplateReplace.Web |
||||
|
{ |
||||
|
public class EmailTemplateDefinitionProvider : TemplateDefinitionProvider, ITransientDependency |
||||
|
{ |
||||
|
public override void Define(ITemplateDefinitionContext context) |
||||
|
{ |
||||
|
var emailLayoutTemplate = context.GetOrNull(StandardEmailTemplates.Message); |
||||
|
|
||||
|
emailLayoutTemplate |
||||
|
.WithVirtualFilePath( |
||||
|
"/Templates/EmailLayout.cshtml", |
||||
|
isInlineLocalized: true |
||||
|
); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
``` |
||||
|
|
||||
|
* In here we've created a template definition provider class that gets the email layout template and changes the virtual file path for the template. |
||||
|
|
||||
|
* This approach allows us to locate templates in any folder instead of the folder defined by the depended module. |
||||
|
|
||||
|
### Step - 6 |
||||
|
|
||||
|
* Lastly, we need to configure the [virtual file system](https://docs.abp.io/en/abp/latest/Virtual-File-System). To do this open your `TemplateReplaceWebModule` in `TemplateReplace.Web` and update the `ConfigureVirtualFileSystem` method as below. |
||||
|
|
||||
|
```csharp |
||||
|
//... |
||||
|
private void ConfigureVirtualFileSystem(IWebHostEnvironment hostingEnvironment) |
||||
|
{ |
||||
|
if (hostingEnvironment.IsDevelopment()) |
||||
|
{ |
||||
|
Configure<AbpVirtualFileSystemOptions>(options => |
||||
|
{ |
||||
|
options.FileSets.AddEmbedded<TemplateReplaceWebModule>(); //to replace the standard email template |
||||
|
|
||||
|
//... |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
//... |
||||
|
``` |
||||
|
|
||||
|
* And now when we start the application, we need to see the new email template like as below. |
||||
|
|
||||
|
 |
||||
|
|
||||
|
## Text Template Management |
||||
|
|
||||
|
 |
||||
|
|
||||
|
* ABP Commercial's [Text Template Management](https://commercial.abp.io/modules/Volo.TextTemplateManagement) module is really fascinating. It makes it super easy to stores and edits template contents. We can list all templates on a page, editing them, localizing them, and so on. |
||||
|
|
||||
|
 |
||||
|
|
||||
|
* ABP Commercial's text template management module, allows us to modify a template through the UI. |
||||
|
|
||||
|
* I highly recommend you to [check it out](https://commercial.abp.io/modules/Volo.TextTemplateManagement). |
||||
|
|
||||
|
## References |
||||
|
|
||||
|
* [Text Templating](https://docs.abp.io/en/abp/latest/Text-Templating) |
||||
|
* [Emailing](https://docs.abp.io/en/abp/latest/Emailing) |
||||
|
* [Virtual File System](https://docs.abp.io/en/abp/latest/Virtual-File-System) |
||||
|
After Width: | Height: | Size: 43 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 6.6 KiB |
|
After Width: | Height: | Size: 61 KiB |
|
After Width: | Height: | Size: 100 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 92 KiB |
|
After Width: | Height: | Size: 65 KiB |
|
After Width: | Height: | Size: 61 KiB |
|
After Width: | Height: | Size: 91 KiB |
Loading…
Reference in new issue