Merge branch 'rel-4.0' of https://github.com/abpframework/abp into rel-4.0

docs/en/UI/Blazor/Message.md

@@ -1,3 +1,122 @@
 # Blazor: UI Message Service
 
-TODO
+UI message service is used to show nice-looking messages to the user as a blocking dialog.
+
+## Quick Example
+
+Simply inject `IUiMessageService` to your page or component and call the `Success` method to show a success message.
+
+```csharp
+namespace MyProject.Blazor.Pages
+{
+    public partial class Index
+    {
+        public IUiMessageService UiMessageService { get; }
+
+        public Index(IUiMessageService uiMessageService)
+        {
+            UiMessageService = uiMessageService;
+        }
+
+        public async Task SaveAsync()
+        {
+            await UiMessageService.Success("Your changes have been successfully saved!", "Congratulations");
+        }
+    }
+}
+```
+
+It will show a dialog on the UI:
+
+![blazor-message-success](../../images/blazor-message-success.png)
+
+If you inherit your page or component from `AbpComponentBase` class, you can use the `Message` property to access the `IUiMessageService`.
+
+```csharp
+namespace MyProject.Blazor.Pages
+{
+    public partial class Index : AbpComponentBase
+    {
+        public async Task SaveAsync()
+        {
+            await Message.Success("Your changes have been successfully saved!", "Congratulations");
+        }
+    }
+}
+```
+
+
+## Informative Messages
+
+There are four types of informative message functions:
+
+* `Info(...)`
+* `Success(...)`
+* `Warn(...)`
+* `Error(...)`
+
+All of these methods get three parameters:
+
+* `message`: The message (`string`) to be shown.
+* `title`: An optional (`string`) title.
+* `options`: An optional (`Action`) to configure UI message options.
+
+**Example: Show an error message**
+
+````csharp
+UiMessageService.Error('Your credit card number is not valid!');
+````
+
+![blazor-message-success](../../images/blazor-message-error.png)
+
+
+## Confirmation Message
+
+`IUiMessageService.Confirm(...)` method can be used to get a confirmation from the user.
+
+**Example**
+
+Use the following code to get a confirmation result from the user:
+
+```csharp
+public async Task DeleteAsync()
+{
+    var confirmed = await UiMessageService.Confirm("Are you sure to delete the 'admin' role?");
+    if(confirmed)
+    {
+        //Delete the 'admin' role here.
+    }
+}
+```
+
+The resulting UI will be like shown below:
+
+![blazor-message-confirm](../../images/blazor-message-confirm.png)
+
+If the user has clicked the `Yes` button, the `Confirm` method's return value will be `true`.
+
+## UI Message Configuration
+
+It is easy to change default UI Message options if you like to customize messages. Provide an `action` to the `options` parameter and change the default values.
+
+```csharp
+await UiMessageService.Success("Your changes have been successfully saved!", "Congratulations", (options) =>
+    {
+        options.MessageIcon = "msg-icon-new";
+        options.CenterMessage = false;
+    });
+```
+
+List of the options that you can change by providing the `action` parameter.
+
+* `CenterMessage` : (Default: true) If true, the message dialogue will be centered on the screen.
+* `ShowMessageIcon` : (Default: true) If true, the message dialogue will show the large icon for the current message type.
+* `MessageIcon` : Overrides the build-in message icon.
+* `OkButtonText` : Custom text for the Ok button.
+* `OkButtonIcon` : Custom icon for the Ok button.
+* `ConfirmButtonText` : Custom text for the Confirmation button.
+* `ConfirmButtonIcon` : Custom icon for the Confirmation button.
+* `CancelButtonText` : Custom text for the Cancel button.
+* `CancelButtonIcon` : Custom icon for the Cancel button.
+
+> "Confirm", "Cancel" and "Yes" texts are automatically localized based on the current language.

docs/en/UI/Blazor/Notification.md

@@ -1,3 +1,103 @@
 # Blazor UI: Notification Service
 
-`IUiNotificationService` is used to show toastr style notifications on the user interface. The documentation is in progress...
+`IUiNotificationService` is used to show toast style notifications on the user interface.
+
+## Quick Example
+
+Simply [inject](../../Dependency-Injection.md) `IUiNotificationService` to your page or component and call the `Success` method to show a success message.
+
+```csharp
+namespace MyProject.Blazor.Pages
+{
+    public partial class Index
+    {
+        private readonly IUiNotificationService _uiNotificationService;
+
+        public Index(IUiNotificationService uiNotificationService)
+        {
+            _uiNotificationService = uiNotificationService;
+        }
+
+        public async Task DeleteAsync()
+        {
+            await _uiNotificationService.Success(
+                "The product 'Acme Atom Re-Arranger' has been successfully deleted."
+            );
+        }
+    }
+}
+```
+
+![blazor-notification-sucess](../../images/blazor-notification-success.png)
+
+If you inherit your page or component from the `AbpComponentBase` class, you can use the the `Notify` property to access the `IUiNotificationService` as a pre-injected property.
+
+```csharp
+namespace MyProject.Blazor.Pages
+{
+    public partial class Index : AbpComponentBase
+    {
+        public async Task DeleteAsync()
+        {
+            await Notify.Success(
+                "The product 'Acme Atom Re-Arranger' has been successfully deleted."
+            );
+        }
+    }
+}
+```
+
+> You typically use `@inherits AbpComponentBase` in the `.razor` file to inherit from the `AbpComponentBase`, instead of inheriting in the code behind file.
+
+## Notification Types
+
+There are four types of pre-defined notifications;
+
+* `Info(...)`
+* `Success(...)`
+* `Warn(...)`
+* `Error(...)`
+
+All of the methods above gets the following parameters;
+
+* `message`: The message (`string`) to be shown.
+* `title`: An optional (`string`) title.
+* `options`: An optional (`Action`) to configure notification options.
+
+## Configuration
+
+### Per Notification
+
+It is easy to change default notification options if you like to customize it per notification. Provide an action to the `options` parameter as shown below:
+
+```csharp
+await UiNotificationService.Success(
+    "The product 'Acme Atom Re-Arranger' has been successfully deleted.",
+    options: (options) =>
+    {
+        options.OkButtonText =
+            LocalizableString.Create<MyProjectNameResource>("CustomOK");
+    });
+```
+
+### Available Options
+
+Here, the list of all available options;
+
+* `OkButtonText` : Custom text for the OK button.
+* `OkButtonIcon` : Custom icon for the OK button
+
+### Global Configuration
+
+You can also configure global notification options to control the it in a single point. Configure the `UiNotificationOptions` [options class](../../Options.md) in the `ConfigureServices` of your [module](../../Module-Development-Basics.md):
+
+````csharp
+Configure<UiNotificationOptions>(options =>
+{
+    options.OkButtonText = LocalizableString.Create<MyProjectNameResource>("CustomOK");
+});
+````
+
+The same options are available here.
+
+> *Per notification* configuration overrides the default values.