diff --git a/docs/en/Community-Articles/2020-09-09-Replacing-Email-Template-and-Sending-Emails/POST.md b/docs/en/Community-Articles/2020-09-09-Replacing-Email-Template-and-Sending-Emails/POST.md
new file mode 100644
index 0000000000..049171731b
--- /dev/null
+++ b/docs/en/Community-Articles/2020-09-09-Replacing-Email-Template-and-Sending-Emails/POST.md
@@ -0,0 +1,477 @@
+# Replacing Email Templates and Sending Emails
+
+## Introduction
+
+Hi, in this step by step article, we will send an email by using standard email template and then we will replace the standard email template with our new created template, thanks to [Text Templating System](https://docs.abp.io/en/abp/latest/Text-Templating#replacing-the-existing-templates) and [Virtual File System](https://docs.abp.io/en/abp/latest/Virtual-File-System). Let's start by explaining what these systems do.
+
+* 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 on a template and a model.
+
+* In this article, we will use `StandardEmailTemplates.Message` as standard email template. Then we will create a new template and replace the standard email template with our new template by using [Virtual File System](https://docs.abp.io/en/abp/latest/Virtual-File-System).
+
+* The `Virtual File System` makes it possible to manage files that do not physically exist on the file system. That means we can override `StandardEmailTemplates.Message` template by changing it's path with our new template's path.
+
+## Creating the Solution
+
+> ABP Framework offers startup templates to get into the business faster.
+
+In this article, I will create a new startup template and perform the operations on this template. But if you already have a project you don't need to create a new startup template, you can implement the following steps to your existing project. (These steps can be applied to any project. (MVC, Angular etc.))
+
+> If you have already a project you can skip this section.
+
+Before starting to development, we will create a solution named `TemplateReplace` (or whatever you want). We can create 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.).
+
+
+
+* Right 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 `Emailing` folder in the `TemplateReplace.Domain` project and add a class named `EmailService` inside of it.
+
+```csharp
+using System.Threading.Tasks;
+using Volo.Abp.DependencyInjection;
+using Volo.Abp.Emailing;
+using Volo.Abp.Emailing.Templates;
+using Volo.Abp.TextTemplating;
+
+namespace TemplateReplace.Emailing
+{
+ public class EmailService : ITransientDependency
+ {
+ private readonly IEmailSender _emailSender;
+ private readonly ITemplateRenderer _templateRenderer;
+
+ public EmailService(IEmailSender emailSender, ITemplateRenderer templateRenderer)
+ {
+ _emailSender = emailSender;
+ _templateRenderer = templateRenderer;
+ }
+
+ public async Task SendAsync(string targetEmail)
+ {
+ var emailBody = await _templateRenderer.RenderAsync(
+ StandardEmailTemplates.Message,
+ new
+ {
+ message = "ABP Framework provides IEmailSender service that is used to send emails."
+ }
+ );
+
+ await _emailSender.SendAsync(
+ targetEmail,
+ "Subject",
+ emailBody
+ );
+ }
+ }
+}
+```
+
+* 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
+
+
+
+
+
+
+ ABP Framework provides IEmailSender service that is used to send emails.
+
+
+```
+
+### Step - 2 (Configuring Email Settings)
+
+* Now, we need to configure some email settings by following [settings documentation](https://docs.abp.io/en/abp/latest/Settings#setting-values-in-the-application-configuration). For achieve this, open the `appsettings.json` file under `TemplateReplace.Web` and configure your email settings in **settings** section like below.
+
+
+
+* Here, I used Google's SMTP settings to send emails via Gmail. You can change these setting values by your need.
+
+> **Note:** If you want to use Google's SMTP server settings and send emails via Gmail, you should confirm [this](https://myaccount.google.com/u/0/lesssecureapps).
+
+### Step - 3
+
+* After that we need to open `TemplateReplaceDomainModule.cs` file and change its contents as below to sending real-time emails.
+
+```csharp
+using Microsoft.Extensions.DependencyInjection;
+using Microsoft.Extensions.DependencyInjection.Extensions;
+using TemplateReplace.MultiTenancy;
+using Volo.Abp.AuditLogging;
+using Volo.Abp.BackgroundJobs;
+using Volo.Abp.Emailing;
+using Volo.Abp.FeatureManagement;
+using Volo.Abp.Identity;
+using Volo.Abp.IdentityServer;
+using Volo.Abp.Modularity;
+using Volo.Abp.MultiTenancy;
+using Volo.Abp.PermissionManagement.Identity;
+using Volo.Abp.PermissionManagement.IdentityServer;
+using Volo.Abp.SettingManagement;
+using Volo.Abp.TenantManagement;
+
+namespace TemplateReplace
+{
+ [DependsOn(
+ typeof(TemplateReplaceDomainSharedModule),
+ typeof(AbpAuditLoggingDomainModule),
+ typeof(AbpBackgroundJobsDomainModule),
+ typeof(AbpFeatureManagementDomainModule),
+ typeof(AbpIdentityDomainModule),
+ typeof(AbpPermissionManagementDomainIdentityModule),
+ typeof(AbpIdentityServerDomainModule),
+ typeof(AbpPermissionManagementDomainIdentityServerModule),
+ typeof(AbpSettingManagementDomainModule),
+ typeof(AbpTenantManagementDomainModule),
+ typeof(AbpEmailingModule)
+ )]
+ public class TemplateReplaceDomainModule : AbpModule
+ {
+ public override void OnApplicationInitialization(ApplicationInitializationContext context)
+ {
+ var settingManager = context.ServiceProvider.GetService();
+ //encrypts the password on set and decrypts on get
+ settingManager.SetGlobalAsync(EmailSettingNames.Smtp.Password, "your_password");
+ }
+
+ public override void ConfigureServices(ServiceConfigurationContext context)
+ {
+ Configure(options =>
+ {
+ options.IsEnabled = MultiTenancyConsts.IsEnabled;
+ });
+
+ // #if DEBUG
+ // context.Services.Replace(ServiceDescriptor.Singleton());
+ // #endif
+ }
+ }
+}
+
+```
+
+* `NullEmailSender` is a built-in class that implements the `IEmailSender`, but writes email contents to the standard log system, rather than actually sending the emails. This class can be useful especially in development time where you generally don't want to send real emails. Therefore ABP framework defined this by default. But in our case we want to send real emails, so we must remove these lines or we must take it to the comment line.
+
+* `Abp.Mailing.Smtp.Password` must be an encrypted value. Therefore we used `SettingManager` in here to set the password. It internally **encrypts** the values on set and **decrypts** on get.
+
+* After all these steps, whenever we want to send an email, we can do it by using our `EmailService` class. We can inject this class and invoke the `SendAsync` method to sending email where its needed.
+
+After sending the email we should see the template like below.
+
+
+
+### Step - 4 (Defining New Template)
+
+* So far we've sent mail by using standard email template of ABP. But we may want to replace the email template with the new one. We can achieve this by following the `Text Templating` [documentation](https://docs.abp.io/en/abp/latest/Text-Templating#replacing-the-existing-templates).
+
+* In this article, I will create a email template by using free template generator named **Bee**. You can reach the free templates from [here](https://beefree.io/templates/free/).
+
+* When we find a template for our purpose, we can hover the link and click the **get started** button to edit the template. (I chose a template named "gdpr".)
+
+* Here, you can edit your template as below. (You can delete or add sections, edit texts, and so on.)
+
+
+
+> **Note:** After editing our template, we need to export it to reach our created template's content. You can see the **export** button top-right of the template editing page.
+
+* After choosing and editing our free template, we can create a new **email template** in our project. For this, create a folder named `Templates` under `Emailing` folder in `TemplateReplace.Domain` and add `EmailTemplate.tpl` file inside of it. And copy-paste the below content or your template's content.
+
+```tpl
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
ABP Community
+
+
+
+
+
Share your experiences with the ABP Framework! ABP is an open source and community driven project. This guide is aims to help anyone wants to contribute to the project.
+
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 community.abp.io web site.
+
+
+```
+
+* Then we need to make the template file as "Embedded Resource". We can do this as below.
+
+* First right click to **EmailTemplate.tpl** and choose `Properties`.
+
+
+
+* Then be sure about build action is **Embedded resource**.
+
+
+
+### Step - 4 (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 named `EmailTemplateDefinitionProvider` under `Emailing` folder in `TemplateReplace.Domain` and fill it with the below content.
+
+```csharp
+using Volo.Abp.DependencyInjection;
+using Volo.Abp.Emailing.Templates;
+using Volo.Abp.TextTemplating;
+
+namespace TemplateReplace.Emailing
+{
+ public class EmailTemplateDefinitionProvider : TemplateDefinitionProvider, ITransientDependency
+ {
+ public override void Define(ITemplateDefinitionContext context)
+ {
+ var emailLayoutTemplate = context.GetOrNull(StandardEmailTemplates.Message);
+
+ emailLayoutTemplate
+ .WithVirtualFilePath(
+ "/Emailing/Templates/EmailTemplate.tpl",
+ isInlineLocalized: true
+ );
+ }
+ }
+}
+```
+
+* In here we've created a template definition provider class that gets the email layout template and change 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. For more detail, check the [Virtual File System](https://docs.abp.io/en/abp/latest/Virtual-File-System).
+
+### Step - 5
+
+* Lastly, we need to configure the [Virtual File System](https://docs.abp.io/en/abp/latest/Virtual-File-System). To do this open your `TemplateReplaceDomainModule.cs` in `TemplateReplace.Domain` and update the content as below.
+
+```csharp
+using TemplateReplace.MultiTenancy;
+using Volo.Abp.AuditLogging;
+using Volo.Abp.BackgroundJobs;
+using Volo.Abp.Emailing;
+using Volo.Abp.FeatureManagement;
+using Volo.Abp.Identity;
+using Volo.Abp.IdentityServer;
+using Volo.Abp.Modularity;
+using Volo.Abp.MultiTenancy;
+using Volo.Abp.PermissionManagement.Identity;
+using Volo.Abp.PermissionManagement.IdentityServer;
+using Volo.Abp.SettingManagement;
+using Volo.Abp.TenantManagement;
+using Volo.Abp.VirtualFileSystem;
+
+namespace TemplateReplace
+{
+ [DependsOn(
+ typeof(TemplateReplaceDomainSharedModule),
+ typeof(AbpAuditLoggingDomainModule),
+ typeof(AbpBackgroundJobsDomainModule),
+ typeof(AbpFeatureManagementDomainModule),
+ typeof(AbpIdentityDomainModule),
+ typeof(AbpPermissionManagementDomainIdentityModule),
+ typeof(AbpIdentityServerDomainModule),
+ typeof(AbpPermissionManagementDomainIdentityServerModule),
+ typeof(AbpSettingManagementDomainModule),
+ typeof(AbpTenantManagementDomainModule),
+ typeof(AbpEmailingModule)
+ )]
+ public class TemplateReplaceDomainModule : AbpModule
+ {
+ public override void ConfigureServices(ServiceConfigurationContext context)
+ {
+ Configure(options =>
+ {
+ options.IsEnabled = MultiTenancyConsts.IsEnabled;
+ });
+
+ //Add this configuration
+ Configure(options =>
+ {
+ options.FileSets.AddEmbedded();
+ });
+ }
+ }
+}
+
+```
+
+* And now when we send a new email, we should see our newly defined template as the message like below.
+
+
+
+## Text Template Management
+
+* Generally, more than one e-mail is required in applications. We create email templates for **"password changes"** or **"welcome"** etc in our applications. In such cases, it is necessary to create different templates for each mail. ABP Commercial allows us to perform these operations on UI in a simple way. Text Template Management provides UI to easily create and manage email templates.
+
+
+
+* 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)
\ No newline at end of file
diff --git a/docs/en/Community-Articles/2020-09-09-Replacing-Email-Template-and-Sending-Emails/bee.gif b/docs/en/Community-Articles/2020-09-09-Replacing-Email-Template-and-Sending-Emails/bee.gif
new file mode 100644
index 0000000000..15a3a01e65
Binary files /dev/null and b/docs/en/Community-Articles/2020-09-09-Replacing-Email-Template-and-Sending-Emails/bee.gif differ
diff --git a/docs/en/Community-Articles/2020-09-09-Replacing-Email-Template-and-Sending-Emails/db-migrator-1.jpg b/docs/en/Community-Articles/2020-09-09-Replacing-Email-Template-and-Sending-Emails/db-migrator-1.jpg
new file mode 100644
index 0000000000..8a0c4c345b
Binary files /dev/null and b/docs/en/Community-Articles/2020-09-09-Replacing-Email-Template-and-Sending-Emails/db-migrator-1.jpg differ
diff --git a/docs/en/Community-Articles/2020-09-09-Replacing-Email-Template-and-Sending-Emails/db-migrator-2.jpg b/docs/en/Community-Articles/2020-09-09-Replacing-Email-Template-and-Sending-Emails/db-migrator-2.jpg
new file mode 100644
index 0000000000..4adc9614c3
Binary files /dev/null and b/docs/en/Community-Articles/2020-09-09-Replacing-Email-Template-and-Sending-Emails/db-migrator-2.jpg differ
diff --git a/docs/en/Community-Articles/2020-09-09-Replacing-Email-Template-and-Sending-Emails/db-migrator-3.jpg b/docs/en/Community-Articles/2020-09-09-Replacing-Email-Template-and-Sending-Emails/db-migrator-3.jpg
new file mode 100644
index 0000000000..16b365b8a5
Binary files /dev/null and b/docs/en/Community-Articles/2020-09-09-Replacing-Email-Template-and-Sending-Emails/db-migrator-3.jpg differ
diff --git a/docs/en/Community-Articles/2020-09-09-Replacing-Email-Template-and-Sending-Emails/email-last.jpg b/docs/en/Community-Articles/2020-09-09-Replacing-Email-Template-and-Sending-Emails/email-last.jpg
new file mode 100644
index 0000000000..898d75568f
Binary files /dev/null and b/docs/en/Community-Articles/2020-09-09-Replacing-Email-Template-and-Sending-Emails/email-last.jpg differ
diff --git a/docs/en/Community-Articles/2020-09-09-Replacing-Email-Template-and-Sending-Emails/embedded-resource-2.jpg b/docs/en/Community-Articles/2020-09-09-Replacing-Email-Template-and-Sending-Emails/embedded-resource-2.jpg
new file mode 100644
index 0000000000..1abdba48cb
Binary files /dev/null and b/docs/en/Community-Articles/2020-09-09-Replacing-Email-Template-and-Sending-Emails/embedded-resource-2.jpg differ
diff --git a/docs/en/Community-Articles/2020-09-09-Replacing-Email-Template-and-Sending-Emails/embedded-resource.jpg b/docs/en/Community-Articles/2020-09-09-Replacing-Email-Template-and-Sending-Emails/embedded-resource.jpg
new file mode 100644
index 0000000000..b03739e6c0
Binary files /dev/null and b/docs/en/Community-Articles/2020-09-09-Replacing-Email-Template-and-Sending-Emails/embedded-resource.jpg differ
diff --git a/docs/en/Community-Articles/2020-09-09-Replacing-Email-Template-and-Sending-Emails/inline-content.png b/docs/en/Community-Articles/2020-09-09-Replacing-Email-Template-and-Sending-Emails/inline-content.png
new file mode 100644
index 0000000000..cbbf188f37
Binary files /dev/null and b/docs/en/Community-Articles/2020-09-09-Replacing-Email-Template-and-Sending-Emails/inline-content.png differ
diff --git a/docs/en/Community-Articles/2020-09-09-Replacing-Email-Template-and-Sending-Emails/message.jpg b/docs/en/Community-Articles/2020-09-09-Replacing-Email-Template-and-Sending-Emails/message.jpg
new file mode 100644
index 0000000000..fe80c2ac0c
Binary files /dev/null and b/docs/en/Community-Articles/2020-09-09-Replacing-Email-Template-and-Sending-Emails/message.jpg differ
diff --git a/docs/en/Community-Articles/2020-09-09-Replacing-Email-Template-and-Sending-Emails/settings.jpg b/docs/en/Community-Articles/2020-09-09-Replacing-Email-Template-and-Sending-Emails/settings.jpg
new file mode 100644
index 0000000000..e60fdcc2db
Binary files /dev/null and b/docs/en/Community-Articles/2020-09-09-Replacing-Email-Template-and-Sending-Emails/settings.jpg differ
diff --git a/docs/en/Community-Articles/2020-09-09-Replacing-Email-Template-and-Sending-Emails/template-definitions.png b/docs/en/Community-Articles/2020-09-09-Replacing-Email-Template-and-Sending-Emails/template-definitions.png
new file mode 100644
index 0000000000..aaf46b353e
Binary files /dev/null and b/docs/en/Community-Articles/2020-09-09-Replacing-Email-Template-and-Sending-Emails/template-definitions.png differ
diff --git a/docs/en/Distributed-Event-Bus-Rebus-Integration.md b/docs/en/Distributed-Event-Bus-Rebus-Integration.md
new file mode 100644
index 0000000000..7499c1d837
--- /dev/null
+++ b/docs/en/Distributed-Event-Bus-Rebus-Integration.md
@@ -0,0 +1,65 @@
+# Distributed Event Bus Rebus Integration
+
+> This document explains **how to configure the [Rebus](http://mookid.dk/category/rebus/)** as the distributed event bus provider. See the [distributed event bus document](Distributed-Event-Bus.md) to learn how to use the distributed event bus system
+
+## Installation
+
+Use the ABP CLI to add [Volo.Abp.EventBus.Rebus](https://www.nuget.org/packages/Volo.Abp.EventBus.Rebus) NuGet package to your project:
+
+* Install the [ABP CLI](https://docs.abp.io/en/abp/latest/CLI) if you haven't installed before.
+* Open a command line (terminal) in the directory of the `.csproj` file you want to add the `Volo.Abp.EventBus.Rebus` package.
+* Run `abp add-package Volo.Abp.EventBus.Rebus` command.
+
+If you want to do it manually, install the [Volo.Abp.EventBus.Rebus](https://www.nuget.org/packages/Volo.Abp.EventBus.Rebus) NuGet package to your project and add `[DependsOn(typeof(AbpEventBusRebusModule))]` to the [ABP module](Module-Development-Basics.md) class inside your project.
+
+## Configuration
+
+You can configure using the standard [configuration system](Configuration.md), like using the [options](Options.md) classes.
+
+### The Options Classes
+
+`AbpRebusEventBusOptions` classe can be used to configure the event bus options for the Rebus.
+
+You can configure this options inside the `PreConfigureServices` of your [module](Module-Development-Basics.md).
+
+**Example: Minimize configuration**
+
+```csharp
+PreConfigure(options =>
+{
+ options.InputQueueName = "eventbus";
+});
+```
+
+Rebus has many options, you can use the `Configurer` property of `AbpRebusEventBusOptions` class to configure.
+
+Default events are **stored in memory**. See the [rebus document](https://github.com/rebus-org/Rebus/wiki/Transport) for more details.
+
+**Example: Configure the store**
+
+````csharp
+PreConfigure(options =>
+{
+ options.InputQueueName = "eventbus";
+ options.Configurer = rebusConfigurer =>
+ {
+ rebusConfigurer.Transport(t => t.UseMsmq("eventbus"));
+ rebusConfigurer.Subscriptions(s => s.UseJsonFile(@"subscriptions.json"));
+ };
+});
+````
+
+You can use the `Publish` properpty of `AbpRebusEventBusOptions` class to change the publishing method
+
+**Example: Configure the event publishing**
+
+````csharp
+PreConfigure(options =>
+{
+ options.InputQueueName = "eventbus";
+ options.Publish = async (bus, type, data) =>
+ {
+ await bus.Publish(data);
+ };
+});
+````
diff --git a/docs/en/Distributed-Event-Bus.md b/docs/en/Distributed-Event-Bus.md
index b1444d8eba..d94f7e0b16 100644
--- a/docs/en/Distributed-Event-Bus.md
+++ b/docs/en/Distributed-Event-Bus.md
@@ -8,7 +8,8 @@ Distributed event bus system provides an **abstraction** that can be implemented
* `LocalDistributedEventBus` is the default implementation that implements the distributed event bus to work as in-process. Yes! The **default implementation works just like the [local event bus](Local-Event-Bus.md)**, if you don't configure a real distributed provider.
* `RabbitMqDistributedEventBus` implements the distributed event bus with the [RabbitMQ](https://www.rabbitmq.com/). See the [RabbitMQ integration document](Distributed-Event-Bus-RabbitMQ-Integration.md) to learn how to configure it.
-* `KafkaDistributedEventBus` implements the distributed event bus with the [RabbitMQ](https://kafka.apache.org/). See the [Kafka integration document](Distributed-Event-Bus-Kafka-Integration.md) to learn how to configure it.
+* `KafkaDistributedEventBus` implements the distributed event bus with the [Kafka](https://kafka.apache.org/). See the [Kafka integration document](Distributed-Event-Bus-Kafka-Integration.md) to learn how to configure it.
+* `RebusDistributedEventBus` implements the distributed event bus with the [Rebus](http://mookid.dk/category/rebus/). See the [Rebus integration document](Distributed-Event-Bus-Rebus-Integration.md) to learn how to configure it.
Using a local event bus as default has a few important advantages. The most important one is that: It allows you to write your code compatible to distributed architecture. You can write a monolithic application now that can be split into microservices later. It is a good practice to communicate between bounded contexts (or between application modules) via distributed events instead of local events.
diff --git a/docs/en/UI/AspNetCore/JavaScript-API/Index.md b/docs/en/UI/AspNetCore/JavaScript-API/Index.md
index 25251dcdbf..9e960ba240 100644
--- a/docs/en/UI/AspNetCore/JavaScript-API/Index.md
+++ b/docs/en/UI/AspNetCore/JavaScript-API/Index.md
@@ -13,11 +13,9 @@ ABP provides a set of JavaScript APIs for ASP.NET Core MVC / Razor Pages applica
* [abp.localization](Localization.md)
* abp.log
* [abp.message](Message.md)
-* abp.ModalManager
* [abp.notify](Notify.md)
* abp.security
* [abp.setting](Settings.md)
* abp.ui
* abp.utils
-* abp.ResourceLoader
-* abp.WidgetManager
\ No newline at end of file
+* abp.ResourceLoader
\ No newline at end of file
diff --git a/docs/en/UI/AspNetCore/Modals.md b/docs/en/UI/AspNetCore/Modals.md
new file mode 100644
index 0000000000..9de9542307
--- /dev/null
+++ b/docs/en/UI/AspNetCore/Modals.md
@@ -0,0 +1,483 @@
+# ASP.NET Core MVC / Razor Pages UI: Modals
+
+While you can continue to use the standard [Bootstrap way](https://getbootstrap.com/docs/4.5/components/modal/) to create, open and manage modals in your applications, ABP Framework provides a **flexible** way to manage modals by **automating common tasks** for you.
+
+**Example: A modal dialog to create a new role entity**
+
+
+
+ABP Framework provides the following benefits for such a modal with a form inside it;
+
+* **Lazy loads** the modal HTML into the page and **removes** it from the DOM once its closed. This makes easy to consume a reusable modal dialog. Also, every time you open the modal, it will be a fresh new modal, so you don't have to deal with resetting the modal content.
+* **Auto-focuses** the first input of the form once the modal has been opened.
+* Automatically determines the **form** inside a modal and posts the form via **AJAX** instead of normal page post.
+* Automatically checks if the form inside the modal **has changed, but not saved**. It warns the user in this case.
+* Automatically **disables the modal buttons** (save & cancel) until the AJAX operation completes.
+* Makes it easy to register a **JavaScript object that is initialized** once the modal has loaded.
+
+So, it makes you write less code when you deal with the modals, especially the modals with a form inside.
+
+## Basic Usage
+
+### Creating a Modal as a Razor Page
+
+To demonstrate the usage, we are creating a simple Razor Page, named `ProductInfoModal.cshtml`, under the `/Pages/Products` folder:
+
+
+
+**ProductInfoModal.cshtml Content:**
+
+````html
+@page
+@model MyProject.Web.Pages.Products.ProductInfoModalModel
+@{
+ Layout = null;
+}
+
+
+
+
@Model.ProductName
+
+
+
+
+ @Model.ProductDescription
+
+
+ Reference: https://acme.com/catalog/
+
+
+
+
+````
+
+* This page sets the `Layout` to `null` since we will show this as a modal. So, no need to wrap with a layout.
+* It uses [abp-modal tag helper](Tag-Helpers/Modals.md) to simplify creating the modal HTML code. You can use the standard Bootstrap modal code if you prefer it.
+
+**ProductInfoModalModel.cshtml.cs Content:**
+
+```csharp
+using Volo.Abp.AspNetCore.Mvc.UI.RazorPages;
+
+namespace MyProject.Web.Pages.Products
+{
+ public class ProductInfoModalModel : AbpPageModel
+ {
+ public string ProductName { get; set; }
+
+ public string ProductDescription { get; set; }
+
+ public string ProductImageUrl { get; set; }
+
+ public void OnGet()
+ {
+ ProductName = "Acme Indestructo Steel Ball";
+ ProductDescription = "The ACME Indestructo Steel Ball is completely indestructible, there is nothing that can destroy it!";
+ ProductImageUrl = "https://acme.com/catalog/acmeindestructo.jpg";
+ }
+ }
+}
+```
+
+You can surely get the product info from a database or API. We are setting the properties hard-coded for the sake of simplicity,
+
+### Defining the Modal Manager
+
+Once you have a modal, you can open it in any page using some simple **JavaScript** code.
+
+First, create an `abp.ModalManager` object by setting the `viewUrl`, in the JavaScript file of the page that will use the modal:
+
+````js
+var productInfoModal = new abp.ModalManager({
+ viewUrl: '/Products/ProductInfoModal'
+});
+````
+
+> If you only need to specify the `viewUrl`, you can directly pass it to the `ModalManager` constructor, as a shortcut. Example: `new abp.ModalManager('/Products/ProductInfoModal');`
+
+### Opening the Modal
+
+Then open the modal whenever you need:
+
+````js
+productInfoModal.open();
+````
+
+You typically want to open the modal when something happens; For example, when the user clicks a button:
+
+````js
+$('#OpenProductInfoModal').click(function(){
+ productInfoModal.open();
+});
+````
+
+The resulting modal will be like that:
+
+
+
+#### Opening the Modal with Arguments
+
+When you call the `open()` method, `ModalManager` loads the modal HTML by requesting it from the `viewUrl`. You can pass some **query string parameters** to this URL when you open the modal.
+
+**Example: Pass the product id while opening the modal**
+
+````js
+productInfoModal.open({
+ productId: 42
+});
+````
+
+You can add a `productId` parameter to the get method:
+
+````csharp
+using Volo.Abp.AspNetCore.Mvc.UI.RazorPages;
+
+namespace MyProject.Web.Pages.Products
+{
+ public class ProductInfoModalModel : AbpPageModel
+ {
+ //...
+
+ public async Task OnGetAsync(int productId) //Add productId parameter
+ {
+ //TODO: Get the product with database with the given productId
+ //...
+ }
+ }
+}
+````
+
+In this way, you can use the `productId` to query the product from a data source.
+
+## Modals with Forms
+
+`abp.ModalManager` handles various common tasks (described in the introduction) when you want to use a form inside the modal.
+
+### Example Modal with a Form
+
+This section shows an example form to create a new product.
+
+#### Creating the Razor Page
+
+For this example, creating a new Razor Page, named `ProductCreateModal.cshtml`, under the `/Pages/Products` folder:
+
+
+
+**ProductCreateModal.cshtml Content:**
+
+````html
+@page
+@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal
+@model MyProject.Web.Pages.Products.ProductCreateModalModel
+@{
+ Layout = null;
+}
+
+````
+
+* The `abp-modal` has been wrapped by the `form`. This is needed to place the `Save` and the `Cancel` buttons into the form. In this way, the `Save` button acts as the `submit` button for the `form`.
+* Used the [abp-input tag helpers](Tag-Helpers/Form-Elements.md) to simplify to create the form elements. Otherwise, you need to write more HTML.
+
+**ProductCreateModal.cshtml.cs Content:**
+
+```csharp
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+using Volo.Abp.AspNetCore.Mvc.UI.RazorPages;
+
+namespace MyProject.Web.Pages.Products
+{
+ public class ProductCreateModalModel : AbpPageModel
+ {
+ [BindProperty]
+ public PoductCreationDto Product { get; set; }
+
+ public async Task OnGetAsync()
+ {
+ //TODO: Get logic, if available
+ }
+
+ public async Task OnPostAsync()
+ {
+ //TODO: Save the Product...
+
+ return NoContent();
+ }
+ }
+}
+```
+
+* This is a simple `PageModal` class. The `[BindProperty]` make the form binding to the model when you post (submit) the form; The standard ASP.NET Core system.
+* `OnPostAsync` returns `NoContent` (this method is defined by the base `AbpPageModel` class). Because we don't need to a return value in the client side, after the form post operation.
+
+**PoductCreationDto:**
+
+`ProductCreateModalModel` uses a `PoductCreationDto` class defined as shown below:
+
+````csharp
+using System;
+using System.ComponentModel.DataAnnotations;
+using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form;
+
+namespace MyProject.Web.Pages.Products
+{
+ public class PoductCreationDto
+ {
+ [Required]
+ [StringLength(128)]
+ public string Name { get; set; }
+
+ [TextArea(Rows = 4)]
+ [StringLength(2000)]
+ public string Description { get; set; }
+
+ [DataType(DataType.Date)]
+ public DateTime ReleaseDate { get; set; }
+ }
+}
+````
+
+* `abp-input` Tag Helper can understand the data annotation attributes and uses them to shape and validate the form elements. See the [abp-input tag helpers](Tag-Helpers/Form-Elements.md) document to learn more.
+
+#### Defining the Modal Manager
+
+Again, create an `abp.ModalManager` object by setting the `viewUrl`, in the JavaScript file of the page that will use the modal:
+
+````js
+var productCreateModal = new abp.ModalManager({
+ viewUrl: '/Products/ProductCreateModal'
+});
+````
+
+#### Opening the Modal
+
+Then open the modal whenever you need:
+
+````js
+productCreateModal.open();
+````
+
+You typically want to open the modal when something happens; For example, when the user clicks a button:
+
+````js
+$('#OpenProductCreateModal').click(function(){
+ productCreateModal.open();
+});
+````
+
+So, the complete code will be something like that (assuming you have a `button` with `id` is `OpenProductCreateModal` on the view side):
+
+```js
+$(function () {
+
+ var productCreateModal = new abp.ModalManager({
+ viewUrl: '/Products/ProductCreateModal'
+ });
+
+ $('#OpenProductCreateModal').click(function () {
+ productCreateModal.open();
+ });
+
+});
+```
+
+The resulting modal will be like that:
+
+
+
+#### Saving the Modal
+
+When you click to the `Save` button, the form is posted to the server. If the server returns a **success response**, then the `onResult` event is triggered with some arguments including the server response and the modal is automatically closed.
+
+An example callback that logs the arguments passed to the `onResult` method:
+
+````js
+productCreateModal.onResult(function(){
+ console.log(arguments);
+});
+````
+
+If the server returns a failed response, it shows the error message returned from the server and keeps the modal open.
+
+> See the *Modal Manager Reference* section below for other modal events.
+
+#### Canceling the Modal
+
+If you click to the Cancel button with some changes made but not saved, you get such a warning message:
+
+
+
+If you don't want such a check & message, you can add `data-check-form-on-close="false"` attribute to your `form` element. Example:
+
+````html
+
+