From 5a74d16e0e470756e579e772eba23da0d047dae4 Mon Sep 17 00:00:00 2001 From: Ilkay Ilknur Date: Wed, 18 Nov 2020 14:53:04 +0300 Subject: [PATCH 1/2] message document improvements. --- docs/en/UI/Blazor/Message.md | 37 +++++++++++++++++++++--------------- 1 file changed, 22 insertions(+), 15 deletions(-) diff --git a/docs/en/UI/Blazor/Message.md b/docs/en/UI/Blazor/Message.md index 075e4c7beb..64940289ba 100644 --- a/docs/en/UI/Blazor/Message.md +++ b/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. From 999efced65958737d6d1790806ebc060b48fa14d Mon Sep 17 00:00:00 2001 From: Ilkay Ilknur Date: Wed, 18 Nov 2020 15:00:40 +0300 Subject: [PATCH 2/2] update usage. --- docs/en/UI/Blazor/Message.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/en/UI/Blazor/Message.md b/docs/en/UI/Blazor/Message.md index 64940289ba..a2faee2548 100644 --- a/docs/en/UI/Blazor/Message.md +++ b/docs/en/UI/Blazor/Message.md @@ -68,7 +68,7 @@ All of these methods get three parameters: **Example: Show an error message** ````csharp -Message.Error('Your credit card number is not valid!'); +_uiMessageService.Error('Your credit card number is not valid!'); ```` ![blazor-message-success](../../images/blazor-message-error.png)