diff --git a/blazor/common/data-binding/restful-service-binding.md b/blazor/common/data-binding/restful-service-binding.md index d9c606d09d..9d98108570 100644 --- a/blazor/common/data-binding/restful-service-binding.md +++ b/blazor/common/data-binding/restful-service-binding.md @@ -9,29 +9,29 @@ documentation: ug # Bind data from RESTful web services to Syncfusion® Blazor components -This article shows how to retrieve data from a RESTful web services, bind it to the Grid component, and perform CRUD operations. Data is fetched from an ODatav4 service using the [ODataV4Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odatav4-adaptor) of `SfDataManager`. +This article explains how to retrieve data from RESTful web services, bind it to the Blazor Grid component, and perform CRUD operations. The example demonstrates fetching data from an OData v4 service using the [ODataV4Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odatav4-adaptor) of `SfDataManager`. -Choose the suitable adaptor based on the RESTful service which you are using to bind data for the Syncfusion® Blazor component. Refer to the following documentation to know about the available Adaptors of SfDataManager. +Choose the appropriate adaptor based on the RESTful service used for binding data to the Syncfusion® Blazor component. Refer to the following documentation for details about the available adaptors in SfDataManager. * [Adaptors](https://blazor.syncfusion.com/documentation/data/adaptors) ## Prerequisite software The following software are required: -* Visual Studio 2022 -* .NET 6.0 or later +* Visual Studio 2026 or earlier +* .NET 10.0 or earlier versions. ## Create the database -Open Visual Studio , select **View -> SQL Server Object Explorer**. Right-click on the Databases folder to create a new Database and name it as OrdersDetails. +Open Visual Studio, select **View -> SQL Server Object Explorer**. Right-click the Databases folder, create a new database, and name it OrdersDetails. ![Add new database in Blazor](../images/odata-add-db.png) ![Adding database name and location in Blazor](../images/odata-db-name.png) -Right-click on the **Tables** folder of the created database and click **Add New Table**. +Right-click the **Tables** folder in the **OrdersDetails** database and select **Add New Table**. ![Add table in Blazor](../images/odata-add-table.png) -Use the following query to add a new table named **Orders**. +Use the following SQL query to create a table named **Orders**: ``` Create Table Orders( @@ -42,31 +42,39 @@ Create Table Orders( ) ``` -Now, the Orders table design will look like below. Click on the **Update** button. +After executing the query, the Orders table schema will appear in the designer as shown in the snippet below. +Verify that the columns and data types are correctly defined, then click **Update** to apply the changes. ![Database table design in Blazor](../images/odata-table-design.png) -Now, click on **Update Database**. +Now, select **Update Database** to confirm and create the table in the OrdersDetails database. ![Update database in Blazor](../images/odata-update-db.png) ## Create OData service project -Open Visual Studio 2022 and create an empty ASP.NET Core Web Application named ODataServiceProject. After creating the application, install the [Microsoft.AspNetCore.OData](https://www.nuget.org/packages/Microsoft.AspNetCore.OData/) package by running the following command in the Package Manager Console. +Follow the steps below to set up an ASP.NET Core Web API project with OData support. + +* Open Visual Studio 2026 or an earlier version. +* Create a new ASP.NET Core Web API project and set the project name to ODataServiceProject. +* Open the Package Manager Console. +* Install the [Microsoft.AspNetCore.OData](https://www.nuget.org/packages/Microsoft.AspNetCore.OData/) package by running the following command. ``` Install-Package Microsoft.AspNetCore.OData ``` -This package contains everything you need to create OData v4.0 endpoints using ASP.NET Core MVC and to support OData query syntax for your web APIs. +This package provides all the necessary components to create OData v4.0 endpoints using ASP.NET Core MVC and enables support for OData query syntax in web APIs. ### Generate DbContext and model class from the database -Now, you need to scaffold **DbContext** and **model classes** from the existing **OrdersDetails** database. To perform scaffolding and work with the SQL Server database in our application, install the following NuGet packages. +To integrate your application with the existing **OrdersDetails** database, you must scaffold a **DbContext** and the corresponding **model classes**. Scaffolding is a proven approach that automatically generates strongly typed classes mapped to your database tables, ensuring reliable and maintainable data access throughout your application. + +Install the following NuGet packages: -* [Microsoft.EntityFrameworkCore.Tools](https://www.nuget.org/packages/Microsoft.EntityFrameworkCore.Tools) : This package creates database context and model classes from the database. +* [Microsoft.EntityFrameworkCore.Tools](https://www.nuget.org/packages/Microsoft.EntityFrameworkCore.Tools) : Provides tools to generate the database context and model classes. -* [Microsoft.EntityFrameworkCore.SqlServer](https://www.nuget.org/packages/Microsoft.EntityFrameworkCore.SqlServer/) :The database provider that allows [Entity Framework Core](https://learn.microsoft.com/en-us/ef/core/) to work with SQL Server. +* [Microsoft.EntityFrameworkCore.SqlServer](https://www.nuget.org/packages/Microsoft.EntityFrameworkCore.SqlServer/) :Enables [Entity Framework Core](https://learn.microsoft.com/en-us/ef/core/) to work with SQL Server. Run the following commands in the **Package Manager Console**. @@ -76,22 +84,22 @@ Install-Package Microsoft.EntityFrameworkCore.SqlServer ``` -Once the above packages are installed, you can scaffold DbContext and Model classes. Run the following command in the **Package Manager Console**. +Once the required packages are installed, you can scaffold the DbContext and model classes. Execute the following command in the **Package Manager Console**. ``` Scaffold-DbContext “Data Source=(localdb)\MSSQLLocalDB;Initial Catalog=OrdersDetails;Integrated Security=True;Connect Timeout=30;Encrypt=False;TrustServerCertificate=False;ApplicationIntent=ReadWrite;MultiSubnetFailover=False” Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models ``` -The above scaffolding command contains the following details for creating DbContext and model classes for the existing database and its tables. +The scaffolding command includes all the necessary details to generate the DbContext and model classes for the existing database and its tables. * **Connection string**: Data Source=(localdb)\MSSQLLocalDB;Initial Catalog=OrdersDetails;Integrated Security=True;Connect Timeout=30;Encrypt=False;TrustServerCertificate=False;ApplicationIntent=ReadWrite;MultiSubnetFailover=False * **Data provider**: Microsoft.EntityFrameworkCore.SqlServer * **Output directory**: -OutputDir Models -After running the above command, the **OrdersDetailsContext.cs** and **Orders.cs** files will be created under the **ODataServiceProject.Models** folder as follows. +After executing the above command, the files **OrdersDetailsContext.cs** and **Orders.cs** will be generated inside the **ODataServiceProject.Models** folder, as shown below. ![Models folder in Blazor](../images/odata-models.png) -You can see that OrdersDetailsContext.cs file contains the connection string details in the **OnConfiguring** method. +You can see that the OrdersDetailsContext.cs file includes the connection string configuration within the **OnConfiguring** method. {% tabs %} {% highlight c# tabtitle="OrdersDetailsContext.cs" hl_lines="24" %} @@ -130,7 +138,7 @@ namespace ODataServiceProject.Models {% endhighlight %} {% endtabs %} -It is not recommended to have a connection string with sensitive information in the OrdersDetailsContext.cs file, so the connection string is moved to the **appsettings.json** file. +It is generally a better practice to avoid keeping the connection string with sensitive information directly in the OrdersDetailsContext.cs file. Instead, it’s recommended to move the connection string to the **appsettings.json** file for improved security and easier configuration. {% tabs %} {% highlight json tabtitle="appsettings.json" %} @@ -151,7 +159,7 @@ It is not recommended to have a connection string with sensitive information in {% endhighlight %} {% endtabs %} -Now, the DbContext must be configured using connection string and registered as scoped service using the AddDbContext method in **Program.cs**. +Now, you need to set up the DbContext so that it uses the connection string from your configuration. This tells your application how to connect to the database. After that, you must register the DbContext as a service so that it can be used throughout your application whenever needed. To do this, use the **AddDbContext** method in the **Program.cs** file. {% tabs %} {% highlight c# tabtitle=".NET 6 & .NET 7 (~/Program.cs)" %} @@ -164,11 +172,11 @@ builder.Services.AddDbContext(option => ### Creating ODataV4 service -The application is now configured to connect with the **OrdersDetails** database using [Entity Framework](https://learn.microsoft.com/en-us/ef/core/). Now, it’s time to consume data from the OrdersDetails database. To do so, you need an OData controller to serve data from the DbContext to the Blazor application. +The application is now set up to connect to the **OrdersDetails** database using [Entity Framework](https://learn.microsoft.com/en-us/ef/core/). Now, we need to retrieve data from this database and make it available to the Blazor application. To achieve this, we will create an OData controller that serves data from the DbContext to the Blazor app. -To create OData controller, right-click **Controller** folder in ODataServiceProject and select **Add -> New Item -> API controller with read/write actions**. We are naming this controller as **OrdersController** as it returns Orders table records. +To create the OData controller, right-click the **Controller** folder in the ODataServiceProject, then select **Add -> New Item -> API controller with read/write actions**. Name this controller **OrdersController**, as it will handle records from the Orders table. -Now, replace the controller with the following code which contains code to handle CRUD operations in the Orders table. +After creating the controller, replace its content with the following code. This code includes all the logic required to perform CRUD operations (Create, Read, Update, Delete) on the Orders table. {% tabs %} {% highlight c# tabtitle="OrdersController.cs" %} @@ -263,8 +271,8 @@ Add the following line in the **launchSettings.json** file. {% endhighlight %} {% endtabs %} -Additionally, make sure to include the AddCors() and UseCors() methods in **Program.cs** file of ODataService project when configuring with a Blazor Web App. -Open **Program.cs** file in .NET 6 and .NET 7 application and configure by referring to the following codes. +Additionally, when configuring the application to work with a Blazor Web App, make sure to include the AddCors() and UseCors() methods in the **Program.cs** file of the ODataService project. These methods enable cross-origin requests, which are required for the Blazor app to communicate with the OData service. +Open the **Program.cs** file in your .NET application and configure it by referring to the following code. {% tabs %} {% highlight c# tabtitle=".NET 6 & .NET 7 (~/Program.cs)" %} @@ -321,21 +329,24 @@ app.Run(); ## Create Blazor Web App -Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor Web App** using Visual Studio 2026 or an earlier version. You can use the official [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling#interactivity-location) when creating the Blazor Web App. +When creating the Blazor Web App, make sure to configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling#interactivity-location) based on your project requirements. ## Create Blazor Server Application -Create a **Blazor Server App** using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +You can also create a **Blazor Server App** using Visual Studio through [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Add Syncfusion® Blazor Grid and Themes NuGet in Blazor App -To add **Blazor DataGrid** component 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 use the **Blazor DataGrid** component in your application, open the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*),Search for and install the following packages: -If using `WebAssembly` or `Auto` render modes in a Blazor Web App, install Syncfusion® Blazor NuGet packages in the client project. +* [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) +* [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) -Alternatively, you can utilize the following package manager command to achieve the same. +For projects using `WebAssembly` or `Auto` render modes in a Blazor Web App, make sure to install the Syncfusion® Blazor NuGet packages in the client project. + +Alternatively, you can use the following Package Manager Console command to install the packages {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -357,9 +368,9 @@ Open **~/_Imports.razor** file and import the following namespace. {% endhighlight %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your App. +Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of the application. -For a Blazor Web App with `WebAssembly` or `Auto (Server and WebAssembly)` interactive render mode, register the Syncfusion® Blazor service in both **~/Program.cs** files of your web app. +For a Blazor Web App that uses `WebAssembly` or `Auto (Server and WebAssembly)` interactive render mode, the Syncfusion® Blazor service must be registered in both **~/Program.cs** files of the web application. ```cshtml @@ -371,21 +382,19 @@ builder.Services.AddSyncfusionBlazor(); ``` -Themes provide life to components. Syncfusion® Blazor has different [themes](https://blazor.syncfusion.com/documentation/appearance/themes). They are: +Themes provide life to components, and Syncfusion®® Blazor offers different [themes](https://blazor.syncfusion.com/documentation/appearance/themes): + +- Bootstrap5 +- Material 3 +- Tailwind CSS +- High Contrast +- Fluent -* Bootstrap5 -* Material 3 -* Tailwind CSS -* High Contrast -* Fluent +In this demo application, the latest theme will be used. -In this demo application, the latest theme is used. +* For **.NET 8, .NET 9, and .NET 10** Blazor Web Apps using any render mode (Server, WebAssembly, or Auto), refer the stylesheet inside the `` of **~/Components/App.razor**. - * For **Blazor Web App**, reference the stylesheet inside the `` of **~/Pages/_Layout.cshtml**. - * For **Blazor WebAssembly App**, reference the stylesheet inside the `` of **~/wwwroot/index.html**. - * For **Blazor Server App**, reference the stylesheet inside the `` of - * **~/Pages/_Host.cshtml** file for .NET 7. - * **~/Pages/_Layout.cshtml** file for .NET 6. +* For **Blazor WebAssembly applications**, refer the stylesheet inside the `` element of **wwwroot/index.html** file. {% highlight cshtml %} @@ -406,9 +415,9 @@ In this demo application, the latest theme is used. ## Add Syncfusion® Blazor DataGrid component to an application -In previous steps, you have successfully configured the Syncfusion® Blazor package in the application. Now, you can add the grid component to the `.razor` page inside the `Pages` folder. +In the previous steps, the Syncfusion® Blazor package has been successfully configured in the application. The next step is to add the Grid component to a `.razor` page located inside the `Pages` folder. -If you have set the interactivity location to `Per page/component` in the web app, ensure that you define a render mode at the top of the Syncfusion® Blazor component-included razor page as follows: +If the interactivity location is set to `Per page/component` in the web app, ensure that you define a render mode at the top of the Syncfusion® Blazor component-included razor page as follows: {% tabs %} {% highlight razor %} @@ -429,7 +438,7 @@ If you have set the interactivity location to `Per page/component` in the web ap ## Binding data to Blazor DataGrid component using ODataV4Adaptor -To consume data from the OData controller, add **SfDataManager** with **ODataV4Adaptor**. Refer to the following documentation for more details on ODataV4Adaptor. +To retrieve data from the OData controller, configure the **SfDataManager** component with the **ODataV4Adaptor**. For more details about ODataV4Adaptor and its configuration options, refer to the following documentation. [ODataV4Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odatav4-adaptor) @@ -445,7 +454,7 @@ To consume data from the OData controller, add **SfDataManager** with **ODataV4A N> In the example above, a localhost URL is used. Replace it with the actual URL of your OData service. -Grid columns can be defined by using the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) component. We are going to create columns using the following code. +Grid columns can be defined using the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) component. The following code demonstrates how to create columns for the Grid. {% tabs %} {% highlight razor %} @@ -476,7 +485,7 @@ Grid columns can be defined by using the [GridColumn](https://help.syncfusion.co {% endhighlight %} {% endtabs %} -When you run the application, the **Get()** method will be called in your OData controller. +When the application runs, the **Get()** method in the OData controller is automatically invoked to retrieve data from the database. {% tabs %} {% highlight c# %} @@ -503,10 +512,9 @@ public class OrdersController : ODataController ## Handling CRUD operations with our Syncfusion® Blazor DataGrid component -Enable editing in the grid component using [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html). The Grid supports several editing modes: [Inline/Normal](https://blazor.syncfusion.com/documentation/datagrid/in-line-editing), [Dialog](https://blazor.syncfusion.com/documentation/datagrid/dialog-editing), and [Batch](https://blazor.syncfusion.com/documentation/datagrid/batch-editing). +Editing can be enabled in the DataGrid component by using [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html). The Grid supports multiple editing modes, including [Inline/Normal](https://blazor.syncfusion.com/documentation/datagrid/in-line-editing), [Dialog](https://blazor.syncfusion.com/documentation/datagrid/dialog-editing), and [Batch](https://blazor.syncfusion.com/documentation/datagrid/batch-editing). -Here, Inline edit mode is used with the Toolbar to show editing actions. -We have added the DataGrid Editing and Toolbar code with previous Grid model. +In this example, the Inline edit mode is used along with the Toolbar to display editing actions. The DataGrid editing configuration and toolbar code have been added to the existing Grid model. {% tabs %} {% highlight razor %} @@ -538,15 +546,15 @@ We have added the DataGrid Editing and Toolbar code with previous Grid model. {% endhighlight %} {% endtabs %} -N> Normal editing is the default mode. Set the [IsPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_IsPrimaryKey) property to **true** for the column that holds a unique key. +N> Normal editing is the default edit mode for the DataGrid component. To perform 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 GridColumn whose value is unique. This allows the Grid to correctly identify and update records during editing. ### Insert a row -To insert a new row, click the **Add** toolbar button. The new record edit form will look like below. +To add a new record, click the **Add** button in the toolbar. This will open the new record edit form, as shown below. ![Insert Operation in Blazor](../images/odata-add-one.png) -Clicking the **Update** toolbar button will insert the record in the Orders table by calling the below **POST** method of the OData controller. +After entering the required details, click the **Update** button in the toolbar. This action will insert the record into the Orders table by calling the **POST** method in the OData controller, as shown in the following code. {% tabs %} {% highlight c# tabtitle="OrdersController.cs" %} @@ -565,11 +573,11 @@ public async Task Post([FromBody] Orders book) ### Update a row -To edit a row, select any row and click the **Edit** toolbar button. The edit form will look like below. Edit the Customer Name column. +To edit an existing record, select the row and click the **Edit** button in the toolbar. The edit form will appear, as shown below. For example, the Customer Name column can be modified. ![Update Operation in Blazor](../images/odata-update-one.png) -Clicking the **Update** toolbar button will update the record in the Orders table by calling the below **PATCH** method of the OData controller. +After making the changes, click the **Update** button in the toolbar. This action updates the record in the Orders table by calling the **PATCH** method in the OData controller, as shown in the following code. {% tabs %} {% highlight c# tabtitle="OrdersController.cs" %} @@ -585,13 +593,14 @@ public async Task Patch([FromODataUri] long key, [FromBody] Delta {% endhighlight %} {% endtabs %} -The resultant grid will look like below. +The resultant Grid will look like below. ![Update Operation in Blazor](../images/odata-update-two.png) ### Delete a row -To delete a row, select any row and click the **Delete** toolbar button. Deleting operation will send a **DELETE** request to the OData controller with the selected record's primary key value to remove the corresponding record from the Orders table. +To remove a record, select the desired row and click the **Delete** button in the toolbar. This action sends a **DELETE** request to the OData controller, using the primary key of the selected record to identify and remove it from the Orders table. +The following code shows the implementation of the Delete method in the OData controller. {% tabs %} {% highlight c# tabtitle="OrdersController.cs" %}