Getting Started with Blazor DataManager Component in Web App

4 Dec 202514 minutes to read

The Syncfusion^® Blazor DataManager component acts as a data gateway for Syncfusion^® Blazor controls that support data binding. It enables interaction with local or remote data sources using queries and adaptors. This guide provides step-by-step instructions to configure the component in a Blazor Web App created with Visual Studio or Visual Studio Code.

• Visual Studio
• Visual Studio Code
• .NET CLI

Prerequisites

• Ensure the development environment meets the system requirements for Syncfusion^® Blazor components before proceeding with the setup.

Create a new Blazor Web App in Visual Studio

A Blazor Web App can be created using Visual Studio with the built-in Microsoft templates or the Syncfusion^® Blazor Extension.

1. Open Visual Studio 2022 (version 17.8 or later).
2. Select Create a new project.
3. Choose Blazor Web App from the template list and click Next.
4. Specify the project name, location, and solution settings, then click Next.
5. Select the target framework as .NET 9.0 or later (choose the latest installed version).
6. Choose the Interactive render mode(Server, WebAssembly, or Auto) and Interactivity location.
7. Review the remaining options and click Create to generate the project.

Install Syncfusion^® Blazor Data and Themes NuGet in the Blazor Web App

To integrate the Blazor DataManager component, install the required Syncfusion^® NuGet packages in the solution:

1. Open NuGet Package Manager in Visual Studio:

   Tools → NuGet Package Manager → Manage NuGet Packages for Solution.

2. Search and install the following packages:

   • Syncfusion.Blazor.Data
   • Syncfusion.Blazor.Themes

3. For projects using WebAssembly or Auto interactive render modes, ensure these packages are installed in the Client project.

4. Alternatively, use the Package Manager Console:

Package Manager

Install-Package Syncfusion.Blazor.Data -Version 32.1.19
Install-Package Syncfusion.Blazor.Themes -Version 32.1.19

NOTE

Syncfusion^® Blazor components are available on nuget.org. For a complete list of packages, refer to NuGet packages.

Prerequisites

• Ensure the development environment meets the system requirements for Syncfusion^® Blazor components before proceeding with the setup.

Create a new Blazor Web App in Visual Studio Code

A Blazor Web App can be created using Visual Studio Code with the built-in Microsoft templates or the Syncfusion^® Blazor Extension.

1. Install the latest .NET SDK that supports .NET 9 or later.
2. Open Visual Studio Code and launch the integrated terminal (Ctrl + `).
3. Execute the following command to create a Blazor Web App with Auto Interactive render mode:

Blazor Web App

dotnet new blazor -o BlazorWebApp -int Auto
cd BlazorWebApp
cd BlazorWebApp.Client

NOTE

For other interactive render modes and interactivity locations, refer to Render Modes documentation.

Install Syncfusion^® Blazor Data and Themes NuGet in the App

To integrate the Blazor DataManager component, install the required Syncfusion^® NuGet packages using the integrated terminal:

1. Open the integrated terminal in Visual Studio Code (Ctrl + `).
2. Navigate to the directory containing the .csproj file.

3. Run the following commands to install the packages:

   • Syncfusion.Blazor.Data
   • Syncfusion.Blazor.Themes

Package Manager

dotnet add package Syncfusion.Blazor.Data -v 32.1.19
dotnet add package Syncfusion.Blazor.Themes -v 32.1.19
dotnet restore

NOTE

Syncfusion^® Blazor components are available in nuget.org. Refer to the NuGet packages topic for the available NuGet packages list with component details.

Prerequisites

Latest version of the .NET SDK. If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux).

.NET CLI

dotnet --version

Create a Blazor Web App using .NET CLI

Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux).

Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the interactive render mode documentation.

For example, in a Blazor Web App with the Auto interactive render mode, use the following commands.

Blazor Web App

dotnet new blazor -o BlazorWebApp -int Auto
cd BlazorWebApp
cd BlazorWebApp.Client

