diff --git a/blazor/datagrid/connecting-to-adaptors/url-adaptor.md b/blazor/datagrid/connecting-to-adaptors/url-adaptor.md index 831f2434a9..1b1fad8da4 100644 --- a/blazor/datagrid/connecting-to-adaptors/url-adaptor.md +++ b/blazor/datagrid/connecting-to-adaptors/url-adaptor.md @@ -1,6 +1,6 @@ --- layout: post -title: Bind data and perform CRUD action with UrlAdaptor in Syncfusion Blazor DataGrid +title: Bind Data and Perform CRUD with UrlAdaptor in Blazor DataGrid description: Learn about bind data and performing CRUD operations using UrlAdaptor in Syncfusion Blazor DataGrid. platform: Blazor control: DataGrid @@ -8,23 +8,30 @@ keywords: adaptors, urladaptor, url adaptor, remotedata documentation: ug --- -# UrlAdaptor in Syncfusion® Blazor DataGrid +# UrlAdaptor in Syncfusion Blazor DataGrid -The [UrlAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#url-adaptor) serves as the base adaptor for facilitating communication between remote data services and a UI component. It enables seamless data binding and interaction with custom API services or any remote service through URLs. The `UrlAdaptor` is particularly useful in scenarios where a custom API service with unique logic for handling data and CRUD operations is in place. This approach allows for custom handling of data, with the resultant data returned in the `result` and `count` format for display in the Syncfusion® Blazor DataGrid. +The Syncfusion® Blazor DataGrid supports integration with remote data services through the [UrlAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#url-adaptor) in the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component. This adaptor is especially useful when working with custom APIs that include unique logic for handling data and performing CRUD operations. The API response must return data in the format **{ result, count }** to ensure proper binding and paging within the DataGrid. -This section describes a step-by-step process for retrieving data using the `UrlAdaptor` and binding it to the Blazor DataGrid to facilitate data and CRUD operations. +The `UrlAdaptor` is ideal for applications that require: + +- Custom server-side processing for data operations. +- Seamless interaction between the DataGrid and RESTful services. +- Efficient handling of large datasets with server-side **filtering**, **sorting**, and **paging**. ## Creating an API Service -To configure a server with the Syncfusion® Blazor DataGrid, follow these steps: +The Syncfusion® Blazor DataGrid can be configured to interact with a server-side API using the `UrlAdaptor`. The following steps outline how to create an API service for data binding and CRUD operations: **1. Create a Blazor web app** -You can create a **Blazor Web App** named **URLAdaptor** using Visual Studio 2022, either via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). Make sure to configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows). +1. Open Visual Studio 2022. +2. Choose **Blazor Web App** and name the project **URLAdaptor**. +3. Use either [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs) or the Syncfusion® Blazor Extension to create the project. +4. Select the preferred [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-9.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs). **2. Create a model class** -Create a new folder named **Models**. Then, add a model class named **OrdersDetails.cs** in the **Models** folder to represent the order data. +Add a **Models** folder and create a class named **OrdersDetails.cs** to represent order data. ```csharp namespace URLAdaptor.Models @@ -85,7 +92,7 @@ namespace URLAdaptor.Models **3. Create an API controller** -Create an API controller (aka, **GridController.cs**) file under **Controllers** folder that helps to establish data communication with the Blazor DataGrid. +Add a **GridController.cs** file under the **Controllers** folder to handle data operations. ```csharp @@ -131,14 +138,11 @@ namespace URLAdaptor.Controllers ``` -> The **GetOrderData** method retrieves sample order data. Replace it with your custom logic to fetch data from a database or other sources. +> Replace the sample logic in **GetOrderData** with database queries or other data sources based on requirements. **4. Register controllers in `Program.cs`** -Add the following lines in the `Program.cs` file to register controllers: - ```csharp -// Register controllers in the service container. builder.Services.AddControllers(); // Map controller routes. @@ -147,51 +151,54 @@ app.MapControllers(); **5. Run the application** -Run the application in Visual Studio. The API will be accessible at a URL like **https://localhost:xxxx/api/grid** (where **xxxx** represents the port number). Please verify that the API returns the order data. +Run the application in Visual Studio. The API will be available at a URL such as **https://localhost:xxxx/api/grid**, where **xxxx** represents the port number. ![UrlAdaptor Data](../images/blazor-datagrid-adaptors-data.png) -## Connecting Syncfusion® Blazor DataGrid to an API service - -To integrate the Syncfusion® Blazor DataGrid into your project using Visual Studio, follow the below steps: - -**1. Install Syncfusion® Blazor DataGrid and Themes NuGet packages** +## Connecting Syncfusion Blazor DataGrid to an API service -To add the Blazor DataGrid in the app, open the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To bind the Syncfusion® Blazor DataGrid to a remote API using the [UrlAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html#Syncfusion_Blazor_Adaptors_UrlAdaptor), configure the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component with the API endpoint and adaptor type. The following steps outline the integration process: -If your Blazor Web App uses `WebAssembly` or `Auto` render modes, install the Syncfusion® Blazor NuGet packages in the client project. - -Alternatively, use the following Package Manager commands: +**1. Install Required NuGet Packages** +* To add the Syncfusion® Blazor DataGrid to the application, open NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install: + + * [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) + * [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) + +> * For **Blazor Web Apps** using **WebAssembly** or **Auto** render modes, install these packages in the client project. + +* Alternatively, use the following Package Manager commands: + ```powershell Install-Package Syncfusion.Blazor.Grid -Version {{ site.releaseversion }} Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} ``` - + > Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for a complete list of available packages. -**2. Register Syncfusion® Blazor service** +**2. Register Syncfusion Blazor service** -- Open the **~/_Imports.razor** file and import the required namespaces. +- Add the required namespaces in **~/_Imports.razor**: ```cs @using Syncfusion.Blazor @using Syncfusion.Blazor.Grids ``` -- Register the Syncfusion® Blazor service in the **~/Program.cs** file. - +- Register the Syncfusion® Blazor service in **Program.cs**: + ```csharp using Syncfusion.Blazor; - + builder.Services.AddSyncfusionBlazor(); ``` -For apps using `WebAssembly` or `Auto (Server and WebAssembly)` render modes, register the service in both **~/Program.cs** files. +> * For apps using `WebAssembly` or `Auto (Server and WebAssembly)` render modes, register the service in both **~/Program.cs** files. -**3. Add stylesheet and script resources** +**3. Add stylesheet and script references** -Include the theme stylesheet and script references in the **~/Components/App.razor** file. +Include the theme and script references in **App.razor**: ```html @@ -205,14 +212,12 @@ Include the theme stylesheet and script references in the **~/Components/App.raz ``` -> * Refer to the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for various methods to include themes (e.g., Static Web Assets, CDN, or CRG). -> * Set the render mode to **InteractiveServer** or **InteractiveAuto** in your Blazor Web App configuration. +> * Refer to the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for available methods to include themes, such as Static Web Assets, CDN, or CRG. +> * Set the render mode to **InteractiveServer** or **InteractiveAuto** in the Blazor Web App configuration. -**4. Add Blazor DataGrid and configure with server** +**4. Configure DataGrid with UrlAdaptor** -To connect the Blazor DataGrid to a hosted API, use the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) property of [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html). Update the **Index.razor** file as follows. - -The `SfDataManager` offers multiple adaptor options to connect with remote database based on an API service. Below is an example of the [UrlAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#url-adaptor) configuration where an API service are set up to return the resulting data in the result and count format. +Use the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component to connect the DataGrid to the API endpoint. Set the [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Adaptor) property to [UrlAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html#Syncfusion_Blazor_Adaptors_UrlAdaptor). {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -279,20 +284,33 @@ namespace URLAdaptor.Controllers {% endhighlight %} {% endtabs %} -> Replace https://localhost:xxxx/api/grid with the actual URL of your API endpoint that provides the data in a consumable format (e.g., JSON). +> Replace **https://localhost:xxxx/api/grid** with the actual API endpoint that returns data in a consumable format, such as **JSON**. **5. Run the application** -When you run the application, the Blazor DataGrid will display data fetched from the API. +Run the application and verify that the DataGrid displays data retrieved from the API. ![UrlAdaptor Data](../images/blazor-datagrid-adaptors.gif) -> * The Syncfusion® Blazor DataGrid supports server-side operations such as **searching**, **sorting**, **filtering**, **aggregating**, and **paging**. These can be handled using methods like [PerformSearching](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSearching__1_System_Linq_IQueryable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_SearchFilter__), [PerformFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformFiltering__1_System_Linq_IQueryable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_WhereFilter__System_String_), [PerformSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSorting__1_System_Linq_IQueryable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_Sort__), [PerformTake](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformTake__1_System_Linq_IQueryable___0__System_Int32_), and [PerformSkip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSkip__1_System_Linq_IQueryable___0__System_Int32_) from the **Syncfusion.Blazor.Data** package. Let's explore how to manage these data operations using the `UrlAdaptor`. -> * In an API service project, add **Syncfusion.Blazor.Data** by opening the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search and install it. +## Perform data operations in UrlAdaptor + +The Syncfusion® Blazor DataGrid supports server-side operations such as **searching**, **sorting**, **filtering**, **aggregating**, and **paging**. + +The [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) object provides the necessary details for each operation, and these can be applied using built-in methods from the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class. + +* [PerformSearching](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSearching__1_System_Linq_IQueryable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_SearchFilter__) - Applies search criteria to the data source based on the provided search filters. Used for server-side searching. +* [PerformFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformFiltering__1_System_Linq_IQueryable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_WhereFilter__System_String_) - Filters the data source using conditions specified in the request. Supports single and multiple column filtering. +* [PerformSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSorting__1_System_Linq_IQueryable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_Sort__) - Sorts the data source according to one or more sort descriptors. Handles ascending and descending order. +* [PerformTake](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformTake__1_System_Linq_IQueryable___0__System_Int32_) - Retrieves a specified number of records from the beginning of the data source. Used for implementing paging. +* [PerformSkip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSkip__1_System_Linq_IQueryable___0__System_Int32_) - Skips a defined number of records in the data source before returning results. Used in combination with `PerformTake` for paging. -## Handling searching operation +These methods allow efficient handling of large datasets by performing operations on the server side. The following sections demonstrate how to manage these operations using the UrlAdaptor. -To handle the searching operation, ensure that your API endpoint supports custom searching criteria. Implement the searching logic on the server side using the [PerformSearching](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSearching__1_System_Linq_IQueryable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_SearchFilter__) method from the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class. This allows the custom data source to undergo searching based on the criteria specified in the incoming [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) object. +> * To enable these operations, add the **Syncfusion.Blazor.Data** package to the API service project using NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*). + +### Handling searching operation + +To enable server-side searching with the `UrlAdaptor`, implement logic in the API controller using the [PerformSearching](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSearching__1_System_Linq_IQueryable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_SearchFilter__) method from the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class. This method applies search criteria to the data source based on the filters specified in the incoming [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html). ![UrlAdaptor - Searching](../images/urladaptor-searching.png) @@ -348,7 +366,7 @@ public object Post([FromBody] DataManagerRequest DataManagerRequest) ### Handling filtering operation -To handle the filtering operation, ensure that your API endpoint supports custom filtering criteria. Implement the filtering logic on the server side using the [PerformFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformFiltering__1_System_Linq_IQueryable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_WhereFilter__System_String_) method from the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class. This allows the custom data source to undergo filtering based on the criteria specified in the incoming [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) object. +To enable server-side filtering with the `UrlAdaptor`, implement logic in the API controller using the [PerformFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformFiltering__1_System_Linq_IQueryable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_WhereFilter__System_String_) method from the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class. This method applies filter conditions specified in the incoming [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html). **Single column filtering** ![Single column filtering](../images/urladaptor-filtering.png) @@ -412,9 +430,9 @@ public object Post([FromBody] DataManagerRequest DataManagerRequest) {% endhighlight %} {% endtabs %} -## Handling sorting operation +### Handling sorting operation -To handle the sorting operation, ensure that your API endpoint supports custom sorting criteria. Implement the sorting logic on the server side using the [PerformSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSorting__1_System_Linq_IQueryable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_Sort__) method from the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class. This allows the custom data source to undergo sorting based on the criteria specified in the incoming [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) object. +To enable server-side sorting with the `UrlAdaptor`, implement logic in the API controller using the [PerformSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSorting__1_System_Linq_IQueryable___0__System_Collections_Generic_List_Syncfusion_Blazor_Data_Sort__) method from the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class. This method applies sort descriptors specified in the incoming [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html). **Single column sorting** ![Single column sorting](../images/urladaptor-sorting.png) @@ -472,9 +490,9 @@ public object Post([FromBody] DataManagerRequest DataManagerRequest) {% endhighlight %} {% endtabs %} -## Handling paging operation +### Handling paging operation -To handle the paging operation, ensure that your API endpoint supports custom paging criteria. Implement the paging logic on the server side using the [PerformTake](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformTake__1_System_Linq_IQueryable___0__System_Int32_) and [PerformSkip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSkip__1_System_Linq_IQueryable___0__System_Int32_) methods from the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class. This allows the custom data source to undergo paging based on the criteria specified in the incoming [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) object. +To enable server-side paging with the `UrlAdaptor`, implement logic in the API controller using the [PerformSkip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformSkip__1_System_Linq_IQueryable___0__System_Int32_) and [PerformTake](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html#Syncfusion_Blazor_DataOperations_PerformTake__1_System_Linq_IQueryable___0__System_Int32_) methods from the [DataOperations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataOperations.html) class. These methods apply **skip** and **take** operations based on the paging details in the incoming [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html). ![UrlAdaptor - Paging](../images/urladaptor-paging.png) @@ -533,21 +551,17 @@ public object Post([FromBody] DataManagerRequest DataManagerRequest) {% endhighlight %} {% endtabs %} -## Handling CRUD operations - -The Syncfusion® Blazor DataGrid seamlessly integrates CRUD (Create, Read, Update, and Delete) operations with server-side controller actions through specific properties: [InsertUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_InsertUrl), [RemoveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_RemoveUrl), [UpdateUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_UpdateUrl), [CrudUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_CrudUrl), and [BatchUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_BatchUrl). These properties enable the Grid to communicate with the data service for every Grid action, facilitating server-side operations. +### Handling CRUD operations -**CRUD Operations Mapping** +The Syncfusion® Blazor DataGrid supports Create, Read, Update, and Delete (CRUD) operations through the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component. These operations are mapped to API endpoints using properties such as: -CRUD operations within the Grid can be mapped to server-side controller actions using specific properties: +* [InsertUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_InsertUrl) – URL for inserting new records. +* [UpdateUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_UpdateUrl) – URL for updating existing records. +* [RemoveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_RemoveUrl) – URL for deleting records. +* [CrudUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_CrudUrl) – Single URL for all CRUD operations. +* [BatchUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_BatchUrl) – URL for batch editing. -1. **InsertUrl**: Specifies the URL for inserting new data. -2. **RemoveUrl**: Specifies the URL for removing existing data. -3. **UpdateUrl**: Specifies the URL for updating existing data. -4. **CrudUrl**: Specifies a single URL for all CRUD operations. -5. **BatchUrl**: Specifies the URL for batch editing. - -To enable editing in Blazor DataGrid, refer to the editing [documentation](https://blazor.syncfusion.com/documentation/datagrid/editing). In the example below, the inline edit [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Mode) is enabled, and the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property is configured to display toolbar items for editing purposes. +To enable editing in grid, configure the [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html) and [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) properties to allow **adding**, **editing**, and **deleting** records. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -570,9 +584,9 @@ To enable editing in Blazor DataGrid, refer to the editing [documentation](https {% endhighlight %} {% endtabs %} -> Normal/Inline editing is the default edit [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Mode) for the Grid. To enable CRUD operations, ensure that the [IsPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsPrimaryKey) property is set to **true** for a specific Grid column, ensuring that its value is unique. +> Normal or Inline editing is the default edit [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Mode) for the DataGrid. To enable CRUD operations, ensure the [IsPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsPrimaryKey) property is set to **true** for a unique column. -The below class is used to structure data sent during CRUD operations. +This class defines the structure of data sent during CRUD operations. ```cs public class CRUDModel where T : class @@ -590,7 +604,7 @@ public class CRUDModel where T : class **Insert operation:** -To insert a new record, use the [InsertUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_InsertUrl) property to specify the controller action mapping URL for the insert operation. The details of the newly added record are passed to the **newRecord** parameter. +To insert a new record, specify the API endpoint using the [InsertUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_InsertUrl) property. The details of the newly added record are passed to the **newRecord** parameter. ![Insert Record](../images/urladaptor-insert-record.png) @@ -618,7 +632,7 @@ public void Insert([FromBody] CRUDModel newRecord) **Update operation:** -For updating existing records, use the [UpdateUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_UpdateUrl) property to specify the controller action mapping URL for the update operation. The details of the updated record are passed to the **updatedRecord** parameter. +To update an existing record, specify the API endpoint using the [UpdateUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_UpdateUrl) property. The updated record details are passed to the **updatedRecord** parameter. ![Update Record](../images/urladaptor-update-record.png) @@ -655,7 +669,7 @@ public void Update([FromBody] CRUDModel updatedRecord) **Delete operation:** -To delete existing records, use the [RemoveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_RemoveUrl) property to specify the controller action mapping URL for the delete operation. The primary key value of the deleted record is passed to the **deletedRecord** parameter. +To delete a record, specify the API endpoint using the [RemoveUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_RemoveUrl) property. The primary key value of the record is passed to the **deletedRecord** parameter. ![Delete Record](../images/urladaptor-delete-record.png) @@ -688,9 +702,7 @@ public void Remove([FromBody] CRUDModel deletedRecord) **Single method for performing all CRUD operations:** -Using the [CrudUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_CrudUrl) property, the controller action mapping URL can be specified to perform all CRUD operations on the server side using a single method, instead of specifying separate controller action methods for CRUD (Insert, Update, and Delete) operations. - -The following code example illustrates this behavior. +To handle all CRUD operations in a single endpoint, specify the API endpoint using the [CrudUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_CrudUrl) property. The request object includes the action type (insert, update, or remove) and the corresponding record details. {% tabs %} {% highlight cs tabtitle="GridController.cs" %} @@ -757,7 +769,12 @@ public void CrudUpdate([FromBody] CRUDModel request) **Batch operation:** -To perform batch operation, define the edit [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Mode) as **Batch** and specify the [BatchUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_BatchUrl) property in the `DataManager`. Use the **Add** toolbar button to insert new row in batch editing mode. To edit a cell, double-click the desired cell and update the value as required. To delete a record, simply select the record and press the **Delete** toolbar button. Now, all CRUD operations will be executed in single request. Clicking the **Update** toolbar button will update the newly added, edited, or deleted records from the **OrdersDetails** table using a single API POST request. +To perform batch editing, set the edit [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Mode) to **Batch** and specify the [BatchUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_BatchUrl) property in the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). + +- Use the **Add** toolbar button to insert a new row. +- Double-click a cell to edit its value. +- Select a record and press the **Delete** toolbar button to remove it. +- All changes (insert, update, delete) are submitted in a single request when the **Update** toolbar button is clicked. {% tabs %} {% highlight cs tabtitle="GridController.cs" %} @@ -844,4 +861,4 @@ public IActionResult BatchUpdate([FromBody] CRUDModel batchModel) ![UrlAdaptor - Batch Editing](../images/urladaptor-batch-editing.gif) -Please find the sample in this [GitHub location](https://github.com/SyncfusionExamples/Binding-data-from-remote-service-to-blazor-data-grid/tree/master/UrlAdaptor). \ No newline at end of file +> Refer to the complete sample in this [GitHub repository](https://github.com/SyncfusionExamples/Binding-data-from-remote-service-to-blazor-data-grid/tree/master/UrlAdaptor). \ No newline at end of file diff --git a/blazor/datagrid/connecting-to-adaptors/web-api-adaptor.md b/blazor/datagrid/connecting-to-adaptors/web-api-adaptor.md index eb435042ec..3ac35c256d 100644 --- a/blazor/datagrid/connecting-to-adaptors/web-api-adaptor.md +++ b/blazor/datagrid/connecting-to-adaptors/web-api-adaptor.md @@ -1,6 +1,6 @@ --- layout: post -title: Bind data and perform CRUD action with WebApiAdaptor in Syncfusion Blazor DataGrid +title: Bind Data and Perform CRUD with WebApiAdaptor in Blazor DataGrid description: Learn about bind data and performing CRUD operations using WebApiAdaptor in Syncfusion Blazor DataGrid. platform: Blazor keywords: adaptors, webapiadaptor, webapi adaptor, remotedata @@ -8,26 +8,31 @@ control: DataGrid documentation: ug --- -# WebApiAdaptor in Syncfusion® Blazor DataGrid +# WebApiAdaptor in Syncfusion Blazor DataGrid -The [WebApiAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#web-api-adaptor) is an extension of the [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor), designed to interact with Web APIs created with OData endpoints. This adaptor ensures seamless communication between the Syncfusion® Blazor DataGrid and OData-endpoint-based Web APIs, enabling efficient data retrieval and manipulation. For successful integration, the endpoint must be capable of understanding OData-formatted queries sent along with the request. +The [WebApiAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#web-api-adaptor) extends Syncfusion® Blazor [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor) to enable seamless interaction between the Blazor DataGrid component and Web API endpoints that understand OData-formatted queries. The adaptor manages data transfer, filtering, sorting, and other server-side operations by generating the appropriate OData query strings. A correctly configured API endpoint interprets these queries and returns the requested data in a format compatible with [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). -To enable the OData query option for a Web API, please refer to the corresponding [documentation](https://learn.microsoft.com/en-us/aspnet/web-api/overview/odata-support-in-aspnet-web-api/supporting-odata-query-options), which provides detailed instructions on configuring the endpoint to understand OData-formatted queries. +**Key benefits**: -This section describes a step-by-step process for retrieving data using the `WebApiAdaptor` and binding it to the Blazor Grid to facilitate data and CRUD operations. +- Utilizes existing OData conventions for query generation. +- Simplifies server-side CRUD implementation for Blazor DataGrid. +- Supports high-performance data operations by delegating processing to the server. ## Creating an API service -To configure a server with the Syncfusion® Blazor DataGrid, follow these steps: +To configure a Web API for integration with the Syncfusion® Blazor DataGrid, follow these steps: **1. Create a Blazor web app** -You can create a **Blazor Web App** named **WebApiAdaptor** using Visual Studio 2022, either via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). Make sure to configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows). +1. Open Visual Studio 2022. +2. Choose **Blazor Web App** and name the project **WebApiAdaptor**. +3. Use either [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs) or the Syncfusion® Blazor Extension to create the project. +4. Select the preferred [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-9.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs). **2. Create a model class** -Create a new folder named **Models**. Then, add a model class named **OrdersDetails.cs** in the **Models** folder to represent the order data. - +Add a **Models** folder and create a class named **OrdersDetails.cs** to represent order data. + ```csharp namespace WebApiAdaptor.Models { @@ -86,9 +91,8 @@ namespace WebApiAdaptor.Models ``` **3. Create an API controller** -Create a new folder named **Controllers**. Then, add a controller named **GridController.cs** in the **Controllers** folder to handle data communication with Blazor DataGrid. Implement the `Get` method in the controller to return data in JSON format, including the `Items` and `Count` properties as required by the `WebApiAdaptor`. +Add a **Controllers** folder and create **GridController.cs** to handle data operations: -The sample response object should look like this: ``` { @@ -98,7 +102,7 @@ The sample response object should look like this: ``` {% tabs %} -{% highlight c# tabtitle="GridController.cs"%} +{% highlight c# tabtitle="GridController.cs" %} using Microsoft.AspNetCore.Mvc; using Syncfusion.Blazor.Data; @@ -130,12 +134,10 @@ namespace WebApiAdaptor.Controllers {% endhighlight %} {% endtabs %} -> When using the WebAPI Adaptor, the data source is returned as a pair of **Items** and **Count**. However, if the `Offline` property of `SfDataManager` is enabled, the entire data source is returned from the server as a collection of objects. In this case, the `$inlinecount` will not be included. Additionally, only a single request is made to fetch all the data from the server, and no further requests are sent. +> When using `WebApiAdaptor`, the response must include **Items** and **Count** properties. If the [Offline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Offline) property of [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) is enabled, the entire collection is returned without **$inlinecount**, and only one request is made to fetch all data. **4. Register controllers in `Program.cs`** -Add the following lines in the `Program.cs` file to register controllers: - ```csharp // Register controllers in the service container. builder.Services.AddControllers(); @@ -146,40 +148,44 @@ app.MapControllers(); **5. Run the application** -Run the application in Visual Studio. The API will be accessible at a URL like **https://localhost:xxxx/api/Grid** (where **xxxx** represents the port number). Please verify that the API returns the order data. +Run the application in Visual Studio. Build and run the application in Visual Studio. The API will be available at a URL similar to **https://localhost:xxxx/api/Grid**, where **xxxx** represents the port number. Confirm that the API returns the expected order data in JSON format. ![WebApiAdaptor Data](../images/web-api-adaptor-data.png) -## Connecting Syncfusion® Blazor DataGrid to an API service - -To integrate the Syncfusion® Blazor DataGrid into your project using Visual Studio, follow the below steps: - -**1. Install Syncfusion® Blazor DataGrid and Themes NuGet packages** - -To add the Blazor DataGrid in the app, open the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +## Connecting Syncfusion Blazor DataGrid to an API service -If your Blazor Web App uses `WebAssembly` or `Auto` render modes, install the Syncfusion® Blazor NuGet packages in the client project. +To bind the Syncfusion® Blazor DataGrid to a remote API using the [WebApiAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html#Syncfusion_Blazor_Adaptors_WebApiAdaptor), configure the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component with the API endpoint and adaptor type. The following steps outline the integration process: + +**1. Install Required NuGet Packages** -Alternatively, use the following Package Manager commands: +* To add the Syncfusion® Blazor DataGrid to the application, open NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install: + + * [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) + + * [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) + +> * For **Blazor Web Apps** using **WebAssembly** or **Auto** render modes, install these packages in the client project. + +* Alternatively, use the following Package Manager commands: ```powershell Install-Package Syncfusion.Blazor.Grid -Version {{ site.releaseversion }} Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} ``` -> Syncfusion® Blazor components are available on [nuget.org]( https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages]( https://blazor.syncfusion.com/documentation/nuget-packages) topic for a complete list of available packages. +> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for a complete list of available packages. **2. Register Syncfusion® Blazor service** -- Open the **~/_Imports.razor** file and import the required namespaces. - +- Add the required namespaces in **~/_Imports.razor**: + ```cs @using Syncfusion.Blazor @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Data ``` -- Register the Syncfusion® Blazor service in the **~/Program.cs** file. +- Register the Syncfusion® Blazor service in **Program.cs**: ```csharp using Syncfusion.Blazor; @@ -187,11 +193,11 @@ using Syncfusion.Blazor; builder.Services.AddSyncfusionBlazor(); ``` -For apps using `WebAssembly` or `Auto (Server and WebAssembly)` render modes, register the service in both **~/Program.cs** files. +> For apps using `WebAssembly` or `Auto (Server and WebAssembly)` render modes, register the service in both **~/Program.cs** files. -**3. Add stylesheet and script resources** +**3. Add stylesheet and script references** -Include the theme stylesheet and script references in the **~/Components/App.razor** file. +Include the theme and script references in **App.razor**: ```html @@ -205,15 +211,15 @@ Include the theme stylesheet and script references in the **~/Components/App.raz ``` -> * Refer to the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for various methods to include themes (e.g., Static Web Assets, CDN, or CRG). -> * Set the render mode to **InteractiveServer** or **InteractiveAuto** in your Blazor Web App configuration. +> * Refer to the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for available methods to include themes, such as Static Web Assets, CDN, or CRG. +> * Set the render mode to **InteractiveServer** or **InteractiveAuto** in the Blazor Web App configuration. -**4. Add Blazor DataGrid and configure with server** +**4. Configure DataGrid with WebApiAdaptor** -To connect the Blazor DataGrid to a hosted API, use the [Url]( https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) property of [SfDataManager]( https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). The `SfDataManager` offers multiple adaptor options to connect with remote database based on an API service. Below is an example of the [WebApiAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#web-api-adaptor) configuration where an API service are set up to return the resulting data in the **Items** and **Count** format. Update the **Index.razor** file as follows. +Use the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component to connect the DataGrid to the API endpoint. Set the [Adaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Adaptor) property to [WebApiAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html#Syncfusion_Blazor_Adaptors_WebApiAdaptor). {% tabs %} -{% highlight razor tabtitle="Index.razor"%} +{% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Data @@ -231,7 +237,7 @@ To connect the Blazor DataGrid to a hosted API, use the [Url]( https://help.sync {% endhighlight %} -{% highlight c# tabtitle="GridController.cs"%} +{% highlight c# tabtitle="GridController.cs" %} using Microsoft.AspNetCore.Mvc; using Syncfusion.Blazor.Data; @@ -271,27 +277,23 @@ When you run the application, the Blazor Grid will display data fetched from th ![WebMethod Adaptor Data](../images/blazor-datagrid-adaptors.gif) -**Perform data operations in a WebAPI service** +## Perform data operations in WebApiAdaptor -When using the `WebApiAdaptor` with the `SfDataManager`, data operations such as filtering, sorting, paging, and searching are executed on the server side. These operations are sent from the client to the server as **QueryString** parameters, which can be accessed in your API controller using `Request.Query`. +When the [WebApiAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html#Syncfusion_Blazor_Adaptors_WebApiAdaptor) is used with [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html), data operations such as **filtering**, **sorting**, **paging**, and **searching** are executed on the server. These operations are sent as query string parameters in the **HTTP** request and can be accessed in the API controller through `Request.Query`. -**Query parameters for data operations** +The following query parameters are automatically included when the `WebApiAdaptor` is configured: -The following table lists the query parameters used by the Blazor DataGrid for various data operations: +* **$skip, $top** - Applies paging details from [DataManagerRequest](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManagerRequest.html) to skip a defined number of records and retrieve a specified number of records. -| Key | Description | -|---------------|-----------------------------------------------------------------------------| -| `$skip`, `$top` | Specifies the query parameters for performing paging operations on the server side. | -| `$filter` | Specifies the query parameter for performing filtering and searching operations on the server side. | -| `$orderby` | Specifies the query parameter for performing sorting operations on the server side. | +* **$filter** - Applies filter conditions and search criteria from `DataManagerRequest` to the data source. -> These parameters are automatically sent when the `WebApiAdaptor` is used. You can access and process them in your Web API Controller to perform the corresponding operations. +* **$orderby** - Applies sort descriptors from `DataManagerRequest` to the data source for ascending or descending order. -## Handling search operations +> These parameters allow the API controller to process and apply the corresponding operations on the server-side data source. -When a search operation is triggered, the `$filter` parameter is sent to the server. The `$filter` parameter specifies the query conditions that are applied to the data to perform the search. +## Handling search operations -The following example demonstrates how to extract the `$filter` parameter and apply search logic across multiple fields: +When a search is performed in the Blazor DataGrid, the `WebApiAdaptor` sends the **$filter** query parameter to the API. This parameter contains conditions that define the search criteria. The API controller can parse this parameter and apply the search logic to the data source. ![WebApiAdaptor - Searching](../images/web-api-adaptor-searching.png) @@ -375,13 +377,11 @@ public object GetOrderData() {% endhighlight %} {% endtabs %} -> This example demonstrates a custom way of handling the `$filter` query sent by the Grid. You can also handle it using your own logic based on the query string format or use dynamic expression evaluation libraries for a more generic approach.. +> This example demonstrates a custom approach for handling the **$filter** query sent by the DataGrid. Alternative implementations can use custom logic based on the query string format or leverage dynamic expression evaluation libraries for a more generic solution. ## Handling filtering operation -When filtering is applied, the `$filter` parameter is sent to the server. The `$filter` parameter specifies the conditions for filtering the data based on the provided criteria. - -The following example demonstrates how to extract the `$filter` parameter and apply filtering logic based on custom conditions: +When filtering is applied in the Blazor DataGrid, the `WebApiAdaptor` sends the **$filter** query parameter to the server. This parameter specifies the conditions used to filter the data. ![WebApiAdaptor - Filtering](../images/web-api-adaptor-filtering.png) @@ -490,13 +490,11 @@ public object GetOrderData() {% endhighlight %} {% endtabs %} -> The `$filter` parameter can include various conditions, such as **substringof**, **eq** (equals), **gt** (greater than), and more. You can customize the filtering logic based on your specific data structure and requirements. +> The **$filter** parameter can include conditions such as **substringof**, **eq** (equals), **gt** (greater than), and others. Filtering logic can be customized based on the data structure and application requirements. ## Handling sorting operation -When sorting is triggered, the `$orderby` parameter is sent to the server. The `$orderby` parameter specifies the fields to sort by, along with the sort direction (ascending or descending). - -The following example demonstrates how to extract the `$orderby` parameter and apply sorting logic: +When sorting is applied in the Blazor DataGrid, the `WebApiAdaptor` sends the **$orderby** query parameter to the server. This parameter specifies the fields to sort by and the sort direction (**ascending** or **descending**). ***Ascending Sorting*** @@ -586,13 +584,14 @@ public object GetOrderData() {% endhighlight %} {% endtabs %} -> You can parse the `$orderby` parameter to dynamically apply sorting on one or more fields in either ascending or descending order. +> Parse the **$orderby** query parameter to dynamically apply sorting on one or more fields in **ascending** or **descending** order. ## Handling paging operation -When paging is applied, the `$skip` and `$top` parameters are sent to the server. The `$skip` parameter specifies the number of records to skip, while the `$top` parameter specifies how many records to retrieve for the current page. +When paging is applied in the Blazor DataGrid, the `WebApiAdaptor` sends the **$skip** and **$top** query parameters to the server. -The following example demonstrates how to apply paging logic: +- **$skip** - Specifies the number of records to skip. +- **$top** - Specifies the number of records to retrieve for the current page. ![WebApiAdaptor - Paging](../images/web-api-adaptor-paging.png) @@ -649,15 +648,24 @@ public object GetOrderData() {% endhighlight %} {% endtabs %} -> Always calculate the total record count before applying paging. This ensures that the Grid can display the correct total number of records for pagination. +> Always calculate the total record count before applying paging. This ensures that the DataGrid displays the correct total number of records for pagination. -N> If you want to handle filtering, sorting, and paging operations using Dynamic LINQ Expressions, you can refer to this [GitHub repository](https://github.com/SyncfusionExamples/blazor-datagrid-data-operations-in-wep-api-service) for an example of how to implement it dynamically. +N> To handle filtering, sorting, and paging operations dynamically using LINQ expressions, refer to this [GitHub repository](https://github.com/SyncfusionExamples/blazor-datagrid-data-operations-in-wep-api-service) for an example implementation. ## Handling CRUD operations -To manage CRUD (Create, Read, Update, and Delete) operations using the WebApiAdaptor in Syncfusion® Blazor DataGrid, follow the provided guide for configuring the Grid for [editing](https://blazor.syncfusion.com/documentation/datagrid/editing) and utilize the sample implementation of the `GridController` in your server application. This controller handles HTTP requests for CRUD operations such as **GET, POST, PUT,** and **DELETE**. +The `WebApiAdaptor` enables Create, Read, Update, and Delete (CRUD) operations in the Syncfusion® Blazor DataGrid through standard Web API endpoints. These operations are performed using **HTTP methods** in the API controller. + +To support full CRUD functionality, define the following methods in the GridController class: + +* **GET** – Retrieves data from the service +* **POST** – Inserts new records +* **PATCH** – Updates existing records +* **DELETE** – Removes records + +To enable [editing](https://blazor.syncfusion.com/documentation/datagrid/editing) in the DataGrid, configure the [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html) and [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) properties to allow adding, editing, and deleting records. -To enable CRUD operations in the Grid, follow the steps below: +Set the [IsPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsPrimaryKey) property to **true** for a column that uniquely identifies each record. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -680,11 +688,11 @@ To enable CRUD operations in the Grid, follow the steps below: {% endhighlight %} {% endtabs %} -> Normal/Inline editing is the default edit [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Mode) for the Grid. To enable CRUD operations, ensure that the [IsPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsPrimaryKey) property is set to **true** for a specific Grid column, ensuring that its value is unique. +> Normal or Inline editing is the default edit [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Mode) for the DataGrid. To enable CRUD operations, ensure the [IsPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsPrimaryKey) property is set to **true** for a unique column. **Insert operation:** -To insert a new record into your Syncfusion® Grid, you can utilize the `HttpPost` method in your server application. The details of the newly added record are passed to the **newRecord** parameter. Below is a sample implementation of inserting a record using the **GridController**: +To insert a new record, implement the **HttpPost** method in the **GridController** class. This method receives the new record from the client and adds it to the data source. ![Insert Record](../images/web-api-adaptor-insert.png) @@ -707,7 +715,7 @@ public void Post([FromBody] OrdersDetails newRecord) **Update operation:** -Updating a record in the Syncfusion® Grid can be achieved by utilizing the `HttpPut` method in your controller. The details of the updated record are passed to the **updatedRecord** parameter. Here's a sample implementation of updating a record: +To update an existing record, implement the **HttpPatch** method. This method performs a partial update based on the provided key and non-null fields. ![Update Record](../images/web-api-adaptor-update.png) @@ -739,7 +747,7 @@ public void Put([FromBody] OrdersDetails updatedRecord) **Delete operation:** -To delete a record from your Syncfusion® Grid, you can use the `HttpDelete` method in your controller. The primary key value of the deleted record is passed to the **deletedRecord** parameter.Below is a sample implementation: +To delete a record, implement the **HttpDelete** method. This method removes the record identified by the key from the data source. ![Delete Record](../images/web-api-adaptor-delete.png) @@ -767,4 +775,4 @@ public void Delete(int id) ![WebApiAdaptor CRUD operations](../images/adaptor-crud-operation.gif) -N> ASP.NET Core (Blazor) Web API with batch handling is not yet supported by ASP.NET Core v3+. Therefore, it is currently not feasible to support **Batch** mode CRUD operations until ASP.NET Core provides support for batch handling. For more details, refer to [this GitHub issue](https://github.com/dotnet/aspnetcore/issues/14722). \ No newline at end of file +N> **Batch** mode CRUD operations are not supported in ASP.NET Core Web API because batch handling is unavailable in ASP.NET Core v3+. This feature will remain unsupported until ASP.NET Core provides native batch handling. For more details, refer to [this GitHub issue](https://github.com/dotnet/aspnetcore/issues/14722). \ No newline at end of file