diff --git a/docs/en/CLI.md b/docs/en/CLI.md index ee204898cf..9feb810730 100644 --- a/docs/en/CLI.md +++ b/docs/en/CLI.md @@ -138,6 +138,7 @@ For more samples, go to [ABP CLI Create Solution Samples](CLI-New-Command-Sample * `--ui` or `-u`: Specifies the UI framework. Default framework is `mvc`. Available frameworks: * `mvc`: ASP.NET Core MVC. * `angular`: Angular UI. + * `blazor`: Blazor UI. * `blazor-server`: Blazor Server UI. * `none`: Without UI. * `--database-provider` or `-d`: Specifies the database provider. Default provider is `ef`. Available providers: diff --git a/docs/en/Startup-Templates/Application-Single-Layer.md b/docs/en/Startup-Templates/Application-Single-Layer.md index 7574ae3f7b..02a743c5ee 100644 --- a/docs/en/Startup-Templates/Application-Single-Layer.md +++ b/docs/en/Startup-Templates/Application-Single-Layer.md @@ -32,19 +32,18 @@ abp new Acme.BookStore -t app-nolayers This template provides multiple UI frameworks: * `mvc`: ASP.NET Core MVC UI with Razor Pages (default) +* `blazor`: Blazor UI * `blazor-server`: Blazor Server UI * `angular`: Angular UI * `none`: Without UI (for HTTP API development) -> This template doesn't have Blazor WebAssembly UI, because it requires 3 projects at least (server-side, UI and shared library between these two projects). We are recommending to use the layered [application startup template](Application.md) for Blazor WebAssembly projects. - Use the `-u` (or `--ui`) option to specify the UI framework while creating the solution: ```bash abp new Acme.BookStore -t app-nolayers -u angular ``` -This example specifies the UI type (the `-u` option) as `angular`. You can also specify `mvc`, `blazor-server` or `none` for the UI type. +This example specifies the UI type (the `-u` option) as `angular`. You can also specify `mvc`, `blazor`, `blazor-server` or `none` for the UI type. ### Specify the Database Provider diff --git a/docs/en/Tutorials/Todo/Single-Layer/Index.md b/docs/en/Tutorials/Todo/Single-Layer/Index.md index bc7fbb9a05..1ae344fd3a 100644 --- a/docs/en/Tutorials/Todo/Single-Layer/Index.md +++ b/docs/en/Tutorials/Todo/Single-Layer/Index.md @@ -3,7 +3,7 @@ ````json //[doc-params] { - "UI": ["MVC", "BlazorServer", "NG"], + "UI": ["MVC", "Blazor", "BlazorServer", "NG"], "DB": ["EF", "Mongo"] } ```` @@ -36,13 +36,23 @@ dotnet tool install -g Volo.Abp.Cli Then create an empty folder, open a command-line terminal and execute the following command in the terminal: ````bash -abp new TodoApp -t app-nolayers{{if UI=="BlazorServer"}} -u blazor-server{{else if UI=="NG"}} -u angular{{end}}{{if DB=="Mongo"}} -d mongodb{{end}} +abp new TodoApp -t app-nolayers{{if UI=="BlazorServer"}} -u blazor-server{{else if UI=="Blazor"}} -u blazor{{else if UI=="NG"}} -u angular{{end}}{{if DB=="Mongo"}} -d mongodb{{end}} ```` {{if UI=="NG"}} This will create a new solution, named *TodoApp*, with `angular` and `aspnet-core` folders. Once the solution is ready, open the solution (in the `aspnet-core` folder) with your favorite IDE. +{{else if UI=="Blazor"}} + +This will create a new solution with three projects: + +* A `blazor` application that contains the Blazor code, the client-side. +* A `host` application, hosts and serves the `blazor` application. +* A `contracts` project, shared library between these two projects. + +Once the solution is ready, open it in your favorite IDE. + {{else}} This will create a new solution with a single project, named *TodoApp*. Once the solution is ready, open it in your favorite IDE. @@ -51,7 +61,7 @@ This will create a new solution with a single project, named *TodoApp*. Once the ### Create the Database -You can run the following command in the root directory of your project (in the same folder of the `.csproj` file) to create the database and seed the initial data: +You can run the following command in the {{if UI=="Blazor"}} directory of your `TodoApp.Host` project {{else}}root directory of your project (in the same folder of the `.csproj` file){{end}} to create the database and seed the initial data: ```bash dotnet run --migrate-database @@ -65,6 +75,14 @@ This command will create the database and seed the initial data for you. Then yo It is good to run the application before starting the development. Running the application is pretty straight-forward, you can run the application with any IDE that supports .NET or by running the `dotnet run` CLI command in the directory of your project: +{{else if UI=="Blazor"}} + +It is good to run the application before starting the development. Running the application is pretty straight-forward, you just need to run the `TodoApp.Host` application with any IDE that supports .NET or by running the `dotnet run` CLI command in the directory of your project. + +> **Note:** The `host` application hosts and serves the `blazor` application. Therefore, you should run the `host` application only. + +After the application runs, open the application in your default browser: + {{else if UI=="NG"}} It is good to run the application before starting the development. The solution has two main applications: @@ -96,12 +114,12 @@ All right. We can start coding! ## Defining the Entity -This application will have a single [entity](../../../Entities.md) and we can start by creating it. So, create a new `TodoItem` class under the `Entities` folder of the project: +This application will have a single [entity](../../../Entities.md) and we can start by creating it. So, create a new `TodoItem` class under the `Entities` folder of {{if UI=="Blazor"}}the `TodoApp.Host` project{{else}}the project{{end}}: ````csharp using Volo.Abp.Domain.Entities; -namespace TodoApp.Entities; +namespace TodoApp{{if UI=="Blazor"}}.Host.{{end}}Entities; public class TodoItem : BasicAggregateRoot { @@ -151,7 +169,7 @@ We've mapped the `TodoItem` entity to the `TodoItems` table in the database. The The startup solution is configured to use Entity Framework Core [Code First Migrations](https://docs.microsoft.com/en-us/ef/core/managing-schemas/migrations). Since we've changed the database mapping configuration, we should create a new migration and apply changes to the database. -Open a command-line terminal in the root directory of your project and type the following command: +Open a command-line terminal in the {{if UI=="Blazor"}} directory of your `TodoApp.Host` project {{else}}root directory of your project (in the same folder of the `.csproj` file){{end} and type the following command: ````bash dotnet ef migrations add Added_TodoItem @@ -202,10 +220,10 @@ Before starting to implement these use cases, first we need to create a DTO clas ### Creating the Data Transfer Object (DTO) -[Application services](../../../Application-Services.md) typically get and return DTOs ([Data Transfer Objects](../../../Data-Transfer-Objects.md)) instead of entities. So, create a new `TodoItemDto` class under the `Services/Dtos` folder: +[Application services](../../../Application-Services.md) typically get and return DTOs ([Data Transfer Objects](../../../Data-Transfer-Objects.md)) instead of entities. So, create a new `TodoItemDto` class under the `Services/Dtos` folder{{if UI=="Blazor"}} of your `TodoApp.Contracts` project{{end}}: ```csharp -namespace TodoApp.Services.Dtos; +namespace TodoApp{{if UI=="Blazor"}}.Contracts{{end}}.Services.Dtos; public class TodoItemDto { @@ -216,18 +234,49 @@ public class TodoItemDto This is a very simple DTO class that has the same properties as the `TodoItem` entity. Now, we are ready to implement our use-cases. +{{if UI=="Blazor"}} + +### The Application Service Interface + +Create a `ITodoAppService` interface under the `Services` folder of the `TodoApp.Contracts` project, as shown below: + +```csharp +using TodoApp.Contracts.Services.Dtos; +using Volo.Abp.Application.Services; + +namespace TodoApp.Contracts.Services; + +public interface ITodoAppService : IApplicationService +{ + Task> GetListAsync(); + + Task CreateAsync(string text); + + Task DeleteAsync(Guid id); +} +``` + +{{end}} + ### The Application Service Implementation -Create a `TodoAppService` class under the `Services` folder of your project, as shown below: +Create a `TodoAppService` class under the `Services` folder of {{if UI=="Blazor"}}your `TodoApp.Host` project{{else}}your project{{end}}, as shown below: ```csharp +{{if UI=="Blazor"}} +using TodoApp.Contracts.Services; +using TodoApp.Contracts.Services.Dtos; +using TodoApp.Host.Entities; +using Volo.Abp.Application.Services; +{{else}} using TodoApp.Entities; using Volo.Abp.Application.Services; using Volo.Abp.Domain.Repositories; +{{end}} -namespace TodoApp.Services; +namespace TodoApp{{if UI=="Blazor"}}.Host{{end}}.Services; -public class TodoAppService : ApplicationService +public class TodoAppService : ApplicationService{{if UI=="Blazor"}}, ITodoAppService{{end}} { private readonly IRepository _todoItemRepository; @@ -472,23 +521,29 @@ If you open [Swagger UI](https://swagger.io/tools/swagger-ui/) by entering the ` ![todo-api](../todo-api.png) -{{else if UI=="BlazorServer"}} +{{else if UI=="Blazor" || UI=="BlazorServer"}} ### Index.razor.cs -Open the `Index.razor.cs` file in the `Pages` folder and replace the content with the following code block: +Open the `Index.razor.cs` file in the `Pages` folder{{if UI=="Blazor"}} in your `Todo.Blazor` project{{end}} and replace the content with the following code block: ```csharp +{{if UI=="Blazor"}} +using Microsoft.AspNetCore.Components; +using TodoApp.Contracts.Services; +using TodoApp.Contracts.Services.Dtos; +{{else}} using Microsoft.AspNetCore.Components; using TodoApp.Services; using TodoApp.Services.Dtos; +{{end}} namespace TodoApp.Pages; public partial class Index { [Inject] - private TodoAppService TodoAppService { get; set; } + private {{if UI=="Blazor"}}ITodoAppService{{else}}TodoAppService{{end}} TodoAppService { get; set; } private List TodoItems { get; set; } = new List(); private string NewTodoText { get; set; } @@ -514,7 +569,7 @@ public partial class Index } ``` -This class uses the `TodoAppService` to get the list of todo items. It manipulates the `TodoItems` list after create and delete operations. This way, we don't need to refresh the whole todo list from the server. +This class uses the {{if UI=="Blazor"}}`ITodoAppService`{{else}}`TodoAppService`{{end}} to get the list of todo items. It manipulates the `TodoItems` list after create and delete operations. This way, we don't need to refresh the whole todo list from the server. ### Index.razor @@ -592,7 +647,7 @@ As the final touch, open the `Index.razor.css` file in the `Pages` folder and re This is a simple styling for the todo page. We believe that you can do much better :) -Now, you can run the application again to see the result. +Now, you can run the {{if UI=="Blazor"}}`TodoApp.Host` project{{else}}application{{end}} again to see the result. {{else if UI=="NG"}} diff --git a/docs/zh-Hans/CLI.md b/docs/zh-Hans/CLI.md index 2097acdad7..994089853a 100644 --- a/docs/zh-Hans/CLI.md +++ b/docs/zh-Hans/CLI.md @@ -129,6 +129,7 @@ abp new Acme.BookStore * `--ui` 或者 `-u`: 指定ui框架.默认`mvc`框架.其他选项: * `mvc`: ASP.NET Core MVC. * `angular`: Angular. + * `blazor`: Blazor UI. * `blazor-server`: Blazor Server. * `none`: 不包含UI. * `--database-provider` 或 `-d`: 或者 `-d`: 指定数据库提供程序.默认是 `ef`.其他选项: