message document improvements.

docs/en/UI/Blazor/Message.md

@@ -1,26 +1,28 @@
-# Blazor: UI Message Service
+# Blazor UI: Message Service
 
 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.
+Simply [inject](../../Dependency-Injection.md) `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; }
+        private readonly IUiMessageService _uiMessageService;
 
         public Index(IUiMessageService uiMessageService)
         {
-            UiMessageService = uiMessageService;
+            _uiMessageService = uiMessageService;
         }
 
         public async Task SaveAsync()
         {
-            await UiMessageService.Success("Your changes have been successfully saved!", "Congratulations");
+            await _uiMessageService.Success(
+                "Your changes have been successfully saved!",
+                "Congratulations");
         }
     }
 }
@@ -30,7 +32,7 @@ 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`.
+If you inherit your page or component from the `AbpComponentBase` class, you can use the `Message` property to access the `IUiMessageService` as a pre-injected property.
 
 ```csharp
 namespace MyProject.Blazor.Pages
@@ -39,12 +41,14 @@ namespace MyProject.Blazor.Pages
     {
         public async Task SaveAsync()
         {
-            await Message.Success("Your changes have been successfully saved!", "Congratulations");
+            await Message.Success(
+                "Your changes have been successfully saved!",
+                "Congratulations");
         }
     }
 }
 ```
-
+> You typically use `@inherits AbpComponentBase` in the `.razor` file to inherit from the `AbpComponentBase`, instead of inheriting in the code behind file.
 
 ## Informative Messages
 
@@ -64,7 +68,7 @@ All of these methods get three parameters:
 **Example: Show an error message**
 
 ````csharp
-UiMessageService.Error('Your credit card number is not valid!');
+Message.Error('Your credit card number is not valid!');
 ````
 
 ![blazor-message-success](../../images/blazor-message-error.png)
@@ -81,7 +85,7 @@ 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?");
+    var confirmed = await _uiMessageService.Confirm("Are you sure to delete the 'admin' role?");
     if(confirmed)
     {
         //Delete the 'admin' role here.
@@ -95,12 +99,15 @@ The resulting UI will be like shown below:
 
 If the user has clicked the `Yes` button, the `Confirm` method's return value will be `true`.
 
-## UI Message Configuration
+## 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.
+It is easy to change default message options if you like to it per message. Provide an `action` to the `options` parameter as shown below.
 
 ```csharp
-await UiMessageService.Success("Your changes have been successfully saved!", "Congratulations", (options) =>
+await _uiMessageService.Success(
+    "Your changes have been successfully saved!",
+    "Congratulations",
+    (options) =>
     {
         options.MessageIcon = "msg-icon-new";
         options.CenterMessage = false;
@@ -112,8 +119,8 @@ 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.
+* `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.