| + + + | +
@Localizer["HelloWorld"]
```` -Refer to the [Microsoft's localization documentation](https://docs.microsoft.com/en-us/aspnet/core/fundamentals/localization) for details about using localization on the server side. - -### Client Side - -ABP provides JavaScript services to use the same localized texts in the client side. - -#### getResource - -`abp.localization.getResource` function is used to get a localization resource: - -````js -var testResource = abp.localization.getResource('Test'); -```` - -Then you can localize a string based on this resource: +### Special Base Classes -````js -var str = testResource('HelloWorld'); -```` +Some ABP Framework base classes provide a `L` property to use the localizer even easier. -#### localize +**Example: Localize a text in an application service method** -`abp.localization.localize` function is a shortcut where you can both specify the text name and the resource name: +```csharp +using System.Threading.Tasks; +using MyProject.Localization; +using Volo.Abp.Application.Services; -````js -var str = abp.localization.localize('HelloWorld', 'Test'); -```` +namespace MyProject +{ + public class TestAppService : ApplicationService + { + public TestAppService() + { + LocalizationResource = typeof(MyProjectResource); + } -`HelloWorld` is the text to localize, where `Test` is the localization resource name here. + public async Task DoIt() + { + var str = L["HelloWorld"]; + } + } +} +``` -If you don't specify the localization resource name, it uses the default localization resource defined on the `AbpLocalizationOptions` (see the *Default Resource* section above). Example: +When you set the `LocalizationResource` in the constructor, the `ApplicationService` class uses that resource type when you use the `L` property, just like in the `DoIt()` method. -````js -var str = abp.localization.localize('HelloWorld'); //uses the default resource -```` +Setting `LocalizationResource` in every application service can be tedious. You can create an abstract base application service class, set it there and derive your application services from that base class. This is already implemented when you create a new project with the [startup templates](Startup-Templates/Application.md). So, you can simply inherit from the base class directly use the `L` property: -##### Format Arguments +```csharp +using System.Threading.Tasks; -If your localized string contains arguments, like `Hello {0}, welcome!`, you can pass arguments to the localization methods. Examples: +namespace MyProject +{ + public class TestAppService : MyProjectAppService + { + public async Task DoIt() + { + var str = L["HelloWorld"]; + } + } +} +``` -````js -var str1 = abp.localization.getResource('Test')('HelloWelcomeMessage', 'John'); -var str2 = abp.localization.localize('HelloWorld', 'Test', 'John'); -```` +The `L` property is also available for some other base classes like `AbpController` and `AbpPageModel`. -Both of the samples above produce the output `Hello John, welcome!`. +## The Client Side -## See Also +See the following documents to learn how to reuse the same localization texts in the JavaScript side; -* [Localization in Angular UI](UI/Angular/Localization.md) -* [Forms & Validation](UI/AspNetCore/Forms-Validation.md) for the ASP.NET Core MVC / Razor Pages UI \ No newline at end of file +* [Localization for the MVC / Razor Pages UI](UI/AspNetCore/JavaScript-API/Localization.md) +* [Localization for the Blazor UI](UI/Blazor/Localization.md) +* [Localization for the Angular UI](UI/Angular/Localization.md) \ No newline at end of file diff --git a/docs/en/Migration-Guides/BlazorUI-3_3.md b/docs/en/Migration-Guides/BlazorUI-3_3.md new file mode 100644 index 0000000000..8a14481912 --- /dev/null +++ b/docs/en/Migration-Guides/BlazorUI-3_3.md @@ -0,0 +1,13 @@ +# Migration Guide for the Blazor UI from the v3.2 to the v3.3 + +## Startup Template Changes + +* Remove `Volo.Abp.Account.Blazor` NuGet package from your `.Blazor.csproj` and add `Volo.Abp.TenantManagement.Blazor` NuGet package. +* Remove the ``typeof(AbpAccountBlazorModule)`` from the dependency list of *YourProjectBlazorModule* class and add the `typeof(AbpTenantManagementBlazorModule)`. +* Add `@using Volo.Abp.BlazoriseUI` and `@using Volo.Abp.BlazoriseUI.Components` into the `_Imports.razor` file. +* Remove the `div` with `id="blazor-error-ui"` (with its contents) from the `wwwroot/index.html ` file, since the ABP Framework now shows error messages as a better message box. + +## BlazoriseCrudPageBase to AbpCrudPageBase + +Renamed `BlazoriseCrudPageBase` to `AbpCrudPageBase`. Just update the usages. It also has some changes, you may need to update method calls/usages manually. + diff --git a/docs/en/Redis-Cache.md b/docs/en/Redis-Cache.md index 42679679c6..3e11584bce 100644 --- a/docs/en/Redis-Cache.md +++ b/docs/en/Redis-Cache.md @@ -25,9 +25,11 @@ Volo.Abp.Caching.StackExchangeRedis package automatically gets the redis [config ````js "Redis": { + "IsEnabled": "true", "Configuration": "127.0.0.1" } ```` +The setting `IsEnabled` is optional and will be considered `true` if it is not set. Alternatively you can configure the standard [RedisCacheOptions](https://docs.microsoft.com/en-us/dotnet/api/microsoft.extensions.caching.stackexchangeredis.rediscacheoptions) [options](Options.md) class in the `ConfigureServices` method of your [module](Module-Development-Basics.md): diff --git a/docs/en/Repositories.md b/docs/en/Repositories.md index a222b9d803..0fc80984e7 100644 --- a/docs/en/Repositories.md +++ b/docs/en/Repositories.md @@ -142,7 +142,7 @@ var people = _personRepository You normally want to use `.ToListAsync()`, `.CountAsync()`... instead, to be able to write a **truly async code**. -However, you see that you can't use these async extension methods in your application or domain layer when you create a new project using the standard [application startup template](Startup-Templates/Application.md), because; +However, you see that you can't use all the async extension methods in your application or domain layer when you create a new project using the standard [application startup template](Startup-Templates/Application.md), because; * These async methods **are not standard LINQ methods** and they are defined in the [Microsoft.EntityFrameworkCore](https://www.nuget.org/packages/Microsoft.EntityFrameworkCore) NuGet package. * The standard template **doesn't have a reference** to the EF Core package from the domain and application layers, to be independent from the database provider. @@ -151,9 +151,9 @@ Based on your requirements and development model, you have the following options > Using async methods is strongly suggested! Don't use sync LINQ methods while executing database queries to be able to develop a scalable application. -### Option-1: Reference to the EF Core +### Option-1: Reference to the Database Provider Package -The easiest solution is to directly add the EF Core package from the project you want to use these async methods. +**The easiest solution** is to directly add the EF Core package from the project you want to use these async methods. > Add the [Volo.Abp.EntityFrameworkCore](https://www.nuget.org/packages/Volo.Abp.EntityFrameworkCore) NuGet package to your project, which indirectly reference to the EF Core package. This ensures that you use the correct version of the EF Core compatible to the rest of your application. @@ -183,14 +183,34 @@ var people = ((IMongoQueryable
+
+````
+
+`data-script-class="MyCustomClass"` indicates the JavaScript class that will be used to perform some logic on this element:
+
+`MyCustomClass` is a global object defined as shown below:
+
+````js
+MyCustomClass = function(){
+
+ function initDom($el){
+ $el.css('color', 'red');
+ }
+
+ return {
+ initDom: initDom
+ }
+};
+````
+
+`initDom` is the function that is called by the ABP Framework. The `$el` argument is the loaded HTML element as a JQuery selection.
+
+Finally, you can load the component inside the container after an AJAX call:
+
+````js
+$(function () {
+ setTimeout(function(){
+ $.get('/get-my-element').then(function(response){
+ $('#LazyComponent').html(response);
+ });
+ }, 2000);
+});
+````
+
+Script Initialization system is especially helpful if you don't know how and when the component will be loaded into the DOM. This can be possible if you've developed a reusable UI component in a library and you want the application developer shouldn't care how to initialize the component in different use cases.
+
+> Script initialization doesn't work if the component was loaded in the initial DOM. In this case, you are responsible to initialize it.
+
+### Other Initializers
+
+The following Bootstrap components and libraries are automatically initialized when they are added to the DOM:
+
+* Tooltip
+* Popover
+* Timeage
+
diff --git a/docs/en/UI/AspNetCore/JavaScript-API/Dynamic-JavaScript-Client-Proxies.md b/docs/en/UI/AspNetCore/JavaScript-API/Dynamic-JavaScript-Client-Proxies.md
new file mode 100644
index 0000000000..5270852b60
--- /dev/null
+++ b/docs/en/UI/AspNetCore/JavaScript-API/Dynamic-JavaScript-Client-Proxies.md
@@ -0,0 +1,3 @@
+# ASP.NET Core MVC / Razor Pages UI: Dynamic JavaScript Client Proxies
+
+TODO
\ No newline at end of file
diff --git a/docs/en/UI/AspNetCore/JavaScript-API/Events.md b/docs/en/UI/AspNetCore/JavaScript-API/Events.md
new file mode 100644
index 0000000000..3425355f44
--- /dev/null
+++ b/docs/en/UI/AspNetCore/JavaScript-API/Events.md
@@ -0,0 +1,88 @@
+# ASP.NET Core MVC / Razor Pages UI: JavaScript Events API
+
+`abp.event` object is a simple service that is used to publish and subscribe to global events **in the browser**.
+
+> This API is not related to server side local or distributed events. It works in the browser boundaries to make the UI components (code parts) communicate in a loosely coupled way.
+
+## Basic Usage
+
+### Publishing Events
+
+Use `abp.event.trigger` to publish events.
+
+**Example: Publish a *Basket Updated* event**
+
+````js
+abp.event.trigger('basketUpdated');
+````
+
+This will trigger all the subscribed callbacks.
+
+### Subscribing to the Events
+
+Use `abp.event.on` to subscribe to events.
+
+**Example: Consume the *Basket Updated* event**
+
+````js
+abp.event.on('basketUpdated', function() {
+ console.log('Handled the basketUpdated event...');
+});
+````
+
+You start to get events after you subscribe to the event.
+
+### Unsubscribing from the Events
+
+If you need to unsubscribe from a pre-subscribed event, you can use the `abp.event.off(eventName, callback)` function. In this case, you have the callback as a separate function declaration.
+
+**Example: Subscribe & Unsubscribe**
+
+````js
+function onBasketUpdated() {
+ console.log('Handled the basketUpdated event...');
+}
+
+//Subscribe
+abp.event.on('basketUpdated', onBasketUpdated);
+
+//Unsubscribe
+abp.event.off('basketUpdated', onBasketUpdated);
+````
+
+You don't get events after you unsubscribe from the event.
+
+## Event Arguments
+
+You can pass arguments (of any count) to the `trigger` method and get them in the subscription callback.
+
+**Example: Add the basket as the event argument**
+
+````js
+//Subscribe to the event
+abp.event.on('basketUpdated', function(basket) {
+ console.log('The new basket object: ');
+ console.log(basket);
+});
+
+//Trigger the event
+abp.event.trigger('basketUpdated', {
+ items: [
+ {
+ "productId": "123",
+ "count": 2
+ },
+ {
+ "productId": "832",
+ "count": 1
+ }
+ ]
+});
+````
+
+### Multiple Arguments
+
+If you want to pass multiple arguments, you can pass like `abp.event.on('basketUpdated', arg0, arg1, agr2)`. Then you can add the same argument list to the callback function on the subscriber side.
+
+> **Tip:** Alternatively, you can send a single object that has a separate field for each argument. This makes easier to extend/change the event arguments in the future without breaking the subscribers.
+
diff --git a/docs/en/UI/AspNetCore/JavaScript-API/Features.md b/docs/en/UI/AspNetCore/JavaScript-API/Features.md
new file mode 100644
index 0000000000..e3cd2be445
--- /dev/null
+++ b/docs/en/UI/AspNetCore/JavaScript-API/Features.md
@@ -0,0 +1,15 @@
+# ASP.NET Core MVC / Razor Pages UI: JavaScript Features API
+
+`abp.features` API allows you to check features or get the values of the features on the client side. You can read the current value of a feature in the client side only if it is allowed by the feature definition (on the server side).
+
+> This document only explains the JavaScript API. See the [Features](../../../Features.md) document to understand the ABP Features system.
+
+## Basic Usage
+
+`abp.features.values` can be used to access to the all feature values.
+
+````js
+var excelExportFeatureValue = abp.features.values["ExportingToExcel"];
+````
+
+Then you can check the value of the feature to perform your logic.
\ No newline at end of file
diff --git a/docs/en/UI/AspNetCore/JavaScript-API/Index.md b/docs/en/UI/AspNetCore/JavaScript-API/Index.md
index 9f584eacfb..3473140392 100644
--- a/docs/en/UI/AspNetCore/JavaScript-API/Index.md
+++ b/docs/en/UI/AspNetCore/JavaScript-API/Index.md
@@ -1,23 +1,19 @@
# JavaScript API
-ABP provides some JavaScript APIs for ASP.NET Core MVC / Razor Pages applications. They can be used to perform some common application requirements in the client side.
+ABP provides a set of JavaScript APIs for ASP.NET Core MVC / Razor Pages applications. They can be used to perform common application requirements easily in the client side and integrate to the server side.
## APIs
-* abp.ajax
-* abp.auth
-* abp.currentUser
-* abp.dom
-* abp.event
-* abp.features
-* abp.localization
-* abp.log
-* abp.ModalManager
-* abp.notify
-* abp.security
-* abp.setting
-* abp.ui
-* abp.utils
-* abp.ResourceLoader
-* abp.WidgetManager
-* Other APIs
\ No newline at end of file
+* [AJAX](Ajax.md)
+* [Auth](Auth.md)
+* [CurrentUser](CurrentUser.md)
+* [DOM](DOM.md)
+* [Events](Events.md)
+* [Features](Features.md)
+* [Localization](Localization.md)
+* [Logging](Logging.md)
+* [ResourceLoader](ResourceLoader.md)
+* [Settings](Settings.md)
+* [UI Block/Busy](Block-Busy.md)
+* [UI Message](Message.md)
+* [UI Notification](Notify.md)
\ No newline at end of file
diff --git a/docs/en/UI/AspNetCore/JavaScript-API/Localization.md b/docs/en/UI/AspNetCore/JavaScript-API/Localization.md
new file mode 100644
index 0000000000..0897b99268
--- /dev/null
+++ b/docs/en/UI/AspNetCore/JavaScript-API/Localization.md
@@ -0,0 +1,143 @@
+# ASP.NET Core MVC / Razor Pages UI: JavaScript Localization API
+
+Localization API allows you to reuse the server side localization resources in the client side.
+
+> This document only explains the JavaScript API. See the [localization document](../../../Localization.md) to understand the ABP localization system.
+
+## Basic Usage
+
+`abp.localization.getResource(...)` function is used to get a localization resource:
+
+````js
+var testResource = abp.localization.getResource('Test');
+````
+
+Then you can localize a string based on this resource:
+
+````js
+var str = testResource('HelloWorld');
+````
+
+`abp.localization.localize(...)` function is a shortcut where you can both specify the text name and the resource name:
+
+````js
+var str = abp.localization.localize('HelloWorld', 'Test');
+````
+
+`HelloWorld` is the text to localize, where `Test` is the localization resource name here.
+
+### Fallback Logic
+
+If given texts was not localized, localization method returns the given key as the localization result.
+
+### Default Localization Resource
+
+If you don't specify the localization resource name, it uses the **default localization resource** defined on the `AbpLocalizationOptions` (see the [localization document](../../../Localization.md)).
+
+**Example: Using the default localization resource**
+
+````js
+var str = abp.localization.localize('HelloWorld'); //uses the default resource
+````
+
+### Format Arguments
+
+If your localized string contains arguments, like `Hello {0}, welcome!`, you can pass arguments to the localization methods. Examples:
+
+````js
+var testSource = abp.localization.getResource('Test');
+var str1 = testSource('HelloWelcomeMessage', 'John');
+var str2 = abp.localization.localize('HelloWelcomeMessage', 'Test', 'John');
+````
+
+Assuming the `HelloWelcomeMessage` is localized as `Hello {0}, welcome!`, both of the samples above produce the output `Hello John, welcome!`.
+
+## Other Properties & Methods
+
+### abp.localization.values
+
+`abp.localization.values` property stores all the localization resources, keys and their values.
+
+### abp.localization.isLocalized
+
+Returns a boolean indicating that if the given text was localized or not.
+
+**Example**
+
+````js
+abp.localization.isLocalized('ProductName', 'MyResource');
+````
+
+Returns `true` if the `ProductName` text was localized for the `MyResource` resource. Otherwise, returns `false`. You can leave the resource name empty to use the default localization resource.
+
+### abp.localization.defaultResourceName
+
+`abp.localization.defaultResourceName` can be set to change the default localization resource. You normally don't set this since the ABP Framework automatically sets is based on the server side configuration.
+
+### abp.localization.currentCulture
+
+`abp.localization.currentCulture` returns an object to get information about the **currently selected language**.
+
+An example value of this object is shown below:
+
+````js
+{
+ "displayName": "English",
+ "englishName": "English",
+ "threeLetterIsoLanguageName": "eng",
+ "twoLetterIsoLanguageName": "en",
+ "isRightToLeft": false,
+ "cultureName": "en",
+ "name": "en",
+ "nativeName": "English",
+ "dateTimeFormat": {
+ "calendarAlgorithmType": "SolarCalendar",
+ "dateTimeFormatLong": "dddd, MMMM d, yyyy",
+ "shortDatePattern": "M/d/yyyy",
+ "fullDateTimePattern": "dddd, MMMM d, yyyy h:mm:ss tt",
+ "dateSeparator": "/",
+ "shortTimePattern": "h:mm tt",
+ "longTimePattern": "h:mm:ss tt"
+ }
+}
+````
+
+### abp.localization.languages
+
+Used to get list of all **available languages** in the application. An example value of this object is shown below:
+
+````js
+[
+ {
+ "cultureName": "en",
+ "uiCultureName": "en",
+ "displayName": "English",
+ "flagIcon": null
+ },
+ {
+ "cultureName": "fr",
+ "uiCultureName": "fr",
+ "displayName": "Français",
+ "flagIcon": null
+ },
+ {
+ "cultureName": "pt-BR",
+ "uiCultureName": "pt-BR",
+ "displayName": "Português",
+ "flagIcon": null
+ },
+ {
+ "cultureName": "tr",
+ "uiCultureName": "tr",
+ "displayName": "Türkçe",
+ "flagIcon": null
+ },
+ {
+ "cultureName": "zh-Hans",
+ "uiCultureName": "zh-Hans",
+ "displayName": "简体中文",
+ "flagIcon": null
+ }
+]
+````
+
diff --git a/docs/en/UI/AspNetCore/JavaScript-API/Logging.md b/docs/en/UI/AspNetCore/JavaScript-API/Logging.md
new file mode 100644
index 0000000000..a46203b019
--- /dev/null
+++ b/docs/en/UI/AspNetCore/JavaScript-API/Logging.md
@@ -0,0 +1,50 @@
+# ASP.NET Core MVC / Razor Pages UI: JavaScript Logging API
+
+`abp.log` API is used to write simple logs in the client side.
+
+> The logs are written to console, using the `console.log`, by default.
+
+> This document is for simple client side logging. See the [Logging](../../../Logging.md) document for server side logging system.
+
+## Basic Usage
+
+Use one of the `abp.log.xxx(...)` methods based on the severity of your log message.
+
+````js
+abp.log.debug("Some debug log here..."); //Logging a simple debug message
+abp.log.info({ name: "john", age: 42 }); //Logging an object as an information log
+abp.log.warn("A warning message"); //Logging a warning message
+abp.log.error('An error happens...'); //Error message
+abp.log.fatal('Network connection has gone away!'); //Fatal error
+````
+
+## Log Levels
+
+There are 5 levels for a log message:
+
+* DEBUG = 1
+* INFO = 2
+* WARN = 3
+* ERROR = 4
+* FATAL = 5
+
+These are defined in the `abp.log.levels` object (like `abp.log.levels.WARN`).
+
+### Changing the Current Log Level
+
+You can control the log level as shown below:
+
+````js
+abp.log.level = abp.log.levels.WARN;
+````
+
+Default log level is `DEBUG`.
+
+### Logging with Specifying the Level
+
+Instead of calling `abp.log.info(...)` function, you can use the `abp.log.log` by specifying the log level as a parameter:
+
+````js
+abp.log.log("log message...", abp.log.levels.INFO);
+````
+
diff --git a/docs/en/UI/AspNetCore/JavaScript-API/Message.md b/docs/en/UI/AspNetCore/JavaScript-API/Message.md
new file mode 100644
index 0000000000..68c74914c6
--- /dev/null
+++ b/docs/en/UI/AspNetCore/JavaScript-API/Message.md
@@ -0,0 +1,128 @@
+# ASP.NET Core MVC / Razor Pages UI: JavaScript Message API
+
+Message API is used to show nice looking messages to the user as a blocking dialog. Message API is an abstraction provided by the ABP Framework and implemented using the [SweetAlert2](https://sweetalert2.github.io/) library by default.
+
+## Quick Example
+
+Use `abp.message.success(...)` function to show a success message:
+
+````js
+abp.message.success('Your changes have been successfully saved!', 'Congratulations');
+````
+
+It will show a dialog on the UI:
+
+
+
+## Informative Messages
+
+There are four types of informative message functions:
+
+* `abp.message.info(...)`
+* `abp.message.success(...)`
+* `abp.message.warn(...)`
+* `abp.message.error(...)`
+
+All these methods get two parameters:
+
+* `message`: The message (`string`) to be shown.
+* `title`: An optional (`string`) title.
+
+**Example: Show an error message**
+
+````js
+abp.message.error('Your credit card number is not valid!');
+````
+
+
+
+## Confirmation Message
+
+`abp.message.confirm(...)` function can be used to get a confirmation from the user.
+
+**Example**
+
+Use the following code to get a confirmation result from the user:
+
+````js
+abp.message.confirm('Are you sure to delete the "admin" role?')
+.then(function(confirmed){
+ if(confirmed){
+ console.log('TODO: deleting the role...');
+ }
+});
+````
+
+The resulting UI will be like shown below:
+
+
+
+If user has clicked the `Yes` button, the `confirmed` argument in the `then` callback function will be `true`.
+
+> "*Are you sure?*" is the default title (localized based on the current language) and you can override it.
+
+### The Return Value
+
+The return value of the `abp.message.confirm(...)` function is a promise, so you can chain a `then` callback as shown above.
+
+### Parameters
+
+`abp.message.confirm(...)` function has the following parameters:
+
+* `message`: A message (string) to show to the user.
+* `titleOrCallback` (optional): A title or a callback function. If you supply a string, it is shown as the title. If you supply a callback function (that gets a `bool` parameter) then it's called with the result.
+* `callback` (optional): If you've passes a title to the second parameter, you can pass your callback function as the 3rd parameter.
+
+Passing a callback function is an alternative to the `then` callback shown above.
+
+**Example: Providing all the parameters and getting result with the callback function**
+
+````js
+abp.message.confirm(
+ 'Are you sure to delete the "admin" role?',
+ 'Be careful!',
+ function(confirmed){
+ if(confirmed){
+ console.log('TODO: deleting the role...');
+ }
+ });
+````
+
+## SweetAlert Configuration
+
+The Message API is implemented using the [SweetAlert2](https://sweetalert2.github.io/) library by default. If you want to change its configuration, you can set the options in the `abp.libs.sweetAlert.config` object. The default configuration object is shown below:
+
+````js
+{
+ 'default': {
+ },
+ info: {
+ icon: 'info'
+ },
+ success: {
+ icon: 'success'
+ },
+ warn: {
+ icon: 'warning'
+ },
+ error: {
+ icon: 'error'
+ },
+ confirm: {
+ icon: 'warning',
+ title: 'Are you sure?',
+ buttons: ['Cancel', 'Yes']
+ }
+}
+````
+
+> "Are you sure?", "Cancel" and "Yes" texts are automatically localized based on the current language.
+
+So, if you want to set the `warn` icon, you can set it like:
+
+````js
+abp.libs.sweetAlert.config.warn.icon = 'error';
+````
+
+See the [SweetAlert document](https://sweetalert2.github.io/) for all the configuration options.
+
diff --git a/docs/en/UI/AspNetCore/JavaScript-API/Notify.md b/docs/en/UI/AspNetCore/JavaScript-API/Notify.md
new file mode 100644
index 0000000000..371aa8d4b9
--- /dev/null
+++ b/docs/en/UI/AspNetCore/JavaScript-API/Notify.md
@@ -0,0 +1,45 @@
+# ASP.NET Core MVC / Razor Pages UI: JavaScript Notify API
+
+Notify API is used to show toast style, auto disappearing UI notifications to the end user. It is implemented by the [Toastr](https://github.com/CodeSeven/toastr) library by default.
+
+## Quick Example
+
+Use `abp.notify.success(...)` function to show a success message:
+
+````js
+abp.notify.success(
+ 'The product "Acme Atom Re-Arranger" has been successfully deleted.',
+ 'Deleted the Product'
+);
+````
+
+A notification message is shown at the bottom right of the page:
+
+
+
+## Notification Types
+
+There are four types of pre-defined notifications;
+
+* `abp.notify.success(...)`
+* `abp.notify.info(...)`
+* `abp.notify.warn(...)`
+* `abp.notify.error(...)`
+
+All of the methods above gets the following parameters;
+
+* `message`: A message (`string`) to show to the user.
+* `title`: An optional title (`string`).
+* `options`: Additional options to be passed to the underlying library, to the Toastr by default.
+
+## Toastr Configuration
+
+The notification API is implemented by the [Toastr](https://github.com/CodeSeven/toastr) library by default. You can see its own configuration options.
+
+**Example: Show toast messages on the top right of the page**
+
+````js
+toastr.options.positionClass = 'toast-top-right';
+````
+
+> ABP sets this option to `toast-bottom-right` by default. You can override it just as shown above.
\ No newline at end of file
diff --git a/docs/en/UI/AspNetCore/JavaScript-API/ResourceLoader.md b/docs/en/UI/AspNetCore/JavaScript-API/ResourceLoader.md
new file mode 100644
index 0000000000..10b8c36f59
--- /dev/null
+++ b/docs/en/UI/AspNetCore/JavaScript-API/ResourceLoader.md
@@ -0,0 +1,40 @@
+# ASP.NET Core MVC / Razor Pages UI: JavaScript Resource Loader API
+
+`abp.ResourceLoader` is a service that can load a JavaScript or CSS file on demand. It guarantees to load the file only once even if you request multiple times.
+
+## Loading Script Files
+
+`abp.ResourceLoader.loadScript(...)` function **loads** a JavaScript file from the server and **executes** it.
+
+**Example: Load a JavaScript file**
+
+````js
+abp.ResourceLoader.loadScript('/Pages/my-script.js');
+````
+
+### Parameters
+
+`loadScript` function can get three parameters;
+
+* `url` (required, `string`): The URL of the script file to be loaded.
+* `loadCallback` (optional, `function`): A callback function that is called once the script is loaded & executed. In this callback you can safely use the code in the script file. This callback is called even if the file was loaded before.
+* `failCallback` (optional, `function`): A callback function that is called if loading the script fails.
+
+**Example: Provide the `loadCallback` argument**
+
+````js
+abp.ResourceLoader.loadScript('/Pages/my-script.js', function() {
+ console.log('successfully loaded :)');
+});
+````
+
+## Loading Style Files
+
+`abp.ResourceLoader.loadStyle(...)` function adds a `link` element to the `head` of the document for the given URL, so the CSS file is automatically loaded by the browser.
+
+**Example: Load a CSS file**
+
+````js
+abp.ResourceLoader.loadStyle('/Pages/my-styles.css');
+````
+
diff --git a/docs/en/UI/AspNetCore/JavaScript-API/Settings.md b/docs/en/UI/AspNetCore/JavaScript-API/Settings.md
new file mode 100644
index 0000000000..cf96cecdd0
--- /dev/null
+++ b/docs/en/UI/AspNetCore/JavaScript-API/Settings.md
@@ -0,0 +1,33 @@
+# ASP.NET Core MVC / Razor Pages UI: JavaScript Setting API
+
+Localization API allows you to get the values of the settings on the client side. You can read the current value of a setting in the client side only if it is allowed by the setting definition (on the server side).
+
+> This document only explains the JavaScript API. See the [settings document](../../../Settings.md) to understand the ABP setting system.
+
+## Basic Usage
+
+````js
+//Gets a value as string.
+var language = abp.setting.get('Abp.Localization.DefaultLanguage');
+
+//Gets an integer value.
+var requiredLength = abp.setting.getInt('Abp.Identity.Password.RequiredLength');
+
+//Gets a boolean value.
+var requireDigit = abp.setting.getBoolean('Abp.Identity.Password.RequireDigit');
+````
+
+## All Values
+
+`abp.setting.values` can be used to obtain all the setting values as an object where the object properties are setting names and property values are the setting values.
+
+An example value of this object is shown below:
+
+````js
+{
+ Abp.Localization.DefaultLanguage: "en",
+ Abp.Timing.TimeZone: "UTC",
+ ...
+}
+````
+
diff --git a/docs/en/UI/AspNetCore/Layout-Hooks.md b/docs/en/UI/AspNetCore/Layout-Hooks.md
index 49b334c6c0..7039749142 100644
--- a/docs/en/UI/AspNetCore/Layout-Hooks.md
+++ b/docs/en/UI/AspNetCore/Layout-Hooks.md
@@ -1,3 +1,105 @@
-# Layout Hooks
+# ASP.NET Core MVC / Razor Pages Layout Hooks
-TODO
\ No newline at end of file
+ABP Framework theming system places the page layout into the [theme](Theming.md) NuGet packages. That means the final application doesn't include a `Layout.cshtml`, so you can't directly change the layout code to customize it.
+
+You copy the theme code into your solution. In this case you are completely free to customize it. However, then you won't be able to get automatic updates of the theme (by upgrading the theme NuGet package).
+
+ABP Framework provides different ways of [customizing the UI](Customization-User-Interface.md).
+
+The **Layout Hook System** allows you to **add code** at some specific parts of the layout. All layouts of all themes should implement these hooks. Finally, you can add a **view component** into a hook point.
+
+## Example: Add Google Analytics Script
+
+Assume that you need to add the Google Analytics script to the layout (that will be available for all the pages). First, **create a view component** in your project:
+
+
+
+**NotificationViewComponent.cs**
+
+````csharp
+public class GoogleAnalyticsViewComponent : AbpViewComponent
+{
+ public IViewComponentResult Invoke()
+ {
+ return View("/Pages/Shared/Components/GoogleAnalytics/Default.cshtml");
+ }
+}
+````
+
+**Default.cshtml**
+
+````html
+
+````
+
+Change `UA-xxxxxx-1` with your own code.
+
+You can then add this component to any of the hook points in the `ConfigureServices` of your module:
+
+````csharp
+ConfigureSample message
+@Model.ProductName
+
+ 
+
+ + @Model.ProductDescription +
++ Reference: https://acme.com/catalog/ +
+