This command creates a new Blazor Web App and places it in a new directory called BlazorWebApp inside your current location. See the Create a Blazor App and dotnet new CLI command topics for more details.

Install Syncfusion^® Blazor Data and Themes NuGet in the App

Here’s an example of how to add the Blazor DataManager component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the Syncfusion.Blazor.Data and Syncfusion.Blazor.Themes NuGet packages. See Install and manage packages using the dotnet CLI for more details.

If using the WebAssembly or Auto render modes in the Blazor Web App, install Syncfusion^® Blazor component NuGet packages in the client project.

.NET CLI

dotnet add package Syncfusion.Blazor.Data --version 32.1.19
dotnet add package Syncfusion.Blazor.Themes --version 32.1.19
dotnet restore

NOTE

Syncfusion^® Blazor components are available in nuget.org. Refer to the NuGet packages topic for the available NuGet package list with component details.

Add Import Namespaces

1. Import the required namespaces in the _Imports.razor file:

~/_Imports.razor

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Data

• For WebAssembly or Auto interactive render modes, update this file in the Client project.
• For Server interactive render mode, update this file in the Components folder.

1. Register the Syncfusion^® Blazor service in the Program.cs file:

Auto or WebAssembly Render Mode

Register the service in both Server and Client projects:

Server(~/_Program.cs)

...
...
using Syncfusion.Blazor;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents()
    .AddInteractiveWebAssemblyComponents();
builder.Services.AddSyncfusionBlazor();

var app = builder.Build();
....

Client(~/_Program.cs)

...
using Syncfusion.Blazor;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.Services.AddSyncfusionBlazor();

await builder.Build().RunAsync();

Server Render Mode

For Server mode, register the service in the Program.cs file:

~/_Program.cs

...
using Syncfusion.Blazor;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();
builder.Services.AddSyncfusionBlazor();

var app = builder.Build();
....

Add stylesheet and script resources

Syncfusion^® Blazor themes and scripts are available through Static Web Assets. Add the following references in the ~/Components/App.razor file:

In the <head> section:

<head>
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
</head>

At the end of the <body> section:

<body>
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
</body>

NOTE

• Refer to Blazor Themes for various methods to reference themes in a Blazor application:

* [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets)
* [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference)
* [Custom Resource Generator (CRG)](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)

• For script reference options, see Adding Script References.

Add Blazor DataManager component

The SfDataManager component acts as a data gateway for Syncfusion^® Blazor components that support data binding. It enables interaction with local or remote data sources using queries.

Binding to JSON data

Local JSON data can be bound to the DataGrid component by assigning a collection of objects to the Json property of the SfDataManager component.

RAZOR

@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Data

<SfGrid TValue="EmployeeData" ID="Grid">
    <SfDataManager Json="@Employees"></SfDataManager>
    <GridColumns>
        <GridColumn Field="@nameof(EmployeeData.EmployeeID)" TextAlign="TextAlign.Center" HeaderText="Employee ID" Width="120"></GridColumn>
        <GridColumn Field="@nameof(EmployeeData.Name)" HeaderText="First Name" Width="130"></GridColumn>
        <GridColumn Field="@nameof(EmployeeData.Title)" HeaderText="Title" Width="120"></GridColumn>
    </GridColumns>
</SfGrid>

@code {

    public List<EmployeeData> Employees { get; set; } = new()
    {
        new EmployeeData { EmployeeID = 1, Name = "Nancy Fuller", Title = "Vice President" },
        new EmployeeData { EmployeeID = 2, Name = "Steven Buchanan", Title = "Sales Manager" },
        new EmployeeData { EmployeeID = 3, Name = "Janet Leverling", Title = "Sales Representative" },
        new EmployeeData { EmployeeID = 4, Name = "Andrew Davolio", Title = "Inside Sales Coordinator" },
        new EmployeeData { EmployeeID = 5, Name = "Steven Peacock", Title = "Inside Sales Coordinator" },
        new EmployeeData { EmployeeID = 6, Name = "Janet Buchanan", Title = "Sales Representative" },
        new EmployeeData { EmployeeID = 7, Name = "Andrew Fuller", Title = "Inside Sales Coordinator" },
        new EmployeeData { EmployeeID = 8, Name = "Steven Davolio", Title = "Inside Sales Coordinator" },
        new EmployeeData { EmployeeID = 9, Name = "Janet Davolio", Title = "Sales Representative" },
        new EmployeeData { EmployeeID = 10, Name = "Andrew Buchanan", Title = "Sales Representative" }
    };

    public class EmployeeData
    {
        public int EmployeeID { get; set; }
        public string? Name { get; set; }
        public string? Title { get; set; }
    }
}

