@ -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.
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 the three projects:
* A `client` application that contains the Blazor code, the client-side.
* A `server` application, hosts and servers the `client` application.
* A `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 server project (folder of the `*.Server.csproj` file){{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 `server` application (`*.Server`) with any IDE that supports .NET or by running the `dotnet run` CLI command in the directory of your project.
> **Note:** The `server` application hosts and serves the `client` application. Therefore, you should run the `server` application only.
After 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,7 +114,7 @@ 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.Server` project{{else}}the project{{end}}:
````csharp
using Volo.Abp.Domain.Entities;
@ -202,7 +220,7 @@ 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.Shared` project{{end}}:
```csharp
namespace TodoApp.Services.Dtos;
@ -216,9 +234,31 @@ 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.Server` project, as shown below:
```csharp
using TodoApp.Shared.Services.Dtos;
using Volo.Abp.Application.Services;
public interface ITodoAppService : IApplicationService
{
Task<List<TodoItemDto>> GetListAsync();
Task<TodoItemDto> 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.Server` project{{else}}your project{{end}}, as shown below:
```csharp
using TodoApp.Entities;
@ -227,7 +267,7 @@ using Volo.Abp.Domain.Repositories;
namespace TodoApp.Services;
public class TodoAppService : ApplicationService
public class TodoAppService : ApplicationService{{if UI=="Blazor"}}, ITodoAppService{{end}}
@ -472,11 +512,11 @@ If you open [Swagger UI](https://swagger.io/tools/swagger-ui/) by entering the `
{{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.Client` project{{end}} and replace the content with the following code block:
Engincan VESKE
3 years ago