tsai
/
abp
mirror of https://github.com/abpframework/abp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Update Index.md

pull/15092/head
Engincan VESKE 3 years ago
parent
a656c54bf8
commit
e214bd0fcf
1 changed files with 34 additions and 19 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 53
      docs/en/Tutorials/Todo/Single-Layer/Index.md

53
docs/en/Tutorials/Todo/Single-Layer/Index.md
View File

@ -45,11 +45,11 @@ This will create a new solution, named *TodoApp*, with `angular` and `aspnet-cor
{{else if UI=="Blazor"}} {{else if UI=="Blazor"}}
This will create a new solution with the three projects: This will create a new solution with three projects:
* A `client` application that contains the Blazor code, the client-side. * A `blazor` application that contains the Blazor code, the client-side.
* A `server` application, hosts and servers the `client` application. * A `host` application, hosts and serves the `blazor` application.
* A `shared` library between these two projects. * A `contracts` project, shared library between these two projects.
Once the solution is ready, open it in your favorite IDE. Once the solution is ready, open it in your favorite IDE.
@ -61,7 +61,7 @@ This will create a new solution with a single project, named *TodoApp*. Once the
### Create the Database ### Create the Database
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: 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 ```bash
dotnet run --migrate-database dotnet run --migrate-database
@ -77,9 +77,9 @@ It is good to run the application before starting the development. Running the a
{{else if UI=="Blazor"}} {{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. 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 `server` application hosts and serves the `client` application. Therefore, you should run the `server` application only. > **Note:** The `host` application hosts and serves the `blazor` application. Therefore, you should run the `host` application only.
After application runs, open the application in your default browser: After application runs, open the application in your default browser:
@ -114,12 +114,12 @@ All right. We can start coding!
## Defining the Entity ## 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 {{if UI=="Blazor"}}the `TodoApp.Server` project{{else}}the project{{end}}: 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 ````csharp
using Volo.Abp.Domain.Entities; using Volo.Abp.Domain.Entities;
namespace TodoApp.Entities; namespace TodoApp{{if UI=="Blazor"}}.Host.{{end}}Entities;
public class TodoItem : BasicAggregateRoot<Guid> public class TodoItem : BasicAggregateRoot<Guid>
{ {
@ -169,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. 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 ````bash
dotnet ef migrations add Added_TodoItem dotnet ef migrations add Added_TodoItem
@ -220,10 +220,10 @@ Before starting to implement these use cases, first we need to create a DTO clas
### Creating the Data Transfer Object (DTO) ### 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{{if UI=="Blazor"}} of your `TodoApp.Shared` project{{end}}: [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 ```csharp
namespace TodoApp.Services.Dtos; namespace TodoApp{{if UI=="Blazor"}}.Contracts{{end}}.Services.Dtos;
public class TodoItemDto public class TodoItemDto
{ {
@ -238,12 +238,14 @@ This is a very simple DTO class that has the same properties as the `TodoItem` e
### The Application Service Interface ### The Application Service Interface
Create a `ITodoAppService` interface under the `Services` folder of the `TodoApp.Server` project, as shown below: Create a `ITodoAppService` interface under the `Services` folder of the `TodoApp.Contracts` project, as shown below:
```csharp ```csharp
using TodoApp.Shared.Services.Dtos; using TodoApp.Contracts.Services.Dtos;
using Volo.Abp.Application.Services; using Volo.Abp.Application.Services;
namespace TodoApp.Contracts.Services;
public interface ITodoAppService : IApplicationService public interface ITodoAppService : IApplicationService
{ {
Task<List<TodoItemDto>> GetListAsync(); Task<List<TodoItemDto>> GetListAsync();
@ -258,14 +260,21 @@ public interface ITodoAppService : IApplicationService
### The Application Service Implementation ### The Application Service Implementation
Create a `TodoAppService` class under the `Services` folder of {{if UI=="Blazor"}}your `TodoApp.Server` project{{else}}your project{{end}}, 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 ```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 TodoApp.Entities;
using Volo.Abp.Application.Services; using Volo.Abp.Application.Services;
using Volo.Abp.Domain.Repositories; using Volo.Abp.Domain.Repositories;
{{end}}
namespace TodoApp.Services; namespace TodoApp{{if UI=="Blazor"}}.Host{{end}}.Services;
public class TodoAppService : ApplicationService{{if UI=="Blazor"}}, ITodoAppService{{end}} public class TodoAppService : ApplicationService{{if UI=="Blazor"}}, ITodoAppService{{end}}
{ {
@ -516,12 +525,18 @@ If you open [Swagger UI](https://swagger.io/tools/swagger-ui/) by entering the `
### Index.razor.cs ### Index.razor.cs
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: 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 ```csharp
{{if UI=="Blazor"}}
using Microsoft.AspNetCore.Components;
using TodoApp.Contracts.Services;
using TodoApp.Contracts.Services.Dtos;
{{else}}
using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components;
using TodoApp.Services; using TodoApp.Services;
using TodoApp.Services.Dtos; using TodoApp.Services.Dtos;
{{end}}
namespace TodoApp.Pages; namespace TodoApp.Pages;
@ -554,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 ### Index.razor
@ -632,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 :) 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"}} {{else if UI=="NG"}}

Write Preview
Loading…
Cancel
Save