|
1 |
| -# Angular-CSharp-.NETCore-ServerSidePagination |
| 1 | +# Angular - C# .NET Core Web API - How to use Server-Side Pagination with Angular AgGrid Component. [Year of Development: 2020] |
| 2 | + |
| 3 | +About the application technologies and operation: |
| 4 | + |
| 5 | +### Technologies: |
| 6 | + |
| 7 | +- Programming Language: C# - TypeScript |
| 8 | +- FrontEnd Side: Angular CLI 9.1.1 (Node: 14.5.0) |
| 9 | +- BackEnd Side: .NET Core 3.1 (Web API) |
| 10 | +- Descriptive Language: HTML5 |
| 11 | +- Style Description Language: SCSS (Bootstrap 4.5) |
| 12 | +- Other used modul FrontEnd Side: |
| 13 | + - rxjs (^6.5.5) |
| 14 | + - ag-grid-angular (^23.2.1) |
| 15 | + - ag-grid-community (^23.2.1) |
| 16 | +- Other used modul BackEnd Side: |
| 17 | + - AutoMapper (v8.0.0) |
| 18 | + |
| 19 | +### BackEnd Application solution structure: |
| 20 | + |
| 21 | +- **Angular-ServerSidePagination-BackEnd**: |
| 22 | + - Includes Controllers. |
| 23 | + - Includes IoC DI Registers, with separate configuration files. |
| 24 | + - Includes Request and Response Models. |
| 25 | + - Includes AutoMapper Profiles. |
| 26 | +- **Core.Extensions**: |
| 27 | + - Includes the core extensions (e.g.: QueryableExtension). |
| 28 | +- **Core.Common**: |
| 29 | + - Includes the DTOs used for the application. |
| 30 | +- **Business.Engine**: |
| 31 | + - Includes the necessary classes and interfaces to implement Business Logic. |
| 32 | + - Each Controller has it's own BL interface and class. |
| 33 | +- **Business.Service**: |
| 34 | + - Includes the necessary classes and interfaces to implement internal business logic. |
| 35 | + - Each Business Engine has it's own BL interface and class. |
| 36 | + |
| 37 | +### FrontEnd Application solution structure: |
| 38 | + |
| 39 | +- **./src/Footer**: |
| 40 | + - Includes the Footer on the page. |
| 41 | +- **./src/Header**: |
| 42 | + - Includes the Navigation Bar on the page. |
| 43 | +- **./src/PageNotFound**: |
| 44 | + - Contains an item that the application loads if you navigate to the wrong URL. |
| 45 | +- **./src/Dashboard**: |
| 46 | + - Contains the table of Users (AgGrid) on the page. |
| 47 | + - Includes the Service that implements HTTP Calls on the BackEnd side. |
| 48 | + - Includes ResponseModels for Server Side Responses. |
| 49 | + |
| 50 | +### Installation/ Configuration: |
| 51 | + |
| 52 | +1. **[BackEnd]** Restore necessary Packages on the selected project, run the following command in **PM Console** |
| 53 | + |
| 54 | + ``` |
| 55 | + Update-Package -reinstall |
| 56 | + ``` |
| 57 | + |
| 58 | +2. **[FrontEnd]** If you do not already have the Angular CLI installed on your computer, so run the following command in CMD |
| 59 | + |
| 60 | + ``` |
| 61 | + npm install -g @angular/cli |
| 62 | + ``` |
| 63 | + |
| 64 | +3. **[FrontEnd]** Restore necessary node_modules, so run the following command in GIT Bash Console in the application Angular-ServerSidePagination-FrontEnd root directory |
| 65 | + |
| 66 | + ``` |
| 67 | + npm install |
| 68 | + ``` |
| 69 | + |
| 70 | +4. **[FrontEnd]** Start the application client side, so run the following command in GIT Bash Console in the application Angular-ServerSidePagination-FrontEnd root directory |
| 71 | + |
| 72 | + ``` |
| 73 | + ng serve |
| 74 | + ``` |
| 75 | + |
| 76 | +### About the application: |
| 77 | + |
| 78 | +The purpose of the web application is to list users in an **_AgGrid_** _table_ that can be operated by server-side pagination. User data is read from a MOCK.json file. |
| 79 | + |
| 80 | +#### The application shows the following: |
| 81 | + |
| 82 | +- How to implement **Generic Queryable OrderBy Extension**. |
| 83 | +- How to use **IoC Container** in **ASP.NET Core**. |
| 84 | +- How to separate **IoC Container Configurations** in **ASP.NET Core**. |
| 85 | +- How to implement and register and using **AutoMapper** in **ASP.NET Core**. |
| 86 | +- How to implement and use **HttpServices** in **Angular Component**. |
| 87 | +- How to implement and use **AppRouting** in **Angular Component**. |
| 88 | +- How to implement and use **AgGrid** in **Angular Component**. |
| 89 | +- How to define **DefaultColDef**, **ColumnDefs**, **CacheOverflowSize**, **Components** and how to add this elements for **GridOptions**. |
| 90 | +- How to define **FirstDataRendered**, **GridReady** events and how to connect this events to the **AgGrid**. |
0 commit comments