# Integration with UI for ASP.NET Core

The [UI for ASP.NET Core](http://www.telerik.com/aspnet-core-ui) and [UI for ASP.NET MVC](http://www.telerik.com/aspnet-mvc) suites provide a `DataSourceRequest` model binder and a [ToDataSourceResult()](https://docs.telerik.com/aspnet-mvc/api/kendo.mvc.extensions/queryableextensions) method which process bulk data operations.

This article demonstrates how to set up a Grid to perform server-side CRUD operations by using these features in Angular applications and applying the Data Query helper functions.

## Using with .NET Core

For a working example, refer to the [Kendo Angular with ASP.NET Core](https://github.com/telerik/kendo-angular/tree/master/examples-standalone/kendoangular-aspnetcore-integration) project on GitHub. Follow the instructions in the `readme` file to run the project.

## Sample Integration Project

To implement the sample project:

1. [Install the prerequisites](https://www.telerik.com/kendo-angular-ui/components/data-query/mvc-integration#prerequisites)
2. [Follow the setup process](https://www.telerik.com/kendo-angular-ui/components/data-query/mvc-integration#setup)

### Prerequisites

Before proceeding, ensure that you have the following installed:

* [System Requirements For Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/components/installation/requirements)
* [Node.js 20](https://nodejs.org/en/download/)
* [Angular 18 CLI](https://angular.dev/installation#install-angular-cli)
* [.NET Core 8 SDK](https://dotnet.microsoft.com/en-us/download/dotnet/8.0)
* [Visual Studio Code](https://code.visualstudio.com/download) or another code editor. Feel free to also check the [Using .NET in Visual Studio Code](https://code.visualstudio.com/docs/languages/dotnet) guide for useful tips.
* (Optional) A valid license for [Telerik UI for ASP.NET MVC](https://www.telerik.com/aspnet-mvc) or [DevCraft](https://www.telerik.com/devcraft) and the [Telerik Private NuGet Source](https://docs.telerik.com/blazor-ui/installation/nuget#telerik-private-nuget-source) to use the [`ToDataSourceResult`](https://docs.telerik.com/aspnet-mvc/api/kendo.mvc.extensions/queryableextensions#todatasourceresultsystemdatadatatablekendomvcuidatasourcerequest) helper method for server-side Grid data operations. This helper is not required—you can implement your own server-side data processing logic.

The mentioned versions are the latest as of July 31, 2024, at the time of writing this article.

### Setup

For more information on setting up the project, see the [Kendo UI for Angular with ASP.NET Core](https://www.telerik.com/kendo-angular-ui/components/installation/dotnet-core) article.

The ASP.NET Core controller must be configured to handle a `DataSourceRequest` object, which represents the state of the Grid. Once set up, the controller can fetch data from the database and process it using the `ToDataSourceResult()` method.

```csharp
        [HttpPost]
        [Route("get-products")]
        public ActionResult GetProducts([DataSourceRequest] DataSourceRequest request)
        {
            // Products is an in-memory list of Product objects and could be replaced with a database query.
            var result = Products.AsQueryable().ToDataSourceResult(request);
            return Ok(result);
        }
```

While the Angular application uses the [`toDataSourceRequestString`](https://www.telerik.com/kendo-angular-ui/components/data-query/api/todatasourcerequeststring) method to parse the Grid state to the ASP.NET Core controller, if the data is grouped, you must also utilize the [`translateDataSourceResultGroups`](https://www.telerik.com/kendo-angular-ui/components/data-query/api/translatedatasourceresultgroups) method to translate the data to a compatible format.

The [`toDataSourceRequestString`](https://www.telerik.com/kendo-angular-ui/components/data-query/api/todatasourcerequeststring) method accepts a [`DataSourceRequestState`](https://www.telerik.com/kendo-angular-ui/components/data-query/api/datasourcerequeststate) parameter, which extends the base [`State`](https://www.telerik.com/kendo-angular-ui/components/data-query/api/state) type with an additional `aggregates` field.

```ts
    // The services that processes the Grid state requests.
    public getProducts(state: DataSourceRequestState): Observable<GridDataResult> {
        const url = `${this.baseUrl}products/get-products?${toDataSourceRequestString(state)}`;
        const hasGroups = state.group && state.group.length;

        return this.http.post<GridDataResult>(url, {}).pipe(
            map(({ data, total }) => ({
                // If the data is grouped, translate it to a compatible format using the translateDataSourceResultGroups helper.
                data: hasGroups ? translateDataSourceResultGroups(data) : data,
                total: total,
            }))
        );
    }
```

## Suggested Links

* [Kendo Angular with ASP.NET Core GitHub Project](https://github.com/telerik/kendo-angular/tree/master/examples-standalone/kendoangular-aspnetcore-integration)
* [Data Query API Index](https://www.telerik.com/kendo-angular-ui/components/data-query/api)
* [SortDescriptor](https://www.telerik.com/kendo-angular-ui/components/data-query/api/sortdescriptor)
* [FilterDescriptor](https://www.telerik.com/kendo-angular-ui/components/data-query/api/filterdescriptor)
* [GroupDescriptor](https://www.telerik.com/kendo-angular-ui/components/data-query/api/groupdescriptor)
* [AggregateDescriptor](https://www.telerik.com/kendo-angular-ui/components/data-query/api/aggregatedescriptor)