@ -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 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}}:
@ -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}}:
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<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.Host` project{{else}}your project{{end}}, as shown below:
@ -472,23 +521,29 @@ 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.Blazor` project{{end}} and replace the content with the following code block:
private List<TodoItemDto> TodoItems { get; set; } = new List<TodoItemDto>();
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.
Hamza Albreem
3 years ago
GitHub