Binding to OData

Remote data can be bound by setting the Url property and specifying the appropriate adaptor using the Adaptor property of the SfDataManager component.

RAZOR

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor.Grids

<SfGrid TValue="Order" ID="Grid" AllowPaging="true">
    <SfDataManager Url="https://services.odata.org/Northwind/Northwind.svc/Orders"
                   Adaptor="Adaptors.ODataAdaptor">
    </SfDataManager>
    <GridColumns>
        <GridColumn Field="@nameof(Order.OrderID)" HeaderText="Order ID" IsPrimaryKey="true"
                    TextAlign="TextAlign.Right" Width="120"></GridColumn>
        <GridColumn Field="@nameof(Order.CustomerID)" HeaderText="Customer Name" Width="150"></GridColumn>
        <GridColumn Field="@nameof(Order.OrderDate)" HeaderText="Order Date" Format="d"
                    Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
        <GridColumn Field="@nameof(Order.Freight)" HeaderText="Freight" Format="C2"
                    TextAlign="TextAlign.Right" Width="120"></GridColumn>
    </GridColumns>
</SfGrid>

@code {

    public class Order
    {
        public int? OrderID { get; set; }
        public string? CustomerID { get; set; }
        public DateTime? OrderDate { get; set; }
        public double? Freight { get; set; }
    }
}

Component binding

The Syncfusion^® Blazor DataManager component can be integrated with any Syncfusion^® data-bound component to manage local or remote data operations.

This configuration demonstrates how the DataManager is bound to the SfDropDownList component to enable consistent interaction with local or remote data sources.

Local data binding

Local data can be bound to components such as SfDropDownList by assigning a collection of objects to the Json property of the SfDataManager component.

RAZOR

@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor.DropDowns

<SfDropDownList Placeholder="e.g. Australia" TItem="Country" TValue="string">
    <SfDataManager Json="@Countries"></SfDataManager>
    <DropDownListFieldSettings Value="Name"></DropDownListFieldSettings>
</SfDropDownList>

@code {
    public class Country
    {
        public string? Name { get; set; }
        public string? Code { get; set; }
    }

    public List<Country> Countries = new()
    {
        new Country { Name = "Australia", Code = "AU" },
        new Country { Name = "Bermuda", Code = "BM" },
        new Country { Name = "Canada", Code = "CA" },
        new Country { Name = "Cameroon", Code = "CM" }
    };
}

Remote data binding

Remote data can be bound by setting the Url property and specifying the appropriate adaptor using the Adaptor property of the SfDataManager component.

RAZOR

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor.DropDowns

<SfDropDownList Placeholder="Name" TItem="Contact" TValue="Contact">
    <SfDataManager Url="https://services.odata.org/V4/Northwind/Northwind.svc/Customers" Adaptor="Adaptors.ODataV4Adaptor"></SfDataManager>
    <DropDownListFieldSettings Value="CustomerID" Text="ContactName"></DropDownListFieldSettings>
</SfDropDownList>

@code {
    
    public class Contact
    {
        public string? ContactName { get; set; }
        public string? CustomerID { get; set; }
    }
}

NOTE

View the complete sample on GitHub..

See also

1. Getting Started with Syncfusion^® Blazor for client-side using .NET Core CLI
2. Getting Started with Syncfusion^® Blazor for client-side using Visual Studio
3. Getting Started with Syncfusion^® Blazor for server-side using .NET Core CLI