mirror of https://github.com/abpframework/abp.git
liangshiwei
6 years ago
438 changed files with 12130 additions and 5241 deletions
@ -0,0 +1,79 @@ |
|||
# ABP Framework 4.1 RC Has Been Published |
|||
|
|||
Today, we have released the [ABP Framework](https://abp.io/) (and the [ABP Commercial](https://commercial.abp.io/)) 4.1.0 RC. This blog post introduces the new features, important changes in the new version. |
|||
|
|||
> **The planned release date for the [4.1.0 final](https://github.com/abpframework/abp/milestone/47) version is January 4, 2021**. |
|||
|
|||
## Get Started with the 4.1 RC |
|||
|
|||
If you want to try the version `4.1.0` today, follow the steps below; |
|||
|
|||
1) **Upgrade** the ABP CLI to the version `4.1.0-rc.1` using a command line terminal: |
|||
|
|||
````bash |
|||
dotnet tool update Volo.Abp.Cli -g --version 4.1.0-rc.1 |
|||
```` |
|||
|
|||
**or install** if you haven't installed before: |
|||
|
|||
````bash |
|||
dotnet tool install Volo.Abp.Cli -g --version 4.1.0-rc.1 |
|||
```` |
|||
|
|||
2) Create a **new application** with the `--preview` option: |
|||
|
|||
````bash |
|||
abp new BookStore --preview |
|||
```` |
|||
|
|||
See the [ABP CLI documentation](https://docs.abp.io/en/abp/3.3/CLI) for all the available options. |
|||
|
|||
> You can also use the *Direct Download* tab on the [Get Started](https://abp.io/get-started) page by selecting the **Preview checkbox**. |
|||
|
|||
## What's new with the ABP Framework 4.1 |
|||
|
|||
TODO |
|||
|
|||
## What's new with the ABP Commercial 4.0 |
|||
|
|||
TODO |
|||
|
|||
## Other News |
|||
|
|||
### ABP Community Contents |
|||
|
|||
A lot of new contents have been published in the ABP Community Web Site in the last two weeks: |
|||
|
|||
* [Using DevExpress Blazor UI Components With the ABP Framework](https://community.abp.io/articles/using-devexpress-blazor-ui-components-with-the-abp-framework-wrpoa8rw) by [@berkansasmaz](https://github.com/berkansasmaz) |
|||
* [Creating a new UI theme by copying the Basic Theme (for MVC UI)](https://community.abp.io/articles/creating-a-new-ui-theme-by-copying-the-basic-theme-for-mvc-ui-yt9b18io) by [@ebubekirdinc](https://github.com/ebubekirdinc) |
|||
* [Using Angular Material Components With the ABP Framework](https://community.abp.io/members/muhammedaltug) by [@muhammedaltug](https://github.com/muhammedaltug) |
|||
* [How to export Excel files from the ABP framework](https://community.abp.io/articles/how-to-export-excel-files-from-the-abp-framework-wm7nnw3n) by [bartvanhoey](https://github.com/bartvanhoey) |
|||
* [Creating an Event Organizer Application with the ABP Framework & Blazor UI](https://community.abp.io/articles/creating-an-event-organizer-application-with-the-blazor-ui-wbe0sf2z) by [@hikalkan](https://github.com/hikalkan) |
|||
|
|||
Thanks to all of the contributors. We are waiting for your contributions too. If you want to create content for the ABP Community, please visit [community.abp.io](https://community.abp.io/) website and submit your article. |
|||
|
|||
#### Be a Superhero on Day 1 with ABP.IO |
|||
|
|||
Thanks to [@lprichar](http://github.com/lprichar) prepared an awesome introduction video for the ABP.IO Platform: "[Be a Superhero on Day 1 with ABP.IO](https://www.youtube.com/watch?v=ea0Zx9DLcGA)". |
|||
|
|||
#### New Sample Application: Event Organizer |
|||
|
|||
This is a new example application developed using the ABP Framework and the Blazor UI. See [this article](https://community.abp.io/articles/creating-an-event-organizer-application-with-the-blazor-ui-wbe0sf2z) for a step by step implementation guide. |
|||
|
|||
 |
|||
|
|||
### Github Discussions |
|||
|
|||
We enabled the [GitHub Discussions for the abp repository](https://github.com/abpframework/abp/discussions) as another place to discuss ideas or get help for the ABP Framework. The ABP core team is spending time participating in discussions and answering to questions as much as possible. |
|||
|
|||
## About the Next Release(s) |
|||
|
|||
Beginning from the next version (4.2.0), we are starting to spend more effort on the **CMS Kit module**. The purpose of this module is to provide CMS primitives (e.g. **comments, tags, reactions, contents**...) and features (e.g. **blog, pages, surveys**) as pre-built and reusable components. Current blog module will be a part of the CMS Kit module. We will continue to prepare documents, guides, tutorials and examples. And surely, we will continue to make enhancements and optimizations on the current features. |
|||
|
|||
> The planned preview release date for the version 4.2.0 is January 14, 2021 and the final (stable) version release date is January 28, 2021. |
|||
|
|||
Follow the [GitHub milestones](https://github.com/abpframework/abp/milestones) for all the planned ABP Framework version release dates. |
|||
|
|||
## Feedback |
|||
|
|||
Please check out the ABP Framework 4.1.0 RC and [provide feedback](https://github.com/abpframework/abp/issues/new) to help us to release a more stable version. **The planned release date for the [4.1.0 final](https://github.com/abpframework/abp/milestone/45) version is January 4, 2021.**. |
|||
|
After Width: | Height: | Size: 865 KiB |
@ -0,0 +1,110 @@ |
|||
## Using DevExpress Blazor UI Components With the ABP Framework |
|||
|
|||
Hi, in this step by step article, I will show you how to integrate [DevExpress](https://demos.devexpress.com/blazor/) blazor UI components into ABP Framework-based applications. |
|||
|
|||
 |
|||
|
|||
*(A screenshot from the example application developed in this article)* |
|||
|
|||
## Create the Project |
|||
|
|||
> ABP Framework offers startup templates to get into business faster. |
|||
|
|||
In this article, I will create a new startup template with EF Core as a database provider and Blazor for UI framework. But if you already have a project with Blazor UI, you don't need to create a new startup template, you can directly implement the following steps to your existing project. |
|||
|
|||
> If you already have a project with the Blazor UI, you can skip this section. |
|||
|
|||
* Before starting to development, we will create a solution named `DevExpressSample` (or whatever you want). We will create a new startup template with EF Core as a database provider and Blazor for UI framework by using [ABP CLI](https://docs.abp.io/en/abp/latest/CLI): |
|||
|
|||
````bash |
|||
abp new DevExpressSample -u blazor |
|||
```` |
|||
|
|||
 |
|||
|
|||
* Our project boilerplate will be ready after the download is finished. Then, we can open the solution in the Visual Studio (or any other IDE) and run the `DevExpressSample.DbMigrator` to create the database and seed initial data (which creates the admin user, admin role, permissions etc.) |
|||
|
|||
* After database and initial data created, |
|||
* Run the `DevExpressSample.HttpApi.Host` to see our server side working and |
|||
* Run the `DevExpressSample.Blazor` to see our UI working properly. |
|||
|
|||
> _Default login credentials for admin: username is **admin** and password is **1q2w3E\***_ |
|||
|
|||
## Install DevExpress |
|||
|
|||
You can follow [this documentation](https://docs.devexpress.com/Blazor/401986/getting-started/install-components-and-create-an-application/without-devexpress-installer/microsoft-templates) to install DevExpress packages into your computer. |
|||
|
|||
> Don't forget to add _"DevExpress NuGet Feed"_ to your **Nuget Package Sources**. |
|||
|
|||
### Adding DevExpress NuGet Packages |
|||
|
|||
Add the `DevExpress.Blazor` NuGet package to the `DevExpressSample.Blazor` project. |
|||
|
|||
``` |
|||
Install-Package DevExpress.Blazor |
|||
``` |
|||
|
|||
### Register DevExpress Resources |
|||
|
|||
1. Add the following line to the HEAD section of the `wwwroot/index.html` file within the `DevExpressSample.Blazor` project: |
|||
|
|||
```Razor |
|||
<head> |
|||
<!--...--> |
|||
<link href="_content/DevExpress.Blazor/dx-blazor.css" rel="stylesheet" /> |
|||
</head> |
|||
``` |
|||
|
|||
2. In the `DevExpressSampleBlazorModule` class, call the `AddDevExpressBlazor()` method from your project's `ConfigureServices()` method: |
|||
|
|||
```csharp |
|||
public override void ConfigureServices(ServiceConfigurationContext context) |
|||
{ |
|||
var environment = context.Services.GetSingletonInstance<IWebAssemblyHostEnvironment>(); |
|||
var builder = context.Services.GetSingletonInstance<WebAssemblyHostBuilder>(); |
|||
// ... |
|||
builder.Services.AddDevExpressBlazor(); |
|||
} |
|||
``` |
|||
|
|||
3. Register the **DevExpressSample.Blazor** namespace in the `_Imports.razor` file: |
|||
|
|||
```Razor |
|||
@using DevExpress.Blazor |
|||
``` |
|||
|
|||
### Result |
|||
|
|||
The installation step was done. You can use any DevExpress Blazor UI component in your application: |
|||
|
|||
Example: A Scheduler: |
|||
|
|||
 |
|||
|
|||
This example has been created by following [this documentation](https://demos.devexpress.com/blazor/SchedulerViewTypes). |
|||
|
|||
## The Sample Application |
|||
|
|||
We have created a sample application with [Data Grid](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1) example. |
|||
|
|||
### The Source Code |
|||
|
|||
You can download the source code from [here](https://github.com/abpframework/abp-samples/tree/master/DevExpress-Blazor). |
|||
|
|||
The related files for this example are marked in the following screenshots. |
|||
|
|||
 |
|||
|
|||
 |
|||
|
|||
 |
|||
|
|||
### Additional Notes |
|||
|
|||
#### Data Storage |
|||
|
|||
I've used an in-memory list to store data for this example, instead of a real database. Because it is not related to DevExpress usage. There is a `SampleDataService.cs` file in `Data` folder at `DevExpressSample.Application.Contracts` project. All the data is stored here. |
|||
|
|||
## Conclusion |
|||
|
|||
In this article, I've explained how to use [DevExpress](https://www.devexpress.com/blazor/) components in your application. ABP Framework is designed so that it can work with any UI library/framework. |
|||
|
After Width: | Height: | Size: 155 KiB |
|
After Width: | Height: | Size: 480 KiB |
|
After Width: | Height: | Size: 69 KiB |
|
After Width: | Height: | Size: 58 KiB |
|
After Width: | Height: | Size: 105 KiB |
|
After Width: | Height: | Size: 113 KiB |
|
After Width: | Height: | Size: 880 KiB |
@ -0,0 +1,534 @@ |
|||
# How to Integrate the Telerik Blazor Components to the ABP Blazor UI? |
|||
|
|||
## Introduction |
|||
|
|||
Hi, in this step by step article, we will see how we can integrate the Telerik Blazor Components to our Blazor UI. |
|||
|
|||
## Creating the Solution |
|||
|
|||
> ABP Framework offers startup templates to get into business faster. |
|||
|
|||
In this article, I will create a new startup template with EF Core as a database provider and Blazor for UI framework. But if you already have a project with Blazor UI, you don't need to create a new startup template, you can directly implement the following steps to your existing project. |
|||
|
|||
> If you already have a project with the Blazor UI, you can skip this section. |
|||
|
|||
* Before starting to development, we will create a solution named `TelerikComponents` (or whatever you want). We will create a new startup template with EF Core as a database provider and Blazor for UI framework by using [ABP CLI](https://docs.abp.io/en/abp/latest/CLI): |
|||
|
|||
```bash |
|||
abp new TelerikComponents --ui blazor --database-provider ef |
|||
``` |
|||
|
|||
* Our project boilerplate will be ready after the download is finished. Then, we can open the solution in the Visual Studio (or any other IDE) and run the `TelerikComponents.DbMigrator` to create the database and seed initial data (which creates the admin user, admin role, permissions, etc.) |
|||
|
|||
* After the database and initial data created, |
|||
* Run the `TelerikComponents.HttpApi.Host` to see our server-side working and |
|||
* Run the `TelerikComponents.Blazor` to see our UI working. |
|||
|
|||
> _Default login credentials for admin: username is **admin** and password is **1q2w3E\***_ |
|||
|
|||
## Starting the Development |
|||
|
|||
### Pre-requisite |
|||
|
|||
* First thing we need to do is downloading the [Progress Control Panel](https://www.telerik.com/download-trial-file/v2/control-panel?_ga=2.212029332.1667119438.1607582144-1944255175.1605161949) to get Telerik Blazor Components on our development machine. |
|||
|
|||
* If you will use the Telerik Blazor Components for the first time or you don't have an active license you can click [here](https://www.telerik.com/login/v2/download-b?ReturnUrl=https%3a%2f%2fwww.telerik.com%2fdownload-trial-file%2fv2-b%2fui-for-blazor%3f_ga%3d2.212029332.1667119438.1607582144-1944255175.1605161949#register) to download free trial. |
|||
|
|||
> You can find the more installation details from [here](https://docs.telerik.com/blazor-ui/getting-started/client-blazor?_ga=2.55603115.1667119438.1607582144-1944255175.1605161949&_gac=1.261851647.1607669357.CjwKCAiAq8f-BRBtEiwAGr3DgUDhBT25rs7hU0EQ8K-AfeUVxs3hSoIuIAuBOZ17CNPI4ZEArORPExoCyd4QAvD_BwE#step-0---download-the-components). |
|||
|
|||
>**Notes:** To download Telerik Blazor packages via NuGet, we need to setup Telerik NuGet package source. We can state it in the installer as below. In this way, we can download the required Telerik Blazor packages via NuGet. |
|||
|
|||
 |
|||
|
|||
### Step 1 (Configurations) |
|||
|
|||
* We need to install the `Telerik.UI.for.Blazor` Nuget package to our Blazor project (`*.Blazor`). We need to choose package source to **telerik.com** for Visual Studio to see this package. |
|||
|
|||
* If you use trial version of Telerik, you can download **Telerik.UI.for.Blazor.Trial** package via NuGet. |
|||
|
|||
* After the installation finished, we need to open **index.html** (it's under *wwwroot* folder) to add css and js files in our application. |
|||
|
|||
* Add the following lines just before the closing head tag (**/head**). |
|||
|
|||
```html |
|||
... |
|||
<link rel="stylesheet" href="https:unpkg.com/@progress/kendo-theme-default@latest/dist/all.css" /> |
|||
<script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js" defer></script> |
|||
<!-- For Trial licenses use |
|||
<script src="_content/Telerik.UI.for.Blazor.Trial/js/telerik-blazor.js" defer></script> |
|||
--> |
|||
</head> |
|||
``` |
|||
|
|||
* After that, we need to add the Telerik Blazor Components to our application's service collection. So just open the `TelerikComponentsBlazorModule` and update the `ConfigureServices` method with the following content. |
|||
|
|||
```csharp |
|||
public override void ConfigureServices(ServiceConfigurationContext context) |
|||
{ |
|||
var environment = context.Services.GetSingletonInstance<IWebAssemblyHostEnvironment>(); |
|||
var builder = context.Services.GetSingletonInstance<WebAssemblyHostBuilder>(); |
|||
|
|||
ConfigureAuthentication(builder); |
|||
ConfigureHttpClient(context, environment); |
|||
ConfigureBlazorise(context); |
|||
ConfigureRouter(context); |
|||
ConfigureUI(builder); |
|||
ConfigureMenu(context); |
|||
ConfigureAutoMapper(context); |
|||
|
|||
//add this line to be able to use the components |
|||
builder.Services.AddTelerikBlazor(); |
|||
} |
|||
``` |
|||
|
|||
* After the service added we will continue by opening **_Imports.razor** file and add the global using statements as below. This will bring our Telerik components into scope throughout the application. |
|||
|
|||
 |
|||
|
|||
* After all of these steps, the Telerik UI Components are ready to be used anywhere in our application. We can use the Telerik Blazor Components by wrapping our components or pages between `<TelerikRootComponent>` and `</TelerikRootComponent>` tags. |
|||
|
|||
### Step 2 - Checking Configurations |
|||
|
|||
* We should check, have we done the right configurations or not. For that, we can open the **Index.razor** file and we can update the component with the following content. |
|||
|
|||
```razor |
|||
@page "/" |
|||
@using Volo.Abp.MultiTenancy |
|||
@inherits TelerikComponentsComponentBase |
|||
@inject ICurrentTenant CurrentTenant |
|||
@inject AuthenticationStateProvider AuthenticationStateProvider |
|||
@using System.Timers |
|||
|
|||
@implements IDisposable |
|||
|
|||
<TelerikRootComponent> |
|||
<div class="progress-bar-wrapper"> |
|||
<h5 class="progress-info-title">Telerik Progress Bar Component</h5> |
|||
<TelerikProgressBar Value="@ProgressValue" Max="100"></TelerikProgressBar> |
|||
</div> |
|||
</TelerikRootComponent> |
|||
|
|||
@code { |
|||
private const int TimerInterval = 1000; |
|||
private const int TotalTime = 10 * TimerInterval; |
|||
private double ProgressValue = 0; |
|||
private int ProgressStep = 100 / (TotalTime / TimerInterval); |
|||
private Timer Timer { get; set; } = new Timer(); |
|||
|
|||
private void Dispose() |
|||
{ |
|||
StopProgress(); |
|||
Timer?.Close(); |
|||
} |
|||
|
|||
protected override void OnAfterRender(bool firstRender) |
|||
{ |
|||
if (Timer.Enabled == false) |
|||
{ |
|||
Timer.Interval = TimerInterval; |
|||
Timer.Elapsed -= OnTimerElapsed; |
|||
Timer.Elapsed += OnTimerElapsed; |
|||
Timer.AutoReset = true; |
|||
Timer.Start(); |
|||
} |
|||
} |
|||
|
|||
private void OnTimerElapsed(Object source, ElapsedEventArgs e) |
|||
{ |
|||
if (ProgressValue < 100) |
|||
{ |
|||
UpdateProgress(); |
|||
} |
|||
else |
|||
{ |
|||
StopProgress(); |
|||
} |
|||
} |
|||
|
|||
private void UpdateProgress() |
|||
{ |
|||
ProgressValue += ProgressStep; |
|||
|
|||
InvokeAsync(StateHasChanged); |
|||
} |
|||
|
|||
private void StopProgress() |
|||
{ |
|||
Timer?.Stop(); |
|||
} |
|||
} |
|||
|
|||
<style> |
|||
.progress-info-title { |
|||
font-weight: bold; |
|||
font-size: 1.4em; |
|||
} |
|||
</style> |
|||
``` |
|||
|
|||
* In here, we've just added the `TelerikProgressBar` component to check the integration configured properly. |
|||
|
|||
* When we run `*.HttpApi.Host` and `*.Blazor` projects, we should see that the `TelerikProgressBar` component works and has similar view as the below gif. |
|||
|
|||
 |
|||
|
|||
* If you haven't seen this component like above, you should check the above configurations and be assure every step done as stated. |
|||
|
|||
### Step 3 - Using The Telerik Blazor Components (Sample Application) |
|||
|
|||
* Let's create a sample application for use other Telerik Blazor Components (like DataGrid). |
|||
|
|||
* We will use [jsonplaceholder](https://jsonplaceholder.typicode.com/) as **mock data** to the listing, adding, updating and deleting posts. |
|||
|
|||
* Firstly, we can create a folder named `Posts` and inside this folder, we can create the classes which are highlighted in the following screenshot. |
|||
|
|||
 |
|||
|
|||
* After classes created we can fill the classes with the following contents. |
|||
|
|||
**Post.cs** |
|||
```csharp |
|||
using System; |
|||
|
|||
namespace TelerikComponents.Posts |
|||
{ |
|||
[Serializable] |
|||
public class Post |
|||
{ |
|||
public int Id { get; set; } |
|||
|
|||
public string Title { get; set; } |
|||
|
|||
public string Body { get; set; } |
|||
|
|||
public int UserId { get; set; } |
|||
} |
|||
} |
|||
``` |
|||
|
|||
**Comment.cs** |
|||
```csharp |
|||
using System; |
|||
|
|||
namespace TelerikComponents.Posts |
|||
{ |
|||
[Serializable] |
|||
public class Comment |
|||
{ |
|||
public int PostId { get; set; } |
|||
|
|||
public int Id { get; set; } |
|||
|
|||
public string Name { get; set; } |
|||
|
|||
public string Email { get; set; } |
|||
|
|||
public string Body { get; set; } |
|||
} |
|||
} |
|||
``` |
|||
|
|||
**IPostAppService.cs** |
|||
```csharp |
|||
using System.Collections.Generic; |
|||
using System.Threading.Tasks; |
|||
using Volo.Abp.Application.Services; |
|||
|
|||
namespace TelerikComponents.Posts |
|||
{ |
|||
public interface IPostAppService : IApplicationService |
|||
{ |
|||
Task<List<Post>> GetPostsAsync(); |
|||
|
|||
Task<Post> AddPostAsync(Post post); |
|||
|
|||
Task<Post> UpdatePostAsync(int postId, Post post); |
|||
|
|||
Task DeletePostAsync(int postId); |
|||
|
|||
Task<Comment> GetFirstCommentByPostIdAsync(int postId); |
|||
} |
|||
} |
|||
``` |
|||
* In here, we basically created two class (which are **Post** and **Comment**). These classes are used to hold data returned as JSON. |
|||
|
|||
* After that, we need to implement `IPostAppService`. For achieve this, we can create a folder named `Posts` in **\*.Application** layer and inside this folder we can create a class named `PostAppService` with the following content. |
|||
|
|||
**PostAppService.cs** |
|||
```csharp |
|||
using System.Collections.Generic; |
|||
using System.Net.Http; |
|||
using System.Text; |
|||
using System.Text.Json; |
|||
using System.Threading.Tasks; |
|||
using Volo.Abp.Application.Services; |
|||
|
|||
namespace TelerikComponents.Posts |
|||
{ |
|||
public class PostAppService : ApplicationService, IPostAppService |
|||
{ |
|||
private JsonSerializerOptions _options = new JsonSerializerOptions |
|||
{ |
|||
IncludeFields = true, |
|||
PropertyNameCaseInsensitive = true |
|||
}; |
|||
|
|||
public async Task<List<Post>> GetPostsAsync() |
|||
{ |
|||
var url = "https://jsonplaceholder.typicode.com/posts"; |
|||
List<Post> _posts = new List<Post>(); |
|||
|
|||
using (var client = new HttpClient()) |
|||
{ |
|||
var result = await client.GetAsync(url); |
|||
|
|||
if (result.IsSuccessStatusCode) |
|||
{ |
|||
var content = await result.Content.ReadAsStringAsync(); |
|||
var deserializedPosts = JsonSerializer.Deserialize<List<Post>>(content, _options); |
|||
|
|||
_posts = deserializedPosts; |
|||
} |
|||
} |
|||
|
|||
return _posts; |
|||
} |
|||
|
|||
public async Task<Post> AddPostAsync(Post post) |
|||
{ |
|||
var url = "https://jsonplaceholder.typicode.com/posts"; |
|||
Post addedPost = null; |
|||
|
|||
using (var client = new HttpClient()) |
|||
{ |
|||
var serializePost = JsonSerializer.Serialize(post); |
|||
var content = new StringContent(serializePost, Encoding.UTF8, "application/json"); |
|||
var result = await client.PostAsync(url, content); |
|||
|
|||
if (result.IsSuccessStatusCode) |
|||
{ |
|||
var response = await result.Content.ReadAsStringAsync(); |
|||
addedPost = JsonSerializer.Deserialize<Post>(response); |
|||
} |
|||
} |
|||
|
|||
return addedPost; |
|||
} |
|||
|
|||
public async Task<Post> UpdatePostAsync(int postId, Post post) |
|||
{ |
|||
var url = $"https://jsonplaceholder.typicode.com/posts/{postId}"; |
|||
Post updatedPost = null; |
|||
|
|||
using (var client = new HttpClient()) |
|||
{ |
|||
var serializePost = JsonSerializer.Serialize(post); |
|||
var content = new StringContent(serializePost, Encoding.UTF8, "application/json"); |
|||
var result = await client.PutAsync(url, content); |
|||
|
|||
if (result.IsSuccessStatusCode) |
|||
{ |
|||
var response = await result.Content.ReadAsStringAsync(); |
|||
updatedPost = JsonSerializer.Deserialize<Post>(response); |
|||
} |
|||
} |
|||
|
|||
return updatedPost; |
|||
} |
|||
|
|||
public async Task DeletePostAsync(int postId) |
|||
{ |
|||
var url = $"https://jsonplaceholder.typicode.com/posts/{postId}"; |
|||
|
|||
using (var client = new HttpClient()) |
|||
{ |
|||
await client.DeleteAsync(url); |
|||
} |
|||
} |
|||
|
|||
public async Task<Comment> GetFirstCommentByPostIdAsync(int postId) |
|||
{ |
|||
var url = $"https://jsonplaceholder.typicode.com/posts/{postId}/comments"; |
|||
|
|||
List<Comment> _comments = new List<Comment>(); |
|||
|
|||
using (var client = new HttpClient()) |
|||
{ |
|||
var result = await client.GetAsync(url); |
|||
|
|||
if (result.IsSuccessStatusCode) |
|||
{ |
|||
var content = await result.Content.ReadAsStringAsync(); |
|||
var deserializedPosts = JsonSerializer.Deserialize<List<Comment>>(content, _options); |
|||
|
|||
_comments = deserializedPosts; |
|||
} |
|||
} |
|||
|
|||
return _comments[0]; |
|||
} |
|||
} |
|||
} |
|||
``` |
|||
|
|||
* In here, we've implemented `IPostAppService` methods by using [jsonplaceholder](https://jsonplaceholder.typicode.co) API. These endpoints provide us basic crud functionallity. |
|||
|
|||
* After the implemenation, we can start to create the user interface. |
|||
|
|||
#### Blazor UI |
|||
|
|||
* We can create **/Posts** page for listing, updating, deleting and creating our posts. So, create a razor page named `Posts.razor` under **Pages** folder in `*.Blazor` project. |
|||
|
|||
**Posts.razor** |
|||
```razor |
|||
@page "/Posts" |
|||
@using TelerikComponents.Posts |
|||
@using IconName = Telerik.Blazor.IconName |
|||
@inject IPostAppService PostAppService |
|||
|
|||
<h3>Posts</h3> |
|||
|
|||
<TelerikRootComponent> |
|||
<TelerikGrid Data="@GridData" |
|||
OnUpdate="@UpdateHandler" |
|||
OnDelete="@DeleteHandler" |
|||
OnCreate="@CreateHandler" |
|||
@ref="@Grid" |
|||
Pageable="true" |
|||
Groupable="true" |
|||
Sortable="true" |
|||
FilterMode="GridFilterMode.FilterMenu" |
|||
Resizable="true" |
|||
Reorderable="true" |
|||
EditMode="GridEditMode.Popup" |
|||
SelectionMode="GridSelectionMode.Single" |
|||
PageSize="5" |
|||
Navigable="true"> |
|||
<GridColumns> |
|||
<GridColumn Field="@nameof(Post.Title)"/> |
|||
<GridColumn Field="@nameof(Post.Body)"/> |
|||
<GridCommandColumn Width="190px"> |
|||
<GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton> |
|||
<GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton> |
|||
<GridCommandButton Command="Delete" Icon="delete" Primary="true">Delete</GridCommandButton> |
|||
<GridCommandButton Icon="@IconName.Window" OnClick="(e) => PostDetailAsync(e)">Display Comment</GridCommandButton> |
|||
<GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton> |
|||
</GridCommandColumn> |
|||
</GridColumns> |
|||
<GridToolBar> |
|||
<GridCommandButton Command="Add" Icon="add">Add Post</GridCommandButton> |
|||
</GridToolBar> |
|||
</TelerikGrid> |
|||
|
|||
@* Modal *@ |
|||
<TelerikWindow Class="demo-window" Width="500px" Height="250px" Centered="true" @bind-Visible=@ModalVisible Modal="true"> |
|||
<WindowTitle> |
|||
<strong>Comment</strong> |
|||
</WindowTitle> |
|||
<WindowActions> |
|||
<WindowAction Name="Close" /> |
|||
</WindowActions> |
|||
<WindowContent> |
|||
<p><b>Email:</b> @Comment.Email</p> |
|||
<p> |
|||
<b>Message:</b> @Comment.Body |
|||
</p> |
|||
</WindowContent> |
|||
</TelerikWindow> |
|||
</TelerikRootComponent> |
|||
``` |
|||
|
|||
**Post.razor.cs** |
|||
```csharp |
|||
using System.Collections.Generic; |
|||
using System.Linq; |
|||
using System.Threading.Tasks; |
|||
using Telerik.Blazor.Components; |
|||
using TelerikComponents.Posts; |
|||
|
|||
namespace TelerikComponents.Blazor.Pages |
|||
{ |
|||
public partial class Posts |
|||
{ |
|||
private List<Post> GridData { get; set; } |
|||
private TelerikGrid<Post> Grid { get; set; } |
|||
private bool ModalVisible { get; set; } = false; |
|||
private Comment Comment { get; set; } |
|||
|
|||
public Posts() |
|||
{ |
|||
Comment = new Comment(); |
|||
} |
|||
|
|||
protected override async Task OnInitializedAsync() |
|||
{ |
|||
await LoadDataAsync(); |
|||
} |
|||
|
|||
private async Task LoadDataAsync() |
|||
{ |
|||
GridData = await PostAppService.GetPostsAsync(); |
|||
} |
|||
|
|||
private async Task UpdateHandler(GridCommandEventArgs args) |
|||
{ |
|||
var post = (Post) args.Item; |
|||
|
|||
await PostAppService.UpdatePostAsync(post.Id, post); |
|||
|
|||
var matchingPost = GridData.FirstOrDefault(x => x.Id == post.Id); |
|||
|
|||
if (matchingPost != null) |
|||
{ |
|||
matchingPost.Body = post.Body; |
|||
matchingPost.Title = post.Title; |
|||
} |
|||
} |
|||
|
|||
private async Task DeleteHandler(GridCommandEventArgs args) |
|||
{ |
|||
var post = (Post) args.Item; |
|||
|
|||
GridData.Remove(post); |
|||
} |
|||
|
|||
private async Task CreateHandler(GridCommandEventArgs args) |
|||
{ |
|||
var post = (Post) args.Item; |
|||
|
|||
var addedPost = await PostAppService.AddPostAsync(post); |
|||
|
|||
GridData.Insert(0, addedPost); |
|||
} |
|||
|
|||
private async Task PostDetailAsync(GridCommandEventArgs args) |
|||
{ |
|||
var post = (Post) args.Item; |
|||
|
|||
Comment = await PostAppService.GetFirstCommentByPostIdAsync(post.Id); |
|||
|
|||
ModalVisible = true; |
|||
} |
|||
} |
|||
} |
|||
``` |
|||
|
|||
* In here, we've used `TelerikGrid` component. |
|||
|
|||
* The `Telerik Grid` is a powerful component, which allows you to visualize and edit data via its table representation. It provides a variety of options about how to present and perform operations over the underlying data, such as paging, sorting, filtering and editing. |
|||
|
|||
* The Blazor UI Grid allows flexible customization of its items exposing rows, columns and edit templates for this purpose. |
|||
|
|||
### Final Result |
|||
|
|||
* After all of these steps, we can finally run our application. |
|||
* Run `*.HttpApi.Host` project for use the required endpoints, |
|||
* Run `*.Blazor` project for see the Blazor UI. |
|||
|
|||
* When we navigate to `Posts` route, we should see the following screenshot in this page. |
|||
|
|||
 |
|||
|
|||
## Conclusion |
|||
|
|||
In this article, I've tried to explain how we can integrate [Telerik Blazor Component](https://www.telerik.com/blazor-ui) to our Blazor UI. ABP Framework designed as modular, so that it can work with any UI library/framework. |
|||
|
After Width: | Height: | Size: 51 KiB |
|
After Width: | Height: | Size: 187 KiB |
|
After Width: | Height: | Size: 31 KiB |
|
After Width: | Height: | Size: 88 KiB |
|
After Width: | Height: | Size: 1.3 MiB |
File diff suppressed because it is too large
|
After Width: | Height: | Size: 4.1 MiB |
|
After Width: | Height: | Size: 4.7 MiB |
|
After Width: | Height: | Size: 3.5 MiB |
|
After Width: | Height: | Size: 1.2 MiB |
|
After Width: | Height: | Size: 1.6 MiB |
|
After Width: | Height: | Size: 870 KiB |
@ -1,3 +1,393 @@ |
|||
# Module Entity Extensions |
|||
|
|||
See https://docs.abp.io/en/commercial/latest/guides/module-entity-extensions (it will be moved here soon). |
|||
## Introduction |
|||
|
|||
Module entity extension system is a **high level** extension system that allows you to **define new properties** for existing entities of the depended modules. It automatically **adds properties to the entity, database, HTTP API and the user interface** in a single point. |
|||
|
|||
> The module must be developed the *Module Entity Extensions* system in mind. All the **official modules** supports this system wherever possible. |
|||
|
|||
## Quick Example |
|||
|
|||
Open the *YourProjectNameModuleExtensionConfigurator* class inside the `Domain.Shared` project of your solution and change the `ConfigureExtraProperties`method as shown below to add a `SocialSecurityNumber` property to the `IdentityUser` entity of the [Identity Module](Modules/Identity.md). |
|||
|
|||
````csharp |
|||
public static void ConfigureExtraProperties() |
|||
{ |
|||
OneTimeRunner.Run(() => |
|||
{ |
|||
ObjectExtensionManager.Instance.Modules() |
|||
.ConfigureIdentity(identity => |
|||
{ |
|||
identity.ConfigureUser(user => |
|||
{ |
|||
user.AddOrUpdateProperty<string>( //property type: string |
|||
"SocialSecurityNumber", //property name |
|||
property => |
|||
{ |
|||
//validation rules |
|||
property.Attributes.Add(new RequiredAttribute()); |
|||
property.Attributes.Add( |
|||
new StringLengthAttribute(64) { |
|||
MinimumLength = 4 |
|||
} |
|||
); |
|||
|
|||
//...other configurations for this property |
|||
} |
|||
); |
|||
}); |
|||
}); |
|||
}); |
|||
} |
|||
```` |
|||
|
|||
>This method is called inside the `YourProjectNameDomainSharedModule` at the beginning of the application. `OneTimeRunner` is a utility class that guarantees to execute this code only one time per application, since multiple calls are unnecessary. |
|||
|
|||
* `ObjectExtensionManager.Instance.Modules()` is the starting point to configure a module. `ConfigureIdentity(...)` method is used to configure the entities of the Identity Module. |
|||
* `identity.ConfigureUser(...)` is used to configure the user entity of the identity module. Not all entities are designed to be extensible (since it is not needed). Use the intellisense to discover the extensible modules and entities. |
|||
* `user.AddOrUpdateProperty<string>(...)` is used to add a new property to the user entity with the `string` type (`AddOrUpdateProperty` method can be called multiple times for the same property of the same entity. Each call can configure the options of the same property, but only one property is added to the entity with the same property name). You can call this method with different property names to add more properties. |
|||
* `SocialSecurityNumber` is the name of the new property. |
|||
* `AddOrUpdateProperty` gets a second argument (the `property =>` lambda expression) to configure additional options for the new property. |
|||
* We can add data annotation attributes like shown here, just like adding a data annotation attribute to a class property. |
|||
|
|||
#### Create & Update Forms |
|||
|
|||
Once you define a property, it appears in the create and update forms of the related entity: |
|||
|
|||
 |
|||
|
|||
`SocialSecurityNumber` field comes into the form. Next sections will explain the localization and the validation for this new property. |
|||
|
|||
### Data Table |
|||
|
|||
New properties also appear in the data table of the related page: |
|||
|
|||
 |
|||
|
|||
`SocialSecurityNumber` column comes into the table. Next sections will explain the option to hide this column from the data table. |
|||
|
|||
## Property Options |
|||
|
|||
There are some options that you can configure while defining a new property. |
|||
|
|||
### Display Name |
|||
|
|||
You probably want to set a different (human readable) display name for the property that is shown on the user interface. |
|||
|
|||
#### Don't Want to Localize? |
|||
|
|||
If your application is not localized, you can directly set the `DisplayName` for the property to a `FixedLocalizableString` object. Example: |
|||
|
|||
````csharp |
|||
property => |
|||
{ |
|||
property.DisplayName = new FixedLocalizableString("Social security no"); |
|||
} |
|||
```` |
|||
|
|||
#### Localizing the Display Name |
|||
|
|||
If you want to localize the display name, you have two options. |
|||
|
|||
##### Localize by Convention |
|||
|
|||
Instead of setting the `property.DisplayName`, you can directly open your localization file (like `en.json`) and add the following entry to the `texts` section: |
|||
|
|||
````json |
|||
"SocialSecurityNumber": "Social security no" |
|||
```` |
|||
|
|||
Define the same `SocialSecurityNumber` key (the property name you've defined before) in your localization file for each language you support. That's all! |
|||
|
|||
In some cases, the localization key may conflict with other keys in your localization files. In such cases, you can use the `DisplayName:` prefix for display names in the localization file (`DisplayName:SocialSecurityNumber` as the localization key for this example). Extension system looks for prefixed version first, then fallbacks to the non prefixed name (it then fallbacks to the property name if you haven't localized it). |
|||
|
|||
> This approach is recommended since it is simple and suitable for most scenarios. |
|||
|
|||
##### Localize using the `DisplayName` Property |
|||
|
|||
If you want to specify the localization key or the localization resource, you can still set the `DisplayName` option: |
|||
|
|||
````csharp |
|||
property => |
|||
{ |
|||
property.DisplayName = |
|||
LocalizableString.Create<MyProjectNameResource>( |
|||
"UserSocialSecurityNumberDisplayName" |
|||
); |
|||
} |
|||
```` |
|||
|
|||
* `MyProjectNameResource` is the localization resource and `UserSocialSecurityNumberDisplayName` is the localization key in the localization resource. |
|||
|
|||
> See [the localization document](Localization.md) if you want to learn more about the localization system. |
|||
|
|||
#### Default Value |
|||
|
|||
A default value is automatically set for the new property, which is the natural default value for the property type, like `null` for `string`, `false` for `bool` or `0` for `int`. |
|||
|
|||
There are two ways to override the default value: |
|||
|
|||
##### DefaultValue Option |
|||
|
|||
`DefaultValue` option can be set to any value: |
|||
|
|||
````csharp |
|||
property => |
|||
{ |
|||
property.DefaultValue = 42; |
|||
} |
|||
```` |
|||
|
|||
##### DefaultValueFactory Options |
|||
|
|||
`DefaultValueFactory` can be set to a function that returns the default value: |
|||
|
|||
````csharp |
|||
property => |
|||
{ |
|||
property.DefaultValueFactory = () => DateTime.Now; |
|||
} |
|||
```` |
|||
|
|||
`options.DefaultValueFactory` has a higher priority than the `options.DefaultValue` . |
|||
|
|||
> Tip: Use `DefaultValueFactory` option only if the default value may change over the time (like `DateTime.Now` in this example). If it is a constant value, then use the `DefaultValue` option. |
|||
|
|||
### Validation |
|||
|
|||
Entity extension system allows you to define validation for extension properties in a few ways. |
|||
|
|||
#### Data Annotation Attributes |
|||
|
|||
`Attributes` is a list of attributes associated to this property. The example code below adds two [data annotation validation attributes](https://docs.microsoft.com/en-us/aspnet/core/mvc/models/validation) to the property: |
|||
|
|||
````csharp |
|||
property => |
|||
{ |
|||
property.Attributes.Add(new RequiredAttribute()); |
|||
property.Attributes.Add(new StringLengthAttribute(64) {MinimumLength = 4}); |
|||
} |
|||
```` |
|||
|
|||
When you run the application, you see that the validation works out of the box: |
|||
|
|||
 |
|||
|
|||
Since we've added the `RequiredAttribute`, it doesn't allow to left it blank. The validation system works; |
|||
|
|||
* On the user interface (with automatic localization). |
|||
* On the HTTP API. Even if you directly perform an HTTP request, you get validation errors with a proper HTTP status code. |
|||
* On the `SetProperty(...)` method on the entity (see [the document](Entities.md) if you wonder what is the `SetProperty()` method). |
|||
|
|||
So, it automatically makes a full stack validation. |
|||
|
|||
> See the [ASP.NET Core MVC Validation document](https://docs.microsoft.com/en-us/aspnet/core/mvc/models/validation) to learn more about the attribute based validation. |
|||
|
|||
##### Default Validation Attributes |
|||
|
|||
There are some attributes **automatically added** when you create certain type of properties; |
|||
|
|||
* `RequiredAttribute` is added for **non nullable** primitive property types (e.g. `int`, `bool`, `DateTime`...) and `enum` types. If you want to allow nulls, make the property nullable (e.g. `int?`). |
|||
* `EnumDataTypeAttribute` is added for **enum types**, to prevent to set invalid enum values. |
|||
|
|||
Use `property.Attributes.Clear();` if you don't want these attributes. |
|||
|
|||
#### Validation Actions |
|||
|
|||
Validation actions allows you to execute a custom code to perform the validation. The example below checks if the `SocialSecurityNumber` starts with `B` and adds a validation error if so: |
|||
|
|||
````csharp |
|||
property => |
|||
{ |
|||
property.Attributes.Add(new RequiredAttribute()); |
|||
property.Attributes.Add(new StringLengthAttribute(64) {MinimumLength = 4}); |
|||
|
|||
property.Validators.Add(context => |
|||
{ |
|||
if (((string) context.Value).StartsWith("B")) |
|||
{ |
|||
context.ValidationErrors.Add( |
|||
new ValidationResult( |
|||
"Social security number can not start with the letter 'B', sorry!", |
|||
new[] {"extraProperties.SocialSecurityNumber"} |
|||
) |
|||
); |
|||
} |
|||
}); |
|||
|
|||
} |
|||
```` |
|||
|
|||
Using a `RegularExpressionAttribute` might be better in this case, but this is just an example. Anyway, if you enter a value starts with the letter `B` you get the following error **while saving the form**: |
|||
|
|||
 |
|||
|
|||
##### The Context Object |
|||
|
|||
The `context` object has useful properties that can be used in your custom validation action. For example, you can use the `context.ServiceProvider` to resolve services from the [dependency injection system](Dependency-Injection.md). The example below gets the localizer and adds a localized error message: |
|||
|
|||
````csharp |
|||
if (((string) context.Value).StartsWith("B")) |
|||
{ |
|||
var localizer = context.ServiceProvider |
|||
.GetRequiredService<IStringLocalizer<MyProjectNameResource>>(); |
|||
|
|||
context.ValidationErrors.Add( |
|||
new ValidationResult( |
|||
localizer["SocialSecurityNumberCanNotStartWithB"], |
|||
new[] {"extraProperties.SocialSecurityNumber"} |
|||
) |
|||
); |
|||
} |
|||
```` |
|||
|
|||
>`context.ServiceProvider` is nullable! It can be `null` only if you use the `SetProperty(...)` method on the object. Because DI system is not available on this time. While this is a rare case, you should perform a fallback logic when `context.ServiceProvider` is `null`. For this example, you would add a non-localized error message. This is not a problem since setting an invalid value to a property generally is a programmer mistake and you mostly don't need to localization in this case. In any way, you would not be able to use localization even in a regular property setter. But, if you are serious about localization, you can throw a business exception (see the [exception handling document](https://docs.abp.io/en/abp/latest/Exception-Handling) to learn how to localize a business exception). |
|||
|
|||
### UI Visibility |
|||
|
|||
When you define a property, it appears on the data table, create and edit forms on the related UI page. However, you can control each one individually. Example: |
|||
|
|||
````csharp |
|||
property => |
|||
{ |
|||
property.UI.OnTable.IsVisible = false; |
|||
//...other configurations |
|||
} |
|||
```` |
|||
|
|||
Use `property.UI.OnCreateForm` and `property.UI.OnEditForm` to control forms too. If a property is required, but not added to the create form, you definitely get a validation exception, so use this option carefully. But a required property may not be in the edit form if that's your requirement. |
|||
|
|||
### HTTP API Availability |
|||
|
|||
Even if you disable a property on UI, it can be still available through the HTTP API. By default, a property is available on all APIs. |
|||
|
|||
Use the `property.Api` options to make a property unavailable in some API endpoints. |
|||
|
|||
````csharp |
|||
property => |
|||
{ |
|||
property.Api.OnUpdate.IsAvailable = false; |
|||
} |
|||
```` |
|||
|
|||
In this example, Update HTTP API will not allow to set a new value to this property. In this case, you also want to disable this property on the edit form: |
|||
|
|||
````csharp |
|||
property => |
|||
{ |
|||
property.Api.OnUpdate.IsAvailable = false; |
|||
property.UI.OnEditForm.IsVisible = false; |
|||
} |
|||
```` |
|||
|
|||
In addition to the `property.Api.OnUpdate`, you can set `property.Api.OnCreate` and `property.Api.OnGet` for a fine control the API endpoint. |
|||
|
|||
## Special Types |
|||
|
|||
### Enum |
|||
|
|||
Module extension system naturally supports the `enum` types. |
|||
|
|||
An example enum type: |
|||
|
|||
````csharp |
|||
public enum UserType |
|||
{ |
|||
Regular, |
|||
Moderator, |
|||
SuperUser |
|||
} |
|||
```` |
|||
|
|||
You can add enum properties just like others: |
|||
|
|||
````csharp |
|||
user.AddOrUpdateProperty<UserType>("Type"); |
|||
```` |
|||
|
|||
An enum properties is shown as combobox (select) in the create/edit forms: |
|||
|
|||
 |
|||
|
|||
#### Localization |
|||
|
|||
Enum member name is shown on the table and forms by default. If you want to localize it, just create a new entry on your [localization](https://docs.abp.io/en/abp/latest/Localization) file: |
|||
|
|||
````json |
|||
"UserType.SuperUser": "Super user" |
|||
```` |
|||
|
|||
One of the following names can be used as the localization key: |
|||
|
|||
* `Enum:UserType.SuperUser` |
|||
* `UserType.SuperUser` |
|||
* `SuperUser` |
|||
|
|||
Localization system searches for the key with the given order. Localized text are used on the table and the create/edit forms. |
|||
|
|||
## Database Mapping |
|||
|
|||
For relational databases, all extension property values are stored in a single field in the table: |
|||
|
|||
 |
|||
|
|||
`ExtraProperties` field stores the properties as a JSON object. While that's fine for some scenarios, you may want to create a dedicated field for your new property. Fortunately, it is very easy to configure. |
|||
|
|||
If you are using the Entity Framework Core database provider, you can configure the database mapping as shown below: |
|||
|
|||
````csharp |
|||
ObjectExtensionManager.Instance |
|||
.MapEfCoreProperty<IdentityUser, string>( |
|||
"SocialSecurityNumber", |
|||
(entityBuilder, propertyBuilder) => |
|||
{ |
|||
propertyBuilder.HasMaxLength(64); |
|||
} |
|||
); |
|||
```` |
|||
|
|||
Write this inside the `YourProjectNameEfCoreEntityExtensionMappings` class in your `.EntityFrameworkCore` project. Then you need to use the standard `Add-Migration` and `Update-Database` commands to create a new database migration and apply the change to your database. |
|||
|
|||
Add-Migration create a new migration as shown below: |
|||
|
|||
````csharp |
|||
public partial class Added_SocialSecurityNumber_To_IdentityUser : Migration |
|||
{ |
|||
protected override void Up(MigrationBuilder migrationBuilder) |
|||
{ |
|||
migrationBuilder.AddColumn<string>( |
|||
name: "SocialSecurityNumber", |
|||
table: "AbpUsers", |
|||
maxLength: 128, |
|||
nullable: true); |
|||
} |
|||
|
|||
protected override void Down(MigrationBuilder migrationBuilder) |
|||
{ |
|||
migrationBuilder.DropColumn( |
|||
name: "SocialSecurityNumber", |
|||
table: "AbpUsers"); |
|||
} |
|||
} |
|||
```` |
|||
|
|||
Once you update your database, you will see that the `AbpUsers` table has the new property as a standard table field: |
|||
|
|||
 |
|||
|
|||
> If you first created a property without a database table field, then you later needed to move this property to a database table field, it is suggested to execute an SQL command in your migration to copy the old values to the new field. |
|||
> |
|||
> However, if you don't make it, the ABP Framework seamlessly manages it. It uses the new database field, but fallbacks to the `ExtraProperties` field if it is null. When you save the entity, it moves the value to the new field. |
|||
|
|||
See the [Extending Entities](Customizing-Application-Modules-Extending-Entities.md) document for more. |
|||
|
|||
## More |
|||
|
|||
See the [Customizing the Modules](Customizing-Application-Modules-Guide.md) guide for an overall index for all the extensibility options. |
|||
|
|||
Here, a few things you can do: |
|||
|
|||
* You can create a second entity that maps to the same database table with the extra property as a standard class property (if you've defined the EF Core mapping). For the example above, you can add a `public string SocialSecurityNumber {get; set;}` property to the `AppUser` entity in your application, since the `AppUser` entity is mapped to the same `AbpUser` table. Do this only if you need it, since it brings more complexity to your application. |
|||
* You can override a domain or application service to perform custom logics with your new property. |
|||
* You can low level control how to add/render a field in the data table on the UI. |
|||
|
|||
|
|||
@ -0,0 +1,161 @@ |
|||
# Data Table Column Extensions for ASP.NET Core UI |
|||
|
|||
## Introduction |
|||
|
|||
Data table column extension system allows you to add a **new table column** on the user interface. The example below adds a new column with the "Social security no" title: |
|||
|
|||
 |
|||
|
|||
You can use the standard column options to fine control the table column. |
|||
|
|||
> Note that this is a low level API to find control the table column. If you want to show an extension property on the table, see the [module entity extension](../../Module-Entity-Extensions.md) document. |
|||
|
|||
## How to Set Up |
|||
|
|||
### Create a JavaScript File |
|||
|
|||
First, add a new JavaScript file to your solution. We added inside the `/Pages/Identity/Users` folder of the `.Web` project: |
|||
|
|||
 |
|||
|
|||
Here, the content of this JavaScript file: |
|||
|
|||
```js |
|||
abp.ui.extensions.tableColumns |
|||
.get('identity.user') |
|||
.addContributor(function (columnList) { |
|||
columnList.addTail({ //add as the last column |
|||
title: 'Social security no', |
|||
data: 'extraProperties.SocialSecurityNumber', |
|||
orderable: false, |
|||
render: function (data, type, row) { |
|||
if (row.extraProperties.SocialSecurityNumber) { |
|||
return '<strong>' + |
|||
row.extraProperties.SocialSecurityNumber + |
|||
'<strong>'; |
|||
} else { |
|||
return '<i class="text-muted">undefined</i>'; |
|||
} |
|||
} |
|||
}); |
|||
}); |
|||
``` |
|||
|
|||
This example defines a custom `render` function to return a custom HTML to render in the column. |
|||
|
|||
### Add the File to the User Management Page |
|||
|
|||
Then you need to add this JavaScript file to the user management page. You can take the power of the [Bundling & Minification system](https://docs.abp.io/en/abp/latest/UI/AspNetCore/Bundling-Minification). |
|||
|
|||
Write the following code inside the `ConfigureServices` of your module class: |
|||
|
|||
```csharp |
|||
Configure<AbpBundlingOptions>(options => |
|||
{ |
|||
options.ScriptBundles.Configure( |
|||
typeof(Volo.Abp.Identity.Web.Pages.Identity.Users.IndexModel).FullName, |
|||
bundleConfiguration => |
|||
{ |
|||
bundleConfiguration.AddFiles( |
|||
"/Pages/Identity/Users/my-user-extensions.js" |
|||
); |
|||
}); |
|||
}); |
|||
``` |
|||
|
|||
This configuration adds `my-user-extensions.js` to the user management page of the Identity Module. `typeof(Volo.Abp.Identity.Web.Pages.Identity.Users.IndexModel).FullName` is the name of the bundle in the user management page. This is a common convention used for all the ABP Commercial modules. |
|||
|
|||
### Rendering the Column |
|||
|
|||
This example assumes that you've defined a `SocialSecurityNumber` extra property using the [module entity extension](../../Module-Entity-Extensions.md) system. However; |
|||
|
|||
* You can add a new column that is related to an existing property of the user (that was not added to the table by default). Example: |
|||
|
|||
````js |
|||
abp.ui.extensions.tableColumns |
|||
.get('identity.user') |
|||
.addContributor(function (columnList) { |
|||
columnList.addTail({ |
|||
title: 'Phone confirmed?', |
|||
data: 'phoneNumberConfirmed', |
|||
render: function (data, type, row) { |
|||
if (row.phoneNumberConfirmed) { |
|||
return '<strong style="color: green">YES<strong>'; |
|||
} else { |
|||
return '<i class="text-muted">NO</i>'; |
|||
} |
|||
} |
|||
}); |
|||
}); |
|||
```` |
|||
|
|||
* You can add a new custom column that is not related to any entity property, but a completely custom information. Example: |
|||
|
|||
````js |
|||
abp.ui.extensions.tableColumns |
|||
.get('identity.user') |
|||
.addContributor(function (columnList) { |
|||
columnList.addTail({ |
|||
title: 'Custom column', |
|||
data: {}, |
|||
orderable: false, |
|||
render: function (data) { |
|||
if (data.phoneNumber) { |
|||
return "call: " + data.phoneNumber; |
|||
} else { |
|||
return ''; |
|||
} |
|||
} |
|||
}); |
|||
}); |
|||
```` |
|||
|
|||
## API |
|||
|
|||
This section explains details of the `abp.ui.extensions.tableColumns` JavaScript API. |
|||
|
|||
### abp.ui.extensions.tableColumns.get(entityName) |
|||
|
|||
This method is used to access the table columns for an entity of a specific module. It takes one parameter: |
|||
|
|||
* **entityName**: The name of the entity defined by the related module. |
|||
|
|||
### abp.ui.extensions.tableColumns.get(entityName).columns |
|||
|
|||
The `columns` property is used to retrieve a [doubly linked list](../Common/Utils/Linked-List.md) of previously defined columns for a table. All contributors are executed in order to prepare the final column list. This is normally called by the modules to show the columns in the table. However, you can use it if you are building your own extensible UIs. |
|||
|
|||
### abp.ui.extensions.tableColumns.get(entityName).addContributor(contributeCallback [, order]) |
|||
|
|||
The `addContributor` method covers all scenarios, e.g. you want to add your column in a different position in the list, change or remove an existing column. `addContributor` has the following parameters: |
|||
|
|||
* **contributeCallback**: A callback function that is called whenever the column list should be created. You can freely modify the column list inside this callback method. |
|||
* **order** (optional): The order of the callback in the callback list. Your callback is added to the end of the list (so, you have opportunity to modify columns added by the previous contributors). You can set it `0` to add your contributor as the first item. |
|||
|
|||
#### Example |
|||
|
|||
```js |
|||
var myColumnDefinition = { |
|||
title: 'Custom column', |
|||
data: {}, |
|||
orderable: false, |
|||
render: function(data) { |
|||
if (data.phoneNumber) { |
|||
return "call: " + data.phoneNumber; |
|||
} else { |
|||
return ''; |
|||
} |
|||
} |
|||
}; |
|||
|
|||
abp.ui.extensions.tableColumns |
|||
.get('identity.user') |
|||
.addContributor(function (columnList) { |
|||
// Remove an item from actionList |
|||
columnList.dropHead(); |
|||
|
|||
// Add a new item to the actionList |
|||
columnList.addHead(myColumnDefinition); |
|||
}); |
|||
``` |
|||
|
|||
> `columnList` is [linked list](../Common/Utils/Linked-List.md). You can use its methods to build a list of columns however you need. |
|||
@ -0,0 +1,108 @@ |
|||
# Entity Action Extensions for ASP.NET Core UI |
|||
|
|||
## Introduction |
|||
|
|||
Entity action extension system allows you to add a **new action** to the action menu for an entity. A **Click Me** action was added to the *User Management* page below: |
|||
|
|||
 |
|||
|
|||
You can take any action (open a modal, make an HTTP API call, redirect to another page... etc) by writing your custom code. You can access to the current entity in your code. |
|||
|
|||
## How to Set Up |
|||
|
|||
In this example, we will add a "Click Me!" action and execute a JavaScript code for the user management page of the [Identity Module](../../Modules/Identity.md). |
|||
|
|||
### Create a JavaScript File |
|||
|
|||
First, add a new JavaScript file to your solution. We added inside the `/Pages/Identity/Users` folder of the `.Web` project: |
|||
|
|||
 |
|||
|
|||
Here, the content of this JavaScript file: |
|||
|
|||
```js |
|||
var clickMeAction = { |
|||
text: 'Click Me!', |
|||
action: function(data) { |
|||
//TODO: Write your custom code |
|||
alert(data.record.userName); |
|||
} |
|||
}; |
|||
|
|||
abp.ui.extensions.entityActions |
|||
.get('identity.user') |
|||
.addContributor(function(actionList) { |
|||
actionList.addTail(clickMeAction); |
|||
}); |
|||
``` |
|||
|
|||
In the `action` function, you can do anything you need. See the API section for a detailed usage. |
|||
|
|||
### Add the File to the User Management Page |
|||
|
|||
Then you need to add this JavaScript file to the user management page. You can take the power of the [Bundling & Minification System](Bundling-Minification.md). |
|||
|
|||
Write the following code inside the `ConfigureServices` of your module class: |
|||
|
|||
```csharp |
|||
Configure<AbpBundlingOptions>(options => |
|||
{ |
|||
options.ScriptBundles.Configure( |
|||
typeof(Volo.Abp.Identity.Web.Pages.Identity.Users.IndexModel).FullName, |
|||
bundleConfiguration => |
|||
{ |
|||
bundleConfiguration.AddFiles( |
|||
"/Pages/Identity/Users/my-user-extensions.js" |
|||
); |
|||
}); |
|||
}); |
|||
``` |
|||
|
|||
This configuration adds `my-user-extensions.js` to the user management page of the Identity Module. `typeof(Volo.Abp.Identity.Web.Pages.Identity.Users.IndexModel).FullName` is the name of the bundle in the user management page. This is a common convention used for all the ABP Commercial modules. |
|||
|
|||
That's all. Run your application to see the result. |
|||
|
|||
## API |
|||
|
|||
This section explains details of the `abp.ui.extensions.entityActions` JavaScript API. |
|||
|
|||
### abp.ui.extensions.entityActions.get(entityName) |
|||
|
|||
This method is used to access the entity actions of a specific module. It takes one parameter: |
|||
|
|||
* **entityName**: The name of the entity defined by the related module. |
|||
|
|||
### abp.ui.extensions.entityActions.get(entityName).actions |
|||
|
|||
The `actions` property is used to retrieve a [doubly linked list](../Common/Utils/Linked-List.md) of previously defined actions for an entity. All contributors are executed in order to prepare the final actions list. This is normally called by the modules to show the actions in the grid. However, you can use it if you are building your own extensible UIs. |
|||
|
|||
### abp.ui.extensions.entityActions.get(entityName).addContributor(contributeCallback) |
|||
|
|||
The `addContributor` method covers all scenarios, e.g. you want to add your action in a different position in the list, change or remove an existing action item. `addContributor` with the following parameter: |
|||
|
|||
* **contributeCallback**: A callback function that is called whenever the action list should be created. You can freely modify the action list inside this callback method. |
|||
|
|||
#### Example |
|||
|
|||
```js |
|||
var clickMe2Action = { |
|||
text: 'Click Me 2!', |
|||
icon: 'fas fa-hand-point-right', |
|||
action: function(data) { |
|||
//TODO: Write your custom code |
|||
alert(data.record.userName); |
|||
} |
|||
}; |
|||
|
|||
abp.ui.extensions.entityActions |
|||
.get('identity.user') |
|||
.addContributor(function(actionList) { |
|||
// Remove an item from actionList |
|||
actionList.dropHead(); |
|||
|
|||
// Add the new item to the actionList |
|||
actionList.addHead(clickMe2Action); |
|||
}); |
|||
``` |
|||
|
|||
> `actionList` is [linked list](../Common/Utils/Linked-List.md). You can use its methods to build a list of columns however you need. |
|||
@ -1,3 +1,11 @@ |
|||
# Blazor UI: Authentication |
|||
|
|||
TODO |
|||
The [application startup template](../../Startup-Templates/Application.md) is properly configured to use OpenId Connect to authenticate the user through the server side login form; |
|||
|
|||
* When the Blazor application needs to authenticate, it is redirected to the server side. |
|||
* Users can enter username & password to login if they already have an account. If not, they can use the register form to create a new user. They can also use forgot password and other features. The server side uses IdentityServer4 to handle the authentication. |
|||
* Finally, they are redirected back to the Blazor application to complete the login process. |
|||
|
|||
This is a typical and recommended approach to implement authentication in Single-Page Applications. The client side configuration is done in the startup template, so you can change it. |
|||
|
|||
See the [Blazor Security document](https://docs.microsoft.com/en-us/aspnet/core/blazor/security) to understand and customize the authentication process. |
|||
@ -0,0 +1,75 @@ |
|||
# Blazor UI: Authorization |
|||
|
|||
Blazor applications can use the same authorization system and permissions defined in the server side. |
|||
|
|||
> This document is only for authorizing on the Blazor UI. See the [Server Side Authorization](../../Authorization.md) to learn how to define permissions and control the authorization system. |
|||
|
|||
## Basic Usage |
|||
|
|||
> ABP Framework is **100% compatible** with the Authorization infrastructure provided by the Blazor. See the [Blazor Security Document](https://docs.microsoft.com/en-us/aspnet/core/blazor/security/) to learn all authorization options. This section **only shows some common scenarios**. |
|||
|
|||
### Authorize Attribute |
|||
|
|||
`[Authorize]` attribute can be used to show a page only to the authenticated users. |
|||
|
|||
````csharp |
|||
@page "/" |
|||
@attribute [Authorize] |
|||
|
|||
You can only see this if you're signed in. |
|||
```` |
|||
|
|||
The `[Authorize]` attribute also supports role-based or policy-based authorization. For example, you can check permissions defined in the server side: |
|||
|
|||
````csharp |
|||
@page "/" |
|||
@attribute [Authorize("MyPermission")] |
|||
|
|||
You can only see this if you have the necessary permission. |
|||
```` |
|||
|
|||
### AuthorizeView |
|||
|
|||
`AuthorizeView` component can be used in a page/component to conditionally render a part of the content: |
|||
|
|||
````html |
|||
<AuthorizeView Policy="MyPermission"> |
|||
<p>You can only see this if you satisfy the "MyPermission" policy.</p> |
|||
</AuthorizeView> |
|||
```` |
|||
|
|||
### IAuthorizationService |
|||
|
|||
`IAuthorizationService` can be injected and used to programmatically check permissions: |
|||
|
|||
````csharp |
|||
public partial class Index |
|||
{ |
|||
protected override async Task OnInitializedAsync() |
|||
{ |
|||
if (await AuthorizationService.IsGrantedAsync("MyPermission")) |
|||
{ |
|||
//... |
|||
} |
|||
} |
|||
} |
|||
```` |
|||
|
|||
If your component directly or indirectly inherits from the `AbpComponentBase`, `AuthorizationService` becomes pre-injected and ready to use. If not, you can always [inject](../../Dependency-Injection.md) the `IAuthorizationService` yourself. |
|||
|
|||
`IAuthorizationService` can also be used in the view side where `AuthorizeView` component is not enough. |
|||
|
|||
There are some useful extension methods for the `IAuthorizationService`: |
|||
|
|||
* `IsGrantedAsync` simply returns `true` or `false` for the given policy/permission. |
|||
* `CheckAsync` checks and throws `AbpAuthorizationException` if given policy/permission hasn't granted. You don't have to handle these kind of exceptions since ABP Framework automatically [handles errors](Error-Handling.md). |
|||
* `AuthorizeAsync` returns `AuthorizationResult` as the standard way provided by the ASP.NET Core authorization system. |
|||
|
|||
> See the [Blazor Security Document](https://docs.microsoft.com/en-us/aspnet/core/blazor/security/) to learn all authorization options |
|||
|
|||
## See Also |
|||
|
|||
* [Authorization](../../Authorization.md) (server side) |
|||
* [Blazor Security](https://docs.microsoft.com/en-us/aspnet/core/blazor/security/) (Microsoft documentation) |
|||
* [ICurrentUser Service](CurrentUser.md) |
|||
|
|||
@ -0,0 +1,23 @@ |
|||
# Blazor UI: Current Tenant |
|||
|
|||
`ICurrentTenant` service can be used to get information about the current tenant in a [multi-tenant](../../Multi-Tenancy.md) application. `ICurrentTenant` defines the following properties; |
|||
|
|||
* `Id` (`Guid`): Id of the current tenant. Can be `null` if the current user is a host user or the tenant could not be determined. |
|||
* `Name` (`string`): Name of the current tenant. Can be `null` if the current user is a host user or the tenant could not be determined. |
|||
* `IsAvailable` (`bool`): Returns `true` if the `Id` is not `null`. |
|||
|
|||
**Example: Show the current tenant name on a page** |
|||
|
|||
````csharp |
|||
@page "/" |
|||
@using Volo.Abp.MultiTenancy |
|||
@inject ICurrentTenant CurrentTenant |
|||
@if (CurrentTenant.IsAvailable) |
|||
{ |
|||
<p>Current tenant name: @CurrentTenant.Name</p> |
|||
} |
|||
```` |
|||
|
|||
## See Also |
|||
|
|||
* [Multi-Tenancy](../../Multi-Tenancy.md) |
|||
@ -0,0 +1,22 @@ |
|||
# Blazor UI: Current User |
|||
|
|||
`ICurrentUser` service is used to obtain information about the currently authenticated user. Inject the `ICurrentUser` into any component/page and use its properties and methods. |
|||
|
|||
**Example: Show username & email on a page** |
|||
|
|||
````csharp |
|||
@page "/" |
|||
@using Volo.Abp.Users |
|||
@inject ICurrentUser CurrentUser |
|||
@if (CurrentUser.IsAuthenticated) |
|||
{ |
|||
<p>Welcome @CurrentUser.UserName</p> |
|||
} |
|||
```` |
|||
|
|||
> If you (directly or indirectly) derived your component from the `AbpComponentBase`, you can directly use the base `CurrentUser` property. |
|||
|
|||
`ICurrentUser` provides `Id`, `Name`, `SurName`, `Email`, `Roles` and some other properties. |
|||
|
|||
> See the [Server Side Current User](../../CurrentUser) service for more information. |
|||
|
|||
@ -0,0 +1,62 @@ |
|||
# Blazor UI: Error Handling |
|||
|
|||
Blazor, by default, shows a yellow line at the bottom of the page if any unhandled exception occurs. However, this is not useful in a real application. |
|||
|
|||
ABP provides an automatic error handling system for the Blazor UI. |
|||
|
|||
* Handles all unhandled exceptions and shows nice and useful messages to the user. |
|||
* It distinguishes different kind of exceptions. Hides internal/technical error details from the user (shows a generic error message in these cases). |
|||
* It is well integrated to the [server side exception handling](../../Exception-Handling.md) system. |
|||
|
|||
## Basic Usage |
|||
|
|||
There are different type of `Exception` classes handled differently by the ABP Framework. |
|||
|
|||
### UserFriendlyException |
|||
|
|||
`UserFriendlyException` is a special type of exception. You can directly show a error message dialog to the user by throwing such an exception. |
|||
|
|||
**Example** |
|||
|
|||
````csharp |
|||
@page "/" |
|||
@using Volo.Abp |
|||
|
|||
<Button Clicked="TestException">Throw test exception</Button> |
|||
|
|||
@code |
|||
{ |
|||
private void TestException() |
|||
{ |
|||
throw new UserFriendlyException("A user friendly error message!"); |
|||
} |
|||
} |
|||
```` |
|||
|
|||
ABP automatically handle the exception and show an error message to the user: |
|||
|
|||
 |
|||
|
|||
> You can derive from `UserFriendlyException` or directly implement `IUserFriendlyException` interface to create your own `Exception` class if you need. |
|||
|
|||
> You can use the [localization system](Localization.md) to show localized error messages. |
|||
|
|||
### BusinessException and Other Exception Types |
|||
|
|||
See the [exception handling document](../../Exception-Handling.md) to understand different kind of Exception class and interfaces and other capabilities of the Exception Handling system. |
|||
|
|||
## Generic Errors |
|||
|
|||
If the thrown `Exception` is not a special type, it is considered as generic error and a generic error message is shown to the user: |
|||
|
|||
 |
|||
|
|||
> All error details (including stack trace) are still written in the browser's console. |
|||
|
|||
## Server Side Errors |
|||
|
|||
Errors (like Validation, Authorization and User Friendly Errors) sent by the server are processed as you expect and properly shown to the user. So, error handling system works end to end without need to manually handle exceptions or manually transfer server-to-client error messages. |
|||
|
|||
## See Also |
|||
|
|||
* [Exception Handling System](../../Exception-Handling.md) |
|||
@ -0,0 +1,3 @@ |
|||
# Blazor UI: Page Header |
|||
|
|||
TODO |
|||
@ -0,0 +1,24 @@ |
|||
# Blazor UI: Routing |
|||
|
|||
Blazor has its own [routing system](https://docs.microsoft.com/en-us/aspnet/core/blazor/fundamentals/routing) and you can use it in your applications. ABP doesn't add any new feature to it, except one small improvement for the [modular development](../../Module-Development-Basics.md). |
|||
|
|||
## AbpRouterOptions |
|||
|
|||
Blazor `Router` component requires to define `AdditionalAssemblies` when you have components in assemblies/projects other than the main application's entrance assembly. So, if you want to create razor class libraries as ABP modules, you typically want to add the module's assembly to the `AdditionalAssemblies`. In this case, you need to add your module's assembly to the `AbpRouterOptions`. |
|||
|
|||
**Example** |
|||
|
|||
````csharp |
|||
Configure<AbpRouterOptions>(options => |
|||
{ |
|||
options.AdditionalAssemblies.Add(typeof(MyBlazorModule).Assembly); |
|||
}); |
|||
```` |
|||
|
|||
Write this code in the `ConfigureServices` method of your [module](../../Module-Development-Basics.md). |
|||
|
|||
`AbpRouterOptions` has another property, `AppAssembly`, which should be the entrance assembly of the application and typically set in the final application's module. If you've created your solution with the [application startup template](../../Startup-Templates/Application.md), it is already configured for you. |
|||
|
|||
## See Also |
|||
|
|||
* [Blazor Routing](https://docs.microsoft.com/en-us/aspnet/core/blazor/fundamentals/routing) (Microsoft Documentation) |
|||
@ -0,0 +1,3 @@ |
|||
# Blazor: Testing |
|||
|
|||
Coming soon. |
|||
|
After Width: | Height: | Size: 47 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 80 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 92 KiB |
|
After Width: | Height: | Size: 69 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 53 KiB |
|
After Width: | Height: | Size: 70 KiB |
|
After Width: | Height: | Size: 29 KiB |
@ -1,3 +1,3 @@ |
|||
@using Volo.Abp.Ui.Branding |
|||
@inject IBrandingProvider BrandingProvider |
|||
<a class="navbar-brand" href="/">@BrandingProvider.AppName</a> |
|||
<a class="navbar-brand" href="">@BrandingProvider.AppName</a> |
|||
|
|||
@ -0,0 +1,11 @@ |
|||
using Volo.Abp.AspNetCore.Mvc.UI.Bundling; |
|||
using Volo.Abp.AspNetCore.Mvc.UI.Packages.StarRatingSvg; |
|||
using Volo.Abp.Modularity; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Mvc.UI.Packages.CmsKit |
|||
{ |
|||
[DependsOn(typeof(StarRatingSvgScriptContributor))] |
|||
public class CmsKitScriptContributor : BundleContributor |
|||
{ |
|||
} |
|||
} |
|||
@ -0,0 +1,11 @@ |
|||
using Volo.Abp.AspNetCore.Mvc.UI.Bundling; |
|||
using Volo.Abp.AspNetCore.Mvc.UI.Packages.StarRatingSvg; |
|||
using Volo.Abp.Modularity; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Mvc.UI.Packages.CmsKit |
|||
{ |
|||
[DependsOn(typeof(StarRatingSvgStyleContributor))] |
|||
public class CmsKitStyleContributor : BundleContributor |
|||
{ |
|||
} |
|||
} |
|||
@ -0,0 +1,15 @@ |
|||
namespace Volo.Abp.Authorization |
|||
{ |
|||
public static class AbpAuthorizationErrorCodes |
|||
{ |
|||
public const string GivenPolicyHasNotGranted = "Volo.Authorization:010001"; |
|||
|
|||
public const string GivenPolicyHasNotGrantedWithPolicyName = "Volo.Authorization:010002"; |
|||
|
|||
public const string GivenPolicyHasNotGrantedForGivenResource = "Volo.Authorization:010003"; |
|||
|
|||
public const string GivenRequirementHasNotGrantedForGivenResource = "Volo.Authorization:010004"; |
|||
|
|||
public const string GivenRequirementsHasNotGrantedForGivenResource = "Volo.Authorization:010005"; |
|||
} |
|||
} |
|||
@ -0,0 +1,10 @@ |
|||
using Volo.Abp.Localization; |
|||
|
|||
namespace Volo.Abp.Authorization.Localization |
|||
{ |
|||
[LocalizationResourceName("AbpAuthorization")] |
|||
public class AbpAuthorizationResource |
|||
{ |
|||
|
|||
} |
|||
} |
|||
@ -0,0 +1,10 @@ |
|||
{ |
|||
"culture": "en", |
|||
"texts": { |
|||
"Volo.Authorization:010001": "Authorization failed! Given policy has not granted.", |
|||
"Volo.Authorization:010002": "Authorization failed! Given policy has not granted: {PolicyName}", |
|||
"Volo.Authorization:010003": "Authorization failed! Given policy has not granted for given resource: {ResourceName}", |
|||
"Volo.Authorization:010004": "Authorization failed! Given requirement has not granted for given resource: {ResourceName}", |
|||
"Volo.Authorization:010005": "Authorization failed! Given requirements has not granted for given resource: {ResourceName}" |
|||
} |
|||
} |
|||
@ -0,0 +1,10 @@ |
|||
{ |
|||
"culture": "tr", |
|||
"texts": { |
|||
"Volo.Authorization:010001": "Yetkilendirme başarısız! Belirtilen izin sağlanmamış.", |
|||
"Volo.Authorization:010002": "Yetkilendirme başarısız! Bu izin sağlanmamış: {PolicyName}", |
|||
"Volo.Authorization:010003": "Yetkilendirme başarısız! Bu izin, bu kaynak için sağlanmamış: {ResourceName}", |
|||
"Volo.Authorization:010004": "Yetkilendirme başarısız! Bu kaynak belirtilen gerekliliği sağlamamış: {ResourceName}", |
|||
"Volo.Authorization:010005": "Yetkilendirme başarısız! Bu kaynak belirtilen gereklilikleri sağlamamış: {ResourceName}" |
|||
} |
|||
} |
|||
@ -0,0 +1,10 @@ |
|||
{ |
|||
"culture": "zh-Hans", |
|||
"texts": { |
|||
"Volo.Authorization:010001": "授权失败! 提供的策略尚未授予.", |
|||
"Volo.Authorization:010002": "授权失败! 提供的策略尚未授予: {PolicyName}", |
|||
"Volo.Authorization:010003": "授权失败! 提供的策略未授予提供的资源: {ResourceName}", |
|||
"Volo.Authorization:010004": "授权失败! 提供的要求未授予提供的资源: {ResourceName}", |
|||
"Volo.Authorization:010005": "授权失败! 提供的要求未授予提供的资源: {ResourceName}" |
|||
} |
|||
} |
|||
@ -0,0 +1,43 @@ |
|||
using System; |
|||
using System.Collections.Concurrent; |
|||
using System.Reflection; |
|||
using Autofac.Core.Activators.Reflection; |
|||
|
|||
namespace Volo.Abp.Autofac |
|||
{ |
|||
public class AbpAutofacConstructorFinder : IConstructorFinder |
|||
{ |
|||
private const BindingFlags DeclaredOnlyPublicFlags = BindingFlags.Public | BindingFlags.Instance | BindingFlags.DeclaredOnly; //Remove static constructor, BindingFlags.Static
|
|||
|
|||
private readonly Func<Type, ConstructorInfo[]> _finder; |
|||
|
|||
private static readonly ConcurrentDictionary<Type, ConstructorInfo[]> DefaultPublicConstructorsCache = new ConcurrentDictionary<Type, ConstructorInfo[]>(); |
|||
|
|||
public AbpAutofacConstructorFinder() |
|||
: this(GetDefaultPublicConstructors) |
|||
{ |
|||
} |
|||
|
|||
public AbpAutofacConstructorFinder(Func<Type, ConstructorInfo[]> finder) |
|||
{ |
|||
_finder = finder ?? throw new ArgumentNullException(nameof(finder)); |
|||
} |
|||
|
|||
public ConstructorInfo[] FindConstructors(Type targetType) |
|||
{ |
|||
return _finder(targetType); |
|||
} |
|||
|
|||
private static ConstructorInfo[] GetDefaultPublicConstructors(Type type) |
|||
{ |
|||
var retval = DefaultPublicConstructorsCache.GetOrAdd(type, t => t.GetConstructors(DeclaredOnlyPublicFlags)); |
|||
|
|||
if (retval.Length == 0) |
|||
{ |
|||
throw new NoConstructorsFoundException(type); |
|||
} |
|||
|
|||
return retval; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,10 @@ |
|||
<Button form="@Form" Type="@Type" Color="@Color" Block="@Block" PreventDefaultOnSubmit="@PreventDefaultOnSubmit" Disabled="@IsDisabled" Loading="@IsLoading" Clicked="@OnClickedHandler"> |
|||
@if ( ChildContent != null ) |
|||
{ |
|||
@ChildContent |
|||
} |
|||
else |
|||
{ |
|||
@SaveString |
|||
} |
|||
</Button> |
|||
@ -0,0 +1,73 @@ |
|||
using System; |
|||
using System.Threading.Tasks; |
|||
using Blazorise; |
|||
using Localization.Resources.AbpUi; |
|||
using Microsoft.AspNetCore.Components; |
|||
using Microsoft.Extensions.Localization; |
|||
|
|||
namespace Volo.Abp.BlazoriseUI.Components |
|||
{ |
|||
public partial class SubmitButton : ComponentBase |
|||
{ |
|||
protected bool Submiting { get; set; } |
|||
|
|||
[Parameter] |
|||
public string Form { get; set; } |
|||
|
|||
[Parameter] |
|||
public ButtonType Type { get; set; } = ButtonType.Submit; |
|||
|
|||
[Parameter] |
|||
public Color Color { get; set; } = Color.Primary; |
|||
|
|||
[Parameter] |
|||
public bool PreventDefaultOnSubmit { get; set; } = true; |
|||
|
|||
[Parameter] |
|||
public bool Block { get; set; } |
|||
|
|||
[Parameter] |
|||
public bool? Disabled { get; set; } |
|||
|
|||
[Parameter] |
|||
public string SaveResourceKey { get; set; } = "Save"; |
|||
|
|||
[Parameter] |
|||
public EventCallback Clicked { get; set; } |
|||
|
|||
[Parameter] |
|||
public RenderFragment ChildContent { get; set; } |
|||
|
|||
[Inject] |
|||
protected IStringLocalizer<AbpUiResource> StringLocalizer { get; set; } |
|||
|
|||
protected bool IsDisabled |
|||
=> Disabled == true || Submiting; |
|||
|
|||
protected bool IsLoading |
|||
=> Submiting; |
|||
|
|||
protected string SaveString |
|||
=> StringLocalizer[SaveResourceKey]; |
|||
|
|||
protected virtual async Task OnClickedHandler() |
|||
{ |
|||
try |
|||
{ |
|||
Submiting = true; |
|||
|
|||
await Clicked.InvokeAsync(null); |
|||
} |
|||
catch (Exception) |
|||
{ |
|||
throw; |
|||
} |
|||
finally |
|||
{ |
|||
Submiting = false; |
|||
|
|||
await InvokeAsync(StateHasChanged); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue