Browse Source

Documented JavaScript AJAX API for the MVC UI

pull/5771/head
Halil İbrahim Kalkan 5 years ago
parent
commit
9dbf61a3bf
  1. 102
      docs/en/UI/AspNetCore/JavaScript-API/Ajax.md
  2. 3
      docs/en/UI/AspNetCore/JavaScript-API/Dynamic-JavaScript-Client-Proxies.md
  3. 3
      docs/en/UI/AspNetCore/JavaScript-API/Message.md
  4. 13
      docs/en/docs-nav.json
  5. BIN
      docs/en/images/ajax-error.png

102
docs/en/UI/AspNetCore/JavaScript-API/Ajax.md

@ -0,0 +1,102 @@
# ASP.NET Core MVC / Razor Pages UI JavaScript AJAX API
`abp.ajax` API provides a convenient way of performing AJAX calls to the server. It internally uses JQuery's `$.ajax`, but automates some common tasks for you;
* Automatically **handles & localize the errors** and informs the user (using the [abp.message](Message.md)). So you typically don't care about errors.
* Automatically adds **anti forgery** token to the HTTP header to satisfy CSRF protection validation on the server side.
* Automatically sets **default options** and allows to configure the defaults in a single place.
* Can **block** a UI part (or the full page) during the AJAX operation.
* Allows to fully customize any AJAX call, by using the standard `$.ajax` **options**.
> While `abp.ajax` makes the AJAX call pretty easier, you typically will use the [Dynamic JavaScript Client Proxy](Dynamic-JavaScript-Client-Proxies.md) system to perform calls to your server side HTTP APIs. `abp.ajax` can be used when you need to perform low level AJAX operations.
## Usage
`abp.ajax` accepts an options object that is accepted by the standard [$.ajax](https://api.jquery.com/jquery.ajax/#jQuery-ajax-settings). All the standard options are valid. It returns a [promise](https://api.jquery.com/category/deferred-object/) as the return value.
**Example: Get the list of users**
````js
abp.ajax({
type: 'GET',
url: '/api/identity/users'
}).then(function(result){
console.log(result);
});
````
This command logs the list of users to the console, if you've **logged in** to the application and have [permission](../../../Authorization.md) for the user management page of the [Identity Module](../../../Modules/Identity.md).
## Error Handling
The example AJAX call above shows an **error message** if you haven't login to the application or you don't have the necessary permissions to perform this request:
![ajax-error](D:\Github\abp\docs\en\images\ajax-error.png)
All kinds of errors are automatically handled by `abp.ajax`, unless you want to disable it.
### Standard Error Response
`abp.ajax` is compatible with the [exception handling system](../../../Exception-Handling.md) of the ABP Framework and it properly handles the standard error format returned from the server. A typical error message is a JSON as like below:
````json
{
"error": {
"code": "App:010042",
"message": "This topic is locked and can not add a new message",
"details": "A more detailed info about the error..."
}
}
````
### Non-Standard Error Response & HTTP Status Codes
It also handles errors even if the standard error format was not sent by the server. This can be case if you bypass the ABP exception handling system and manually build the HTTP response on the server. In that case, **HTTP status codes** are considered.
The following HTTP Status Codes are pre-defined;
* **401**: Shows an error message like "*You should be authenticated (sign in) in order to perform this operation*". When the users click the OK button, they are redirected to the home page of the application to make them login again.
* **403**: Shows an error message like "*You are not allowed to perform this operation*".
* **404**: Shows an error message like "*The resource requested could not found on the server*".
* **Others**: Shows a generic error message like "*An error has occurred. Error detail not sent by server*".
All these messages are localized based on the current user's language.
### Manually Handling the Errors
Since `abp.ajax` returns a promise, you can always chain a `.cactch(...)` call to register a callback that is executed if the AJAX request fails.
**Example: Show an alert if the AJAX request fails**
````js
abp.ajax({
type: 'GET',
url: '/api/identity/users'
}).then(function(result){
console.log(result);
}).catch(function(){
alert("request failed :(");
});
````
While your callback is fired, ABP still handles the error itself. If you want to disable automatic error handling, pass `abpHandleError: false` the the `abp.ajax` options.
**Example: Disable the auto error handling**
````js
abp.ajax({
type: 'GET',
url: '/api/identity/users',
abpHandleError: false //DISABLE AUTO ERROR HANDLING
}).then(function(result){
console.log(result);
}).catch(function(){
alert("request failed :(");
});
````
If you set `abpHandleError: false` and don't catch the error yourself, then the error will be hidden and the request silently fails. `abp.ajax` still logs the error to the browser console (see the *Configuration* section to override it).
## Configuration
TODO

3
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

3
docs/en/UI/AspNetCore/JavaScript-API/Message.md

@ -0,0 +1,3 @@
# ASP.NET Core MVC / Razor Pages UI: JavaScript Message API
TODO

13
docs/en/docs-nav.json

@ -440,6 +440,19 @@
"text": "Theming",
"path": "UI/AspNetCore/Theming.md"
},
{
"text": "JavaScript API",
"items": [
{
"text": "Overall",
"path": "UI/AspNetCore/JavaScript-API/Index.md"
},
{
"text": "AJAX",
"path": "UI/AspNetCore/JavaScript-API/Ajax.md"
}
]
},
{
"text": "Customize/Extend the UI",
"path": "UI/AspNetCore/Customization-User-Interface.md"

BIN
docs/en/images/ajax-error.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Loading…
Cancel
Save