Browse Source

Added Dynamic JavaScript API Client Proxies document

pull/6004/head
Halil İbrahim Kalkan 6 years ago
parent
commit
7c52485c32
  1. 2
      docs/en/API/Dynamic-CSharp-API-Clients.md
  2. 92
      docs/en/UI/AspNetCore/Dynamic-JavaScript-Proxies.md
  3. 4
      docs/en/docs-nav.json

2
docs/en/API/Dynamic-CSharp-API-Clients.md

@ -1,4 +1,4 @@
# Dynamic C# API Clients
# Dynamic C# API Client Proxies
ABP can dynamically create C# API client proxies to call remote HTTP services (REST APIs). In this way, you don't need to deal with `HttpClient` and other low level HTTP features to call remote services and get results.

92
docs/en/UI/AspNetCore/Dynamic-JavaScript-Proxies.md

@ -1,3 +1,91 @@
# Dynamic JavaScript HTTP API Proxies
# Dynamic JavaScript API Client Proxies
TODO
It is typical to consume your HTTP APIs from your JavaScript code. To do that, you normally deal with low level AJAX calls, like $.ajax, or better [abp.ajax](JavaScript-API/Ajax.md). ABP Framework provides **a better way** to call your HTTP APIs from your JavaScript code: Dynamic JavaScript API Client Proxies!
## A Quick Example
Assume that you have an application service defined as shown below:
````csharp
using System;
using System.Threading.Tasks;
using Volo.Abp.Application.Dtos;
using Volo.Abp.Application.Services;
namespace Acme.BookStore.Authors
{
public interface IAuthorAppService : IApplicationService
{
Task<AuthorDto> GetAsync(Guid id);
Task<PagedResultDto<AuthorDto>> GetListAsync(GetAuthorListDto input);
Task<AuthorDto> CreateAsync(CreateAuthorDto input);
Task UpdateAsync(Guid id, UpdateAuthorDto input);
Task DeleteAsync(Guid id);
}
}
````
> You can follow the [web application development tutorial](../../Tutorials/Part-1.md) to learn how to create [application services](../../Application-Services.md), expose them as [HTTP APIs](../../API/Auto-API-Controllers.md) and consume from the JavaScript code as a complete example.
You can call any of the methods just like calling a JavaScript function. The JavaScript function has the identical function **name**, **parameters** and the **return value** with the C# method.
**Example: Get the authors list**
````js
acme.bookStore.authors.author.getList({
maxResultCount: 10
}).then(function(result){
console.log(result.items);
});
````
**Example: Delete an author**
```js
acme.bookStore.authors.author
.delete('7245a066-5457-4941-8aa7-3004778775f0') //Get id from somewhere!
.then(function() {
abp.notify.info('Successfully deleted!');
});
```
## AJAX Details
Dynamic JavaScript client proxy functions use the [abp.ajax](JavaScript-API/Ajax.md) under the hood. So, you have the same benefits like **automatic error handling**. Also, you can fully control the AJAX call by providing the options.
### The Return Value
Every function returns a [Deferred object](https://api.jquery.com/category/deferred-object/). That means you can chain with `then` to get the result, `catch` to handle the error, `always` to perform an action once the operation completes (success or failed).
### AJAX Options
Every function gets an additional **last parameter** after your own parameters. The last parameter is called as `ajaxParams`. It is an object that overrides the AJAX options.
**Example: Set `type` and `dataType` AJAX options**
````js
acme.bookStore.authors.author
.delete('7245a066-5457-4941-8aa7-3004778775f0', {
type: 'POST',
dataType: 'xml'
})
.then(function() {
abp.notify.info('Successfully deleted!');
});
````
See the [jQuery.ajax](https://api.jquery.com/jQuery.ajax/) documentation for all the available options.
## Service Proxy Script Endpoint
The magic is done by the `/Abp/ServiceProxyScript` endpoint defined by the ABP Framework and automatically added to the layout. You can visit this endpoint in your application to see the client proxy function definitions. This script file is automatically generated by the ABP Framework based on the server side method definitions and the related HTTP endpoint details.
## See Also
* [Web Application Development Tutorial](../../Tutorials/Part-1.md)
* [Auto API Controllers](../../API/Auto-API-Controllers.md)
* [Dynamic C# API Client Proxies](../../API/Dynamic-CSharp-API-Clients.md)

4
docs/en/docs-nav.json

@ -422,6 +422,10 @@
"text": "Page Alerts",
"path": "UI/AspNetCore/Page-Alerts.md"
},
{
"text": "Dynamic JavaScript API Client Proxies",
"path": "UI/AspNetCore/Dynamic-JavaScript-Proxies.md"
},
{
"text": "Client Side Package Management",
"path": "UI/AspNetCore/Client-Side-Package-Management.md"

Loading…
Cancel
Save