mirror of https://github.com/abpframework/abp
Halil İbrahim Kalkan
5 years ago
commit
39a94ea6eb
@ -0,0 +1,56 @@
|
||||
# ASP.NET Core MVC / Razor Pages UI: JavaScript UI Block/Busy API
|
||||
|
||||
UI Block API disables (blocks) the page or a part of the page.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
**Example: Block (disable) the complete page**
|
||||
|
||||
````js
|
||||
abp.ui.block();
|
||||
````
|
||||
|
||||
**Example: Block (disable) an HTML element**
|
||||
|
||||
````js
|
||||
abp.ui.block('#MyContainer');
|
||||
````
|
||||
|
||||
**Example: Enables the previously blocked element or page:**
|
||||
|
||||
````js
|
||||
abp.ui.unblock();
|
||||
````
|
||||
|
||||
## Options
|
||||
|
||||
`abp.ui.block()` method can get an options object which may contain the following fields:
|
||||
|
||||
* `elm`: An optional selector to find the element to be blocked (e.g. `#MyContainerId`). If not provided, the entire page is blocked. The selector can also be directly passed to the `block()` method as shown above.
|
||||
* `busy`: Set to `true` to show a progress indicator on the blocked area.
|
||||
* `promise`: A promise object with `always` or `finally` callbacks. This can be helpful if you want to automatically unblock the blocked area when a deferred operation completes.
|
||||
|
||||
**Example: Block an element with busy indicator**
|
||||
|
||||
````js
|
||||
abp.ui.block({
|
||||
elm: '#MySection',
|
||||
busy: true
|
||||
});
|
||||
````
|
||||
|
||||
The resulting UI will look like below:
|
||||
|
||||
|
||||
|
||||
## setBusy
|
||||
|
||||
`abp.ui.setBusy(...)` and `abp.ui.clearBusy()` are shortcut functions if you want to use the block with `busy` option.
|
||||
|
||||
**Example: Block with busy**
|
||||
|
||||
````js
|
||||
abp.ui.setBusy('#MySection');
|
||||
````
|
||||
|
||||
Then you can use `abp.ui.clearBusy();` to re-enable the busy area/page.
|
||||
@ -1,3 +1,50 @@
|
||||
# ASP.NET Core MVC / Razor Pages UI: JavaScript Logging API
|
||||
|
||||
TODO
|
||||
`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);
|
||||
````
|
||||
|
||||
|
||||
@ -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**
|
||||
|
||||
````
|
||||
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');
|
||||
````
|
||||
|
||||
|
After Width: | Height: | Size: 135 KiB |
Loading…
Reference in new issue