You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The repository consists of samples using the [Ignite UI For Javascript](https://www.infragistics.com/products/ignite-ui) library in a context of ASP.NET Core Web Application.
2
2
3
+
This repository consists of different ASP.NET Core applications. The idea is to demonstrate examples of real world scenarios, and how easy is the integration between the server and a web application, built using any modern UI framework such as `Angular`, `React`, `Web Components`, `jQuery`, etc.
4
+
5
+
Each ASP.NET Core application refers a client application built using any of Ignite UI frameworks - [`Ignite UI for Angular`](https://www.infragistics.com/products/ignite-ui-angular), [`Ignite UI for jQuery`](https://www.infragistics.com/products/ignite-ui-jquery), [`Ignite UI for React`](https://www.infragistics.com/products/ignite-ui-react), [`Ignite UI for Web Components`](https://www.infragistics.com/products/ignite-ui-web-components).
6
+
7
+
The examples in this repository have the server and client parts configured to run together - the server application refers the client in the `ClientApp` dir by a submodule. However, each application has its own purpose and is agnostic to the other part, meaning that they are easily replaceable.
8
+
9
+
For example, you as a developer may create a client application to consume the same endpoint. In order to use different client application, open the .csproj file and edit the URL of repository, where the client application lives:
*[Scheduler CRUD operations](https://github.com/IgniteUI/ASP.NET-Core-Samples/tree/master/Scheduler-Core-CRUD) - The sample demonstrates how the user could execute and perform CRUD operations with [Scheduler](https://www.igniteui.com/scheduler/overview) component.
4
27
*[Dock Manager with Data Analysis](https://github.com/IgniteUI/ASP.NET-Core-Samples/tree/master/DockManager-DataAnalysis#dock-manager-with-data-analysis) - The sample demonstrates how the user can analyse selected data from a [data grid](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid.html) component through a [data chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/data-chart.html) representation or [conditional cell formatting](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/framework-and-features/data-analysis.html#conditional-cell-formatting).
5
28
For more information check out the [README.md](https://github.com/IgniteUI/ASP.NET-Core-Samples/tree/master/DockManager-DataAnalysis#dock-manager-with-data-analysis) file.
The **Angular Marketing Dashboard** application makes use of the [Ignite UI for Angular](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/getting_started.html) [data chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/datachart.html), [map](https://www.infragistics.com/products/ignite-ui-angular/angular/components/map_overview.html), [doughnut chart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/doughnutchart.html), [bullet graph](https://www.infragistics.com/products/ignite-ui-angular/angular/components/bulletgraph.html), [date picker](https://www.infragistics.com/products/ignite-ui-angular/angular/components/date_picker.html), [list](https://www.infragistics.com/products/ignite-ui-angular/angular/components/list.html), [dialog](https://www.infragistics.com/products/ignite-ui-angular/angular/components/dialog.html) and [card](https://www.infragistics.com/products/ignite-ui-angular/angular/components/card.html) controls, styled with **Ignite UI for Angular** [theming engine](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/index.html) to tackle specific analytical challenges. The dashboard view brings together different data points a marketing expert would want to track like sessions, conversions and conversion costs.
8
-
*[Task Planner API Application](https://github.com/IgniteUI/ASP.NET-Core-Samples/tree/master/TaskPlannerAPI) - The sample demonstrates how to use the [Github API](https://octokit.github.io/rest.js/v18) with [Octo Kit](https://octokit.github.io/rest.js/v18) in order to load Ignite UI for Angular Issues and Pull requests into different visual elements like List and Grid. This app can be used to easily track our work and tasks progress.
31
+
*[Task Planner API Application](https://github.com/IgniteUI/ASP.NET-Core-Samples/tree/master/TaskPlannerAPI) - The sample demonstrates how to use the [Github API](https://octokit.github.io/rest.js/v18) with [Octo Kit](https://octokit.github.io/rest.js/v18) in order to load Ignite UI for Angular Issues and Pull requests into different visual elements like List and Grid. This app can be used to easily track our work and tasks progress.
32
+
33
+
### Adding new application
34
+
35
+
When adding new application
36
+
37
+
1. Use this template for the application [`README`](https://github.com/IgniteUI/ASP.NET-Core-Samples/wiki/Template-for-application-README-file.) file.
38
+
2. Update the list with applications above.
39
+
40
+
41
+
### Useful links
42
+
-[Create web APIs with ASP.NET Core](https://docs.microsoft.com/en-us/aspnet/core/web-api/?view=aspnetcore-3.1)
43
+
-[Use the Angular project template with ASP.NET Core](https://docs.microsoft.com/en-us/aspnet/core/client-side/spa/angular?view=aspnetcore-3.1&tabs=visual-studio)
44
+
-[Use the React project template with ASP.NET Core](hhttps://docs.microsoft.com/en-us/aspnet/core/client-side/spa/react?view=aspnetcore-3.1&tabs=visual-studio)
The `TaskPlanner` is a RESTful API application, consisting of a server, built on `ASP.NET Core` and a client web application, built on `Angular`. This model allows for easy integration between the server and any modern UI frameworks such as `Angular`, `React`, `Web Components`, `jQuery`, etc.
4
4
5
-
TaskPlannerAPI is created with **ASP.NET Core 3.0+**. It depends on the [TaskPlanner](https://github.com/IgniteUI/TaskPlanner)application as a submodule added to the `ClientApp` dir.
5
+
While the `TaskPlanner` server and client parts are configured to run together, each application has its own purpose and is agnostic to the other part, meaning that they are easily replaceable.
6
6
7
-
- Press `CTRL + F5` to run the project or press `F5` to start run it in debug mode.
7
+
### Starting the Application
8
+
9
+
- Press `CTRL + F5` to run the project or press `F5` to run it in debug mode.
8
10
9
11
> If you get the "*The Angular CLI process did not start listening for requests within the timeout period of 0 seconds*" message, you will need to run the client app separately. Just open a new command prompt in the `ClientApp` dir and execute `npm run start`.
10
12
11
13
### Application Structure
12
14
13
-
- REST API server. The [`IssuesController`](https://github.com/IgniteUI/ASP.NET-Core-Samples/tree/master/TaskPlannerAPI/Controllers/IssuesController.cs) demonstrates how to use Octokit library to fetch issues/PRs from a GitHub repository.
14
-
-[`TaskPlanner`](https://github.com/IgniteUI/TaskPlanner) client application provides an effective means for managing projects and related tasks. Thus, it loads data from the REST API enabling the user to start managing - filtering and sorting tasks, editing tasks, adding new tasks. Built using Ignite UI for Angular, it shows nice UX UI perks like ability to Drag and Drop items from and to the List and Data Grid.
15
+
- The `TaskPlannerAPI` is a basic Web API created with `ASP.NET Core` 3.0+. It has logic for fetching, manipulating and serving the data in an appropriate format. It also demonstrates how to use [`Octokit`](https://octokitnet.readthedocs.io/en/latest/) library to fetch issues/PRs from a GitHub repository.
16
+
17
+
- The [TaskPlanner](https://github.com/IgniteUI/TaskPlanner) client is an Angular web application. It provides an effective means for managing projects and related tasks. Thus, it loads data from the Web API endpoint, enabling the user to start managing - filtering and sorting tasks, editing tasks, adding new tasks. Built using Ignite UI for Angular, it shows nice UX UI perks like ability to Drag and Drop items from and to the List and Data Grid.
15
18
16
-
In order to use different client application, go ahead and open the .csproj file and edit the execution commands:
19
+
The server application refers the client in the `ClientApp` dir by a submodule. This enables the two to run together, while making it easy to change either part. For example, you as a developer may create a client application on React in order to consume the same endpoint.
20
+
21
+
In order to use different client application, open the .csproj file and edit the URL of repository, where the client application lives:
<ErrorCondition="'$(ErrorCode)' != '0'"Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
24
-
<MessageImportance="high"Text="Custom message: SpaRoot is $(SpaRoot) and Root is $(SolutionDir)" />
The first `Exec` command is performed in order to fetch the submodule (the repository where the client app lives) if it is not already fetched
33
-
The second `Exec` command is used to pull the changes if it the remote client app is already fetched
34
-
The third `Exec` command is used to perform `npm install`
30
+
The `Exec` commands are needed to:
31
+
1) Clone the client app repository
32
+
2) Pull changes
33
+
3) Execute `npm install`
35
34
36
35
### Framework(s)
37
36
38
-
`ASP.NET Core`, `Angular`
37
+
-`Ignite UI for Angular`
38
+
-`Angular`
39
+
-`ASP.NET Core`
39
40
40
41
41
42
### Components Used
@@ -45,10 +46,6 @@ The third `Exec` command is used to perform `npm install`
45
46
46
47
### Industry
47
48
48
-
Task Manager Tooling
49
-
Project Manager Tooling
50
-
Data manipulation
51
-
52
-
53
-
### TaskPlanner Sample for ASP.NET Core
54
-
ASP.NET Core web framework provides rich integration with Modern UI frameworks such as Angular, React, Web Components, jQuery etc. The TaskPlanner client application provides an effective means for managing projects and related tasks. Thus, it loads data from the REST API enabling the user to start managing - filtering and sorting tasks, editing tasks, adding new tasks. Built using Ignite UI for Angular, it shows nice UX UI perks like ability to Drag and Drop items from and to the List and Data Grid.
0 commit comments