From a6c812eebd13d5244f8d8504148c06fc598e68a4 Mon Sep 17 00:00:00 2001 From: ponselvajeganathan <68591831+ponselvajeganathan@users.noreply.github.com> Date: Fri, 15 May 2026 16:29:11 +0530 Subject: [PATCH 1/7] 1025699: Update the correction in AWS Cognito section --- .../authentication/blazor-aws-cognito.md | 46 ++++++++++++------- .../integration/blazor-azure-functions.md | 8 ++-- 2 files changed, 33 insertions(+), 21 deletions(-) diff --git a/blazor/common/authentication/blazor-aws-cognito.md b/blazor/common/authentication/blazor-aws-cognito.md index 06021b876d..2783a2fed3 100644 --- a/blazor/common/authentication/blazor-aws-cognito.md +++ b/blazor/common/authentication/blazor-aws-cognito.md @@ -9,24 +9,24 @@ documentation: ug # Blazor Authentication with AWS Cognito using Syncfusion® Components -This guide demonstrates how to integrate [AWS Cognito authentication](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-how-to-authenticate.html) with a [Syncfusion® Blazor components](https://www.syncfusion.com/blazor-components). This enables you to implement secure authentication, control access to Syncfusion Blazor components based on user identity, and protect application data. +This guide demonstrates how to integrate [AWS Cognito authentication](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-how-to-authenticate.html) with [Syncfusion® Blazor components](https://www.syncfusion.com/blazor-components). This enables you to implement secure authentication, control access to Syncfusion Blazor components based on user identity, and protect application data. ## Prerequisites -* [.NET SDK](https://dotnet.microsoft.com/en-us/download/visual-studio-sdks) 8.0 or later (this guide uses .NET 10) +* [.NET SDK](https://dotnet.microsoft.com/en-us/download/dotnet) 8.0 or later (this guide uses .NET 10) * [Visual Studio](https://visualstudio.microsoft.com/downloads/) 2022 or later or [Visual Studio Code](https://code.visualstudio.com/) with [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension * [AWS Account with permission to manage Cognito](https://docs.aws.amazon.com/accounts/latest/reference/manage-acct-creating.html) -## Integrating Cognito with Blazor - -### Create a Blazor project +## Create a Blazor project If you already have a Blazor project, proceed to the [Install required packages](#install-required-packages) section. Otherwise, create one using Syncfusion’s Blazor getting started guides. * [Getting Started with Blazor Server App](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) * [Getting Started with Blazor Web App](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) -### Install required packages +N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). + +## Install required packages To enable authentication and use Syncfusion Blazor components, install the required packages through NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. @@ -52,7 +52,7 @@ dotnet restore {% endhighlight %} {% endtabs %} -### Add required namespaces +## Add required namespaces Open the `~/_Imports.razor` file and import the `Syncfusion.Blazor`, `Syncfusion.Blazor.Grids` namespaces. @@ -81,7 +81,7 @@ builder.Services.AddSyncfusionBlazor(); {% endhighlight %} {% endtabs %} -### Create a Cognito user pool +## Create a Cognito user pool Before building the Blazor app, set up an AWS Cognito user pool: @@ -90,7 +90,7 @@ Before building the Blazor app, set up an AWS Cognito user pool: 3. Choose application type as **Traditional Web Application** (even though this is a Blazor app, Cognito categorizes web-based apps here). 4. Set your application name. 5. Choose authentication method: **Email** or **Phone number** (or both). -6. Continue through the setup wizard and confirm your settings. Once ready, click the button to **Create User Directory**. +6. Continue through the setup wizard and confirm your settings. Once ready, click the **Create User Directory** button. 7. Go to **Amazon Cognito** > **User pools**. Note the **User pool ID** and **User pool name**. 8. Go to **App integration** > **App clients**. 9. Click **Create app client**: @@ -99,13 +99,13 @@ Before building the Blazor app, set up an AWS Cognito user pool: - **Authentication flows:** Ensure **Authorization code flow** is selected. - Under **Allowed redirect URIs**, add: `https://localhost:7000/signin-oidc` (adjust port if different; check `Properties/launchSettings.json`). - Under **Allowed sign-out URIs**, add: `https://localhost:7000/signout-callback-oidc`. -10. Verify that in **App integration** → **hosted UI**: +10. Verify that in **App integration** > **Hosted UI**: - "Hosted UI" is **enabled**. - "Callback URLs" includes your app redirect URI. You now have the values to add to `appsettings.json`. -### Update `appsettings.json` file +## Update `appsettings.json` file This stores your Cognito hosted UI domain and app client ID so the app can read them at startup. The `Authority` is the base URL of your Cognito user pool domain, and `ClientId` identifies your web app in Cognito. Keep these out of code to simplify environment changes. Replace the placeholders with your actual Cognito values. @@ -127,7 +127,7 @@ N> Replace **{REGION}** with your AWS region (e.g., `us-east-1`), and **YOUR_APP N> This sample uses Authorization Code + PKCE with a public client (no client secret). If you created a confidential client, add ClientSecret to configuration and set `options.ClientSecret` in the OIDC options. -### Configure OIDC and Cookie authentication +## Configure OIDC and Cookie authentication This wires OpenID Connect against Cognito’s hosted UI using the Authorization Code flow (PKCE) and uses cookies for the authenticated session. `SaveTokens = true` keeps ID/Access tokens available for downstream API calls. `RoleClaimType = "cognito:groups"` turns Cognito groups into ASP.NET Core roles. @@ -300,7 +300,7 @@ app.Run(); {% endhighlight %} {% endtabs %} -### Add Syncfusion® theme and script references +## Add Syncfusion® theme and script references Add the Syncfusion Blazor theme CSS and script references to your application's `App.razor` file (or `_Host.cshtml` depending on your project template). @@ -323,10 +323,21 @@ Add the Syncfusion Blazor theme CSS and script references to your application's {% endhighlight %} {% endtabs %} -### Syncfusion® Blazor DataGrid on an authenticated page +## Syncfusion® Blazor DataGrid on an authenticated page This page demonstrates how to protect a [DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component using ASP.NET Core authorization. When unauthenticated, a `Sign in` link is displayed. Once authenticated, the grid renders with sample data. +N> If the Interactivity Location is set to `Global`, the render mode is automatically configured in the `App.razor` file by default. + +{% tabs %} +{% highlight razor %} + +@* desired render mode define here *@ +@rendermode InteractiveServer + +{% endhighlight %} +{% endtabs %} + {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -388,7 +399,7 @@ This page demonstrates how to protect a [DataGrid](https://www.syncfusion.com/bl N> In this example, sample data is defined inline for demonstration purposes. In production applications, load data from a secure API endpoint that validates the user's JWT token or authentication cookie. -### Run the application +## Run the application Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. @@ -418,5 +429,6 @@ N> By default, the app runs on `https://localhost:7000` (or similar port defined ## See also -* [AWS Cognito user pools](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools.html) -* [ASP.NET Core authentication overview](https://learn.microsoft.com/en-us/aspnet/core/security/authentication/) +* [Getting started with Syncfusion Blazor DataGrid](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-server-app) +* [Getting started with AWS Cognito user pools](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools.html) +* [Overview of ASP.NET Core authentication](https://learn.microsoft.com/en-us/aspnet/core/security/authentication/) diff --git a/blazor/common/integration/blazor-azure-functions.md b/blazor/common/integration/blazor-azure-functions.md index 34cc8b7da7..345dbe6f78 100644 --- a/blazor/common/integration/blazor-azure-functions.md +++ b/blazor/common/integration/blazor-azure-functions.md @@ -197,9 +197,9 @@ public static class OrdersApi // Ignore parse errors and return unfiltered results } - var orders = allOrders.Where(o => - (!from.HasValue || o.Date.Date >= from.Value) && - (!to.HasValue || o.Date.Date <= to.Value)).ToArray(); + var orders = allOrders.Where(order => + (!from.HasValue || order.Date.Date >= from.Value) && + (!to.HasValue || order.Date.Date <= to.Value)).ToArray(); try { var logger = ctx.GetLogger("GetOrders"); @@ -348,7 +348,7 @@ Add the following Razor page to your Blazor WebAssembly project. { OrdersList = new List(); } - EventItems = OrdersList.Select(o => new EventItem { StartTime = o.Date, EndTime = o.Date.AddHours(1), Subject = $"{o.Customer} ({o.Total:C2})" }).ToList(); + EventItems = OrdersList.Select(order => new EventItem { StartTime = order.Date, EndTime = order.Date.AddHours(1), Subject = $"{order.Customer} ({order.Total:C2})" }).ToList(); StateHasChanged(); } catch (Exception ex) { Console.WriteLine($"Load failed: {ex}"); From 7c8d3eb057160d98dcd109144eb81bc9f4dc4bb7 Mon Sep 17 00:00:00 2001 From: ponselvajeganathan <68591831+ponselvajeganathan@users.noreply.github.com> Date: Fri, 15 May 2026 19:52:51 +0530 Subject: [PATCH 2/7] 1025699: modified --- .../authentication/blazor-aws-cognito.md | 12 +- .../migration/webform-to-blazor-migration.md | 168 +++++++----------- .../memory-management.md | 6 +- 3 files changed, 73 insertions(+), 113 deletions(-) diff --git a/blazor/common/authentication/blazor-aws-cognito.md b/blazor/common/authentication/blazor-aws-cognito.md index 2783a2fed3..6af3098af2 100644 --- a/blazor/common/authentication/blazor-aws-cognito.md +++ b/blazor/common/authentication/blazor-aws-cognito.md @@ -9,7 +9,7 @@ documentation: ug # Blazor Authentication with AWS Cognito using Syncfusion® Components -This guide demonstrates how to integrate [AWS Cognito authentication](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-how-to-authenticate.html) with [Syncfusion® Blazor components](https://www.syncfusion.com/blazor-components). This enables you to implement secure authentication, control access to Syncfusion Blazor components based on user identity, and protect application data. +This guide demonstrates how to integrate [AWS Cognito authentication](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-how-to-authenticate.html) with [Syncfusion® Blazor components](https://www.syncfusion.com/blazor-components). This enables you to implement secure authentication, control access to Blazor components based on user identity, and protect application data. ## Prerequisites @@ -28,7 +28,7 @@ N> Configure the appropriate [Interactive render mode](https://learn.microsoft.c ## Install required packages -To enable authentication and use Syncfusion Blazor components, install the required packages through NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +To enable authentication and use Blazor components, install the required packages through NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. **Syncfusion packages** @@ -323,7 +323,7 @@ Add the Syncfusion Blazor theme CSS and script references to your application's {% endhighlight %} {% endtabs %} -## Syncfusion® Blazor DataGrid on an authenticated page +## Blazor DataGrid on an authenticated page This page demonstrates how to protect a [DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component using ASP.NET Core authorization. When unauthenticated, a `Sign in` link is displayed. Once authenticated, the grid renders with sample data. @@ -420,15 +420,15 @@ N> By default, the app runs on `https://localhost:7000` (or similar port defined * Unauthenticated users see the **sign in** prompt. * Clicking **Sign in with AWS Cognito** redirects to the Cognito hosted UI. * After entering credentials, the user is redirected back to the app. -* The Syncfusion DataGrid appears with sample data. +* The Blazor DataGrid appears with sample data. * Clicking **Sign out** clears the session and returns to the **sign in** page. **Output:** -![Syncfusion Blazor DataGrid displaying order data after AWS Cognito authentication](./images/aws-cognito.webp) +![Blazor DataGrid displaying order data after AWS Cognito authentication](./images/aws-cognito.webp) ## See also -* [Getting started with Syncfusion Blazor DataGrid](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-server-app) +* [Getting started with Blazor DataGrid](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-server-app) * [Getting started with AWS Cognito user pools](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools.html) * [Overview of ASP.NET Core authentication](https://learn.microsoft.com/en-us/aspnet/core/security/authentication/) diff --git a/blazor/common/migration/webform-to-blazor-migration.md b/blazor/common/migration/webform-to-blazor-migration.md index 5f4f8e1b29..8744e9bf18 100644 --- a/blazor/common/migration/webform-to-blazor-migration.md +++ b/blazor/common/migration/webform-to-blazor-migration.md @@ -9,7 +9,7 @@ documentation: ug # Migrating Syncfusion® ASP.NET Web Forms Controls to Blazor Components -Migrating enterprise applications from **ASP.NET Web Forms** to **Blazor** represents a significant architectural shift from a page centric, postback based framework to a modern, component driven framework built on .NET. This guide provides a **structured, step-by-step migration approach** for [Syncfusion® ASP.NET Web Forms controls](https://help.syncfusion.com/aspnet/overview) to their corresponding [Syncfusion® Blazor components](https://blazor.syncfusion.com/documentation/introduction). +Migrating enterprise applications from [ASP.NET Web Forms](https://learn.microsoft.com/en-us/aspnet/web-forms/) to [Blazor](https://learn.microsoft.com/en-us/aspnet/core/blazor/?view=aspnetcore-10.0) represents a significant architectural shift from a page centric, postback based framework to a modern, component driven framework built on .NET. This guide provides a **structured, step-by-step migration approach** for [Syncfusion® ASP.NET Web Forms controls](https://help.syncfusion.com/aspnet/overview) to their corresponding [Blazor components](https://blazor.syncfusion.com/documentation/introduction). ## Why migrate from Web Forms to Blazor? @@ -21,23 +21,21 @@ The following table summarizes the key architectural and functional differences | Aspect | Web Forms | Blazor | | --- | --- | --- | -| **Execution model** | Server centric (page postback) | Blazor Server (SignalR) or Blazor WebAssembly | -| **Hosting & deployment** | IIS hosted only | Cloud, containers, IIS, or static hosting | -| **UI technology** | `.aspx` pages with server controls | Razor components (`.razor`, HTML + C#) | -| **UI definition** | Separate markup and code behind (`.aspx`, `.aspx.cs`) | Component based (`.razor` with optional `.razor.cs`) | -| **Lifecycle model** | `Page_Load`, postback events, `Page_Unload` | `OnInitialized{Async}`, `OnParametersSet{Async}`, `OnAfterRender{Async}`, `Dispose` | -| **State management** | ViewState (hidden fields, page level) | Component state (in-memory, persisted per connection in Blazor Server) | -| **User interaction** | Full or partial postback (page reload) | Event driven UI updates (real time in Blazor Server via SignalR) | -| **Event handling** | Server callbacks (AutoPostBack) | `EventCallback` and delegates | -| **Dependency injection** | Limited or manual | Built-in with `IServiceCollection` | -| **Navigation model** | Page based navigation (`.aspx`) | SPA style routing using `@page` | -| **Tooling support** | Visual Studio | Visual Studio and Visual Studio Code | -| **Scalability** | Limited by server resources | Cloud native and horizontally scalable | -| **Application updates** | Requires restart for assembly changes | Blazor Server: immediate. WebAssembly: versioned deployment. | - -## Development environment setup - -### Prerequisites for Blazor +| Execution model | Server centric (page postback) | Blazor Server (SignalR) or Blazor WebAssembly | +| Hosting & deployment | IIS hosted only | Cloud, containers, IIS, or static hosting | +| UI technology | `.aspx` pages with server controls | Razor components (`.razor`, HTML + C#) | +| UI definition | Separate markup and code behind (`.aspx`, `.aspx.cs`) | Component based (`.razor` with optional `.razor.cs`) | +| Lifecycle model | `Page_Load`, postback events, `Page_Unload` | `OnInitialized{Async}`, `OnParametersSet{Async}`, `OnAfterRender{Async}`, `Dispose` | +| State management | ViewState (hidden fields, page level) | Component state (in-memory, persisted per connection in Blazor Server) | +| User interaction | Full or partial postback (page reload) | Event driven UI updates (real time in Blazor Server via SignalR) | +| Event handling | Server callbacks (AutoPostBack) | `EventCallback` and delegates | +| Dependency injection | Limited or manual | Built-in with `IServiceCollection` | +| Navigation model | Page based navigation (`.aspx`) | SPA style routing using `@page` | +| Tooling support | Visual Studio | Visual Studio and Visual Studio Code | +| Scalability | Limited by server resources | Cloud native and horizontally scalable | +| Application updates | Requires restart for assembly changes | Blazor Server: immediate. WebAssembly: versioned deployment. | + +## Prerequisites for Blazor * [.NET 8 SDK or later](https://dotnet.microsoft.com/en-us/download/dotnet) * [Visual Studio](https://visualstudio.microsoft.com/downloads/) 2022 or later or [Visual Studio Code](https://code.visualstudio.com/) with [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension @@ -72,8 +70,6 @@ ASP.NET Web Forms and Blazor Web Apps follow different application architectures ## Creating a Blazor project -### Creating a Blazor Web App with Interactive Server - For Web Forms migrations, create a **Blazor Web App with Interactive Server** option, which runs server-side and preserves the familiar server hosted execution model with real time interactivity via SignalR. {% tabs %} @@ -93,14 +89,16 @@ The following shared setup applies to all Syncfusion components and covers the c ### Package installation -Use the following commands to install the required packages for each component. +In Web Forms applications, components are typically installed using a single package. +[Syncfusion.AspNet](https://www.nuget.org/packages/Syncfusion.AspNet) + +In Blazor applications, components are available as individual NuGet packages as well as a complete package [Syncfusion.Blazor](https://www.nuget.org/packages/Syncfusion.Blazor). The individual packages are organized based on component usage and namespace, allowing you to install only the components required for your application. The combined Syncfusion.Blazor package is also available and continues to be supported (not deprecated). However, for better performance and optimized application size, it is recommended to use individual component packages whenever possible. + +To explore the complete list of Blazor component packages, refer to: +[Blazor NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) -| Component | Web Forms packages | Blazor packages | -|---|---|---| -| DataGrid | [Syncfusion.AspNet](https://www.nuget.org/packages/Syncfusion.AspNet) | [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid) | -| Scheduler | [Syncfusion.AspNet](https://www.nuget.org/packages/Syncfusion.AspNet) | [Syncfusion.Blazor.Schedule](https://www.nuget.org/packages/Syncfusion.Blazor.Schedule) | -| RichTextEditor | [Syncfusion.AspNet](https://www.nuget.org/packages/Syncfusion.AspNet) | [Syncfusion.Blazor.RichTextEditor](https://www.nuget.org/packages/Syncfusion.Blazor.RichTextEditor) | -| Themes | — | [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes) | +Additionally, install the following package for styling support: +[Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes) N> Install `Syncfusion.Blazor.Themes` once at the application level. This package is required for the Blazor components used in this migration guide. @@ -143,7 +141,7 @@ In Web Forms, Syncfusion scripts and styles are manually referenced in individua In Blazor, scripts and styles are served as static web assets from the NuGet package and are referenced once at the application level in the `App.razor` file. This centralized approach ensures consistent theming and eliminates duplicate references across pages. -**Web Forms approach:** +**Web Forms approach** {% tabs %} {% highlight html tabtitle=".aspx" %} @@ -157,7 +155,7 @@ In Blazor, scripts and styles are served as static web assets from the NuGet pac {% endhighlight %} {% endtabs %} -**Blazor equivalent:** +**Blazor equivalent** {% tabs %} {% highlight html tabtitle="App.razor" %} @@ -178,37 +176,27 @@ In Blazor, scripts and styles are served as static web assets from the NuGet pac {% endhighlight %} {% endtabs %} -### Add Syncfusion® DataGrid component +### Add Blazor DataGrid component -For detailed explanation, refer to the [Web Forms DataGrid getting started guide](https://help.syncfusion.com/aspnet/grid/getting-started) and [Blazor DataGrid getting started guide](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-server-app). - -**Migration overview** +For detailed explanation, refer to the [Blazor DataGrid getting started guide](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-server-app) and [Web Forms DataGrid getting started guide](https://help.syncfusion.com/aspnet/grid/getting-started). | Aspect | Web Forms (`ej:Grid`) | Blazor (`SfGrid / SfGrid`) | | --- | --- | ---| -| **Package (NuGet)** | [Syncfusion.AspNet](https://www.nuget.org/packages/Syncfusion.AspNet) | [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid) | -| **Namespace** | ASPX: `<%@ Register Assembly="Syncfusion.EJ.Web" %>` | Razor: `@using Syncfusion.Blazor.Grids` | -| **Component declaration** | `` (ASPX) | `` / `` (Razor) | -| **Data binding** | `DataSource` property set in `Page_Load` or callbacks | `DataSource="@..."` bound during component initialization | -| **Collection type** | `DataTable`, `IEnumerable`, server managed collections | `List` / `IEnumerable`. UI updated via `StateHasChanged()` | -| **Columns** | `` | `` | -| **Editing & API** | [EditSettings](https://help.syncfusion.com/cr/aspnet/Syncfusion.JavaScript.Models.GridProperties.html#Syncfusion_JavaScript_Models_GridProperties_EditSettings) | [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html), [GridEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html), `@ref` async APIs | -| **Events & commands** | Server events (postback / AJAX callbacks) | `EventCallback` based async handlers | -| **Theming & assets** | CSS/JS referenced in `.aspx` or Master Page | CSS theme files + Syncfusion JS and `AddSyncfusionBlazor()` | -| **Paging / virtualization** | [AllowPaging](https://help.syncfusion.com/cr/aspnet/Syncfusion.JavaScript.Models.GridProperties.html#Syncfusion_JavaScript_Models_GridProperties_AllowPaging), [ScrollSettings](https://help.syncfusion.com/cr/aspnet/Syncfusion.JavaScript.Models.GridProperties.html#Syncfusion_JavaScript_Models_GridProperties_ScrollSettings) | [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging), [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html), [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualization) | -| **Filtering** | [AllowFiltering](https://help.syncfusion.com/cr/aspnet/Syncfusion.JavaScript.Models.GridProperties.html#Syncfusion_JavaScript_Models_GridProperties_AllowFiltering) | [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) | -| **Grouping** | [AllowGrouping](https://help.syncfusion.com/cr/aspnet/Syncfusion.JavaScript.Models.GridProperties.html#Syncfusion_JavaScript_Models_GridProperties_AllowGrouping) | [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping)| -| **Lifecycle & refs** | `Page_Load`, control IDs (`ID`) | `OnInitialized[Async]`, DI, `@ref` and async methods - -This mapping demonstrates that all commonly used Web Forms DataGrid features are fully supported in Blazor, while delivering measurable improvements in performance, responsiveness, and long term maintainability. - -**Component rendering** - -In the Web Forms approach, the Grid is declared in the `.aspx` markup and its data is assigned in the code behind (`Page_Load`). Every time the page is loaded or a postback occurs, the data source is recreated and bound to the Grid. - -In the Blazor approach, the Grid is defined as a Razor component, and the data is maintained as part of the component’s state. The data persists in memory during the component’s lifecycle, and the UI updates automatically when the state changes. - -**Web Forms approach:** +| Package (NuGet) | [Syncfusion.AspNet](https://www.nuget.org/packages/Syncfusion.AspNet) | [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid) | +| Namespace | ASPX: `<%@ Register Assembly="Syncfusion.EJ.Web" %>` | Razor: `@using Syncfusion.Blazor.Grids` | +| Component declaration | `` (ASPX) | `` / `` (Razor) | +| Data binding | `DataSource` property set in `Page_Load` or callbacks | `DataSource="@..."` bound during component initialization | +| Collection type | `DataTable`, `IEnumerable`, server managed collections | `List` / `IEnumerable`. UI updated via `StateHasChanged()` | +| Columns | `` | `` | +| Editing & API | [EditSettings](https://help.syncfusion.com/cr/aspnet/Syncfusion.JavaScript.Models.GridProperties.html#Syncfusion_JavaScript_Models_GridProperties_EditSettings) | [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html), [GridEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html), `@ref` async APIs | +| Events & commands | Server events (postback / AJAX callbacks) | `EventCallback` based async handlers | +| Theming & assets | CSS/JS referenced in `.aspx` or Master Page | CSS theme files + Syncfusion JS and `AddSyncfusionBlazor()` | +| Paging / virtualization | [AllowPaging](https://help.syncfusion.com/cr/aspnet/Syncfusion.JavaScript.Models.GridProperties.html#Syncfusion_JavaScript_Models_GridProperties_AllowPaging), [ScrollSettings](https://help.syncfusion.com/cr/aspnet/Syncfusion.JavaScript.Models.GridProperties.html#Syncfusion_JavaScript_Models_GridProperties_ScrollSettings) | [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging), [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html), [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualization) | +| Filtering | [AllowFiltering](https://help.syncfusion.com/cr/aspnet/Syncfusion.JavaScript.Models.GridProperties.html#Syncfusion_JavaScript_Models_GridProperties_AllowFiltering) | [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) | +| Grouping | [AllowGrouping](https://help.syncfusion.com/cr/aspnet/Syncfusion.JavaScript.Models.GridProperties.html#Syncfusion_JavaScript_Models_GridProperties_AllowGrouping) | [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping)| +| Lifecycle & refs | `Page_Load`, control IDs (`ID`) | `OnInitialized[Async]`, DI, `@ref` and async methods + +**Web Forms approach** {% tabs %} {% highlight html tabtitle="Default.aspx" %} @@ -254,7 +242,7 @@ namespace WebFormsGrid {% endhighlight %} {% endtabs %} -**Blazor equivalent:** +**Blazor equivalent** {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -290,34 +278,22 @@ namespace WebFormsGrid {% endhighlight %} {% endtabs %} -**Key differences:** - -In the Web Forms approach, the Grid is declared in the `.aspx` page and its data is assigned in the code behind during each page load or postback, resulting in the data being recreated and rebound every time. In contrast, the Blazor version defines the Grid within a Razor file and maintains the data as part of the page’s state, allowing it to persist throughout the interaction. This highlights a shift from a request based model in Web Forms to a stateful, UI driven approach in Blazor. - ### Add Syncfusion® Scheduler component For detailed explanation, refer to the [Web Forms Scheduler getting started guide](https://help.syncfusion.com/aspnet/schedule/getting-started) and [Blazor Scheduler getting started guide](https://blazor.syncfusion.com/documentation/scheduler/getting-started-with-server-app). -**Migration overview** - | Aspect | Web Forms (`ej:Schedule`) | Blazor (`SfSchedule`) | | --- | --- | --- | -| **Package (NuGet)** | [Syncfusion.AspNet](https://www.nuget.org/packages/Syncfusion.AspNet) | [Syncfusion.Blazor.Schedule](https://www.nuget.org/packages/Syncfusion.Blazor.Schedule) | -| **Namespace** | ASPX: `<%@ Register Assembly="Syncfusion.EJ.Web" %>` | Razor: `@using Syncfusion.Blazor.Schedule` | -| **Component declaration** | `` (ASPX) | `` (Razor) | -| **Data binding** | `DataSource` set during `Page_Load` or callbacks | `DataSource="@..."` via `ScheduleEventSettings` | -| **Appointment model** | [AppointmentSettings](https://help.syncfusion.com/cr/aspnet/Syncfusion.JavaScript.Models.ScheduleProperties.html#Syncfusion_JavaScript_Models_ScheduleProperties_AppointmentSettings) | [ScheduleEventSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html) | -| **Views configuration** | [CurrentView](https://help.syncfusion.com/cr/aspnet/Syncfusion.JavaScript.Models.ScheduleProperties.html#Syncfusion_JavaScript_Models_ScheduleProperties_CurrentView) property | [``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleView.html) collection | -| **Theming & assets** | CSS/JS referenced in ASPX or Master Page | CSS theme files + Syncfusion JS and `AddSyncfusionBlazor()` | -| **Lifecycle & refs** | `Page_Load`, control `ID` | `OnInitialized[Async]`, DI, `@ref` async APIs | +| Package (NuGet) | [Syncfusion.AspNet](https://www.nuget.org/packages/Syncfusion.AspNet) | [Syncfusion.Blazor.Schedule](https://www.nuget.org/packages/Syncfusion.Blazor.Schedule) | +| Namespace | ASPX: `<%@ Register Assembly="Syncfusion.EJ.Web" %>` | Razor: `@using Syncfusion.Blazor.Schedule` | +| Component declaration | `` (ASPX) | `` (Razor) | +| Data binding | `DataSource` set during `Page_Load` or callbacks | `DataSource="@..."` via `ScheduleEventSettings` | +| Appointment model | [AppointmentSettings](https://help.syncfusion.com/cr/aspnet/Syncfusion.JavaScript.Models.ScheduleProperties.html#Syncfusion_JavaScript_Models_ScheduleProperties_AppointmentSettings) | [ScheduleEventSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html) | +| Views configuration | [CurrentView](https://help.syncfusion.com/cr/aspnet/Syncfusion.JavaScript.Models.ScheduleProperties.html#Syncfusion_JavaScript_Models_ScheduleProperties_CurrentView) property | [``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleView.html) collection | +| Theming & assets | CSS/JS referenced in ASPX or Master Page | CSS theme files + Syncfusion JS and `AddSyncfusionBlazor()` | +| Lifecycle & refs | `Page_Load`, control `ID` | `OnInitialized[Async]`, DI, `@ref` async APIs | -**Component rendering** - -In the Web Forms approach, the Schedule control is defined in the `.aspx` page, and its data is assigned in the `Page_Load` method. The appointment details are created and rebound on every page load or postback. - -In the Blazor approach, the Schedule component is defined in a Razor file and bound to a data collection. This data is maintained as part of the page’s state, allowing it to persist and update during user interactions. - -**Web Forms approach:** +**Web Forms approach** {% tabs %} {% highlight html tabtitle="Default.aspx" %} @@ -362,7 +338,7 @@ namespace WebFormsScheduler {% endhighlight %} {% endtabs %} -**Blazor equivalent:** +**Blazor equivalent** {% tabs %} {% highlight razor tabtitle="Schedule.razor" %} @@ -408,33 +384,21 @@ namespace WebFormsScheduler N> The event class (`Meeting` in this example) property names match the Scheduler's default field mappings. Alternatively, you can add an explicit `Fields` configuration in `ScheduleEventSettings` to map custom property names. -**Key differences:** - -The key difference is that Web Forms follows a request based model. The control is reinitialized and data is rebound on each postback. In contrast, Blazor uses a stateful, component driven approach. Here, data persists in memory and the UI updates automatically when the state changes. - ### Add Syncfusion® Rich Text Editor component -**Migration overview** - For detailed explanation, refer to the [Web Forms Rich Text Editor getting started guide](https://help.syncfusion.com/aspnet/richtexteditor/getting-started) and [Blazor Rich Text Editor getting started guide](https://blazor.syncfusion.com/documentation/rich-text-editor/getting-started-with-server-app). | Aspect | Web Forms (`ej:RTE`) | Blazor (`SfRichTextEditor`) | | --- | --- | ---| -| **Package (NuGet)** | [Syncfusion.AspNet](https://www.nuget.org/packages/Syncfusion.AspNet) | [Syncfusion.Blazor.RichTextEditor](https://www.nuget.org/packages/Syncfusion.Blazor.RichTextEditor) | -| **Namespace** | ASPX: `<%@ Register Assembly="Syncfusion.EJ.Web" %>` | Razor: `@using Syncfusion.Blazor.RichTextEditor` | -| **Component declaration** | `` (ASPX) | `` (Razor) | -| **Content binding** | `Value` property set during page lifecycle | `Value` / `@bind-Value` bound to component state | -| **Toolbar configuration** | [ToolsList](https://help.syncfusion.com/cr/aspnet/Syncfusion.JavaScript.Models.RTEproperties.html#Syncfusion_JavaScript_Models_RTEproperties_ToolsList), [Tools](https://help.syncfusion.com/cr/aspnet/Syncfusion.JavaScript.Models.RTEproperties.html#Syncfusion_JavaScript_Models_RTEproperties_Tools) | [ToolbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html) with predefined/custom items | -| **Theming & assets** | CSS/JS referenced per page | CSS theme files + Syncfusion JS and `AddSyncfusionBlazor()` | -| **Lifecycle & refs** | `Page_Load`, control `ID` | `OnInitialized[Async]`, DI, `@ref` async APIs | +| Package (NuGet) | [Syncfusion.AspNet](https://www.nuget.org/packages/Syncfusion.AspNet) | [Syncfusion.Blazor.RichTextEditor](https://www.nuget.org/packages/Syncfusion.Blazor.RichTextEditor) | +| Namespace | ASPX: `<%@ Register Assembly="Syncfusion.EJ.Web" %>` | Razor: `@using Syncfusion.Blazor.RichTextEditor` | +| Component declaration | `` (ASPX) | `` (Razor) | +| Content binding | `Value` property set during page lifecycle | `Value` / `@bind-Value` bound to component state | +| Toolbar configuration | [ToolsList](https://help.syncfusion.com/cr/aspnet/Syncfusion.JavaScript.Models.RTEproperties.html#Syncfusion_JavaScript_Models_RTEproperties_ToolsList), [Tools](https://help.syncfusion.com/cr/aspnet/Syncfusion.JavaScript.Models.RTEproperties.html#Syncfusion_JavaScript_Models_RTEproperties_Tools) | [ToolbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html) with predefined/custom items | +| Theming & assets | CSS/JS referenced per page | CSS theme files + Syncfusion JS and `AddSyncfusionBlazor()` | +| Lifecycle & refs | `Page_Load`, control `ID` | `OnInitialized[Async]`, DI, `@ref` async APIs | -**Component rendering** - -In the Web Forms approach, the Rich Text Editor control is declared in the `.aspx` page. The content is configured directly within the markup using the `` property, which is processed during page rendering. - -In the Blazor approach, the Rich Text Editor component is defined in a Razor file. Its content is bound to a variable, allowing it to persist and update dynamically as part of the page state. - -**Web Forms approach:** +**Web Forms approach** {% tabs %} {% highlight html tabtitle="Default.aspx" %} @@ -448,7 +412,7 @@ In the Blazor approach, the Rich Text Editor component is defined in a Razor fil {% endhighlight %} {% endtabs %} -**Blazor equivalent:** +**Blazor equivalent** {% tabs %} {% highlight razor tabtitle="Editor.razor" %} @@ -465,10 +429,6 @@ In the Blazor approach, the Rich Text Editor component is defined in a Razor fil {% endhighlight %} {% endtabs %} -**Key differences:** - -The key difference is that Web Forms relies on server-side rendering. The editor content is defined statically in markup or reassigned during page processing. In contrast, Blazor uses a stateful, data binding approach. This allows dynamic content updates and persistence without requiring full page reloads. - ### Run the application Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. diff --git a/blazor/common/performance-and-scalability/memory-management.md b/blazor/common/performance-and-scalability/memory-management.md index 21399cd53e..1647679bda 100644 --- a/blazor/common/performance-and-scalability/memory-management.md +++ b/blazor/common/performance-and-scalability/memory-management.md @@ -13,7 +13,7 @@ This guide explains best practices for [managing memory](https://learn.microsoft ## Preventing memory leaks with Syncfusion® Blazor components -Syncfusion Blazor components are optimized for efficient rendering and automatically manage their internal resources. However, application level objects such as data collections, service subscriptions, timers, and JavaScript interop references should be cleared explicitly. +Blazor components are optimized for efficient rendering and automatically manage their internal resources. However, application level objects such as data collections, service subscriptions, timers, and JavaScript interop references should be cleared explicitly. In Blazor WebAssembly, releasing these references allows the browser runtime to reclaim memory. In Blazor Server, proper cleanup prevents memory retention across active user circuits, which is essential for maintaining scalability. @@ -91,7 +91,7 @@ This practice is particularly important in Blazor Server applications, where ret ### Managing event subscriptions -Components or application logic used alongside [Syncfusion® Blazor components](https://www.syncfusion.com/blazor-components) may subscribe to shared application events through services or state containers. These subscriptions should be removed during component disposal to prevent memory leaks and avoid retaining unnecessary references. +Components or application logic used alongside [Blazor components](https://www.syncfusion.com/blazor-components) may subscribe to shared application events through services or state containers. These subscriptions should be removed during component disposal to prevent memory leaks and avoid retaining unnecessary references. This example demonstrates how to manage event subscriptions in a component that listens to shared application state and ensures proper cleanup during disposal. @@ -188,7 +188,7 @@ Removing event subscriptions ensures the component is not retained in memory aft ### Virtualizing large data -Rendering large datasets increases memory allocation and DOM size. [Syncfusion® Blazor components](https://www.syncfusion.com/blazor-components) support [virtualization](https://blazor.syncfusion.com/documentation/common/performance-and-scalability/virtualization#components-supporting-virtualization) to improve performance. +Rendering large datasets increases memory allocation and DOM size. [Blazor components](https://www.syncfusion.com/blazor-components) support [virtualization](https://blazor.syncfusion.com/documentation/common/performance-and-scalability/virtualization#components-supporting-virtualization) to improve performance. In [DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid), to configure row virtualization, set [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualization) to **true** and define a fixed content height using the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Height) property. The number of rendered records is implicitly determined by the content height. From 745457f19978ebfa9af1a7b0ebfa221692f3b911 Mon Sep 17 00:00:00 2001 From: ponselvajeganathan <68591831+ponselvajeganathan@users.noreply.github.com> Date: Fri, 15 May 2026 20:25:41 +0530 Subject: [PATCH 3/7] Update webform-to-blazor-migration.md --- .../migration/webform-to-blazor-migration.md | 46 ++++++++++++------- 1 file changed, 30 insertions(+), 16 deletions(-) diff --git a/blazor/common/migration/webform-to-blazor-migration.md b/blazor/common/migration/webform-to-blazor-migration.md index 8744e9bf18..f922428d8f 100644 --- a/blazor/common/migration/webform-to-blazor-migration.md +++ b/blazor/common/migration/webform-to-blazor-migration.md @@ -13,9 +13,11 @@ Migrating enterprise applications from [ASP.NET Web Forms](https://learn.microso ## Why migrate from Web Forms to Blazor? -ASP.NET Web Forms relies heavily on **ViewState**, **server postback**, and a tightly coupled page lifecycle. While this model simplified early web development, it becomes increasingly difficult to scale, test, and maintain in modern applications. +ASP.NET Web Forms follows a **server-side page model** that uses ViewState, postback, and a tightly coupled page lifecycle to process requests and maintain UI state across interactions. -Blazor replaces postback with **event driven UI updates**, supports **reusable components**, and aligns with modern .NET development practices, making it the recommended migration path for long term investment. +Blazor uses a **component based architecture** with reusable Razor components and **event driven UI updates**, where user interactions trigger handlers that refresh the UI without full page reloads. + +This modern approach improves maintainability, scalability, and testability, making Blazor the preferred choice for migrating and modernizing Web Forms applications. The following table summarizes the key architectural and functional differences between ASP.NET Web Forms and Blazor. @@ -53,7 +55,7 @@ dotnet --info ## Project Structure Comparison -ASP.NET Web Forms and Blazor Web Apps follow different application architectures. The following table shows the functional equivalents between Web Forms artifacts and Blazor, along with their roles in a Blazor Web App. +ASP.NET Web Forms and Blazor Web Apps follow different application architectures. The following table maps common Web Forms artifacts to their Blazor equivalents and describes their roles in a Blazor Web App. | Web Forms Artifact | Blazor Web App Equivalent | Description | | --- | --- | --- | @@ -70,7 +72,7 @@ ASP.NET Web Forms and Blazor Web Apps follow different application architectures ## Creating a Blazor project -For Web Forms migrations, create a **Blazor Web App with Interactive Server** option, which runs server-side and preserves the familiar server hosted execution model with real time interactivity via SignalR. +For Web Forms migrations, create a Blazor Web App with Interactive Server option, which runs server-side and preserves the familiar server hosted execution model with real time interactivity via SignalR. {% tabs %} {% highlight bash tabtitle=".NET CLI" %} @@ -92,21 +94,19 @@ The following shared setup applies to all Syncfusion components and covers the c In Web Forms applications, components are typically installed using a single package. [Syncfusion.AspNet](https://www.nuget.org/packages/Syncfusion.AspNet) -In Blazor applications, components are available as individual NuGet packages as well as a complete package [Syncfusion.Blazor](https://www.nuget.org/packages/Syncfusion.Blazor). The individual packages are organized based on component usage and namespace, allowing you to install only the components required for your application. The combined Syncfusion.Blazor package is also available and continues to be supported (not deprecated). However, for better performance and optimized application size, it is recommended to use individual component packages whenever possible. +In Blazor applications, components are available as individual NuGet packages as well as a complete package [Syncfusion.Blazor](https://www.nuget.org/packages/Syncfusion.Blazor). The individual packages are organized based on component usage and namespace, allowing you to install only the components required for your application. The combined `Syncfusion.Blazor` package is also available and continues to be supported (not deprecated). However, for better performance and optimized application size, it is recommended to use individual component packages whenever possible. -To explore the complete list of Blazor component packages, refer to: -[Blazor NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) +To explore the complete list of Blazor component packages, refer to [Blazor NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages). -Additionally, install the following package for styling support: -[Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes) +Additionally, install the following package for styling support [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes). N> Install `Syncfusion.Blazor.Themes` once at the application level. This package is required for the Blazor components used in this migration guide. ### Service registration -ASP.NET Web Forms initializes controls implicitly as part of the page lifecycle. There is no explicit service registration model, controls are automatically available through the runtime. +ASP.NET Web Forms initializes controls automatically as part of the page lifecycle, without requiring explicit service registration. -Blazor uses dependency injection (DI) from the ground up. Syncfusion components must be registered in the service container so the framework can resolve rendering engines, localization providers, and JavaScript interop services required for each component to function correctly. +Blazor uses dependency injection (DI), where components must be registered in the service container to enable required functionality such as rendering and interaction. In the `Program.cs` file, add the Syncfusion namespace and register services. @@ -137,9 +137,9 @@ After packages are installed and services are registered, import the required Sy ### Theme and script configuration -In Web Forms, Syncfusion scripts and styles are manually referenced in individual `.aspx` pages or `master pages`. The developer explicitly controls script load order and dependency resolution. +In Web Forms, scripts and styles are added manually in individual `.aspx` pages or `Site.Master.aspx` pages. -In Blazor, scripts and styles are served as static web assets from the NuGet package and are referenced once at the application level in the `App.razor` file. This centralized approach ensures consistent theming and eliminates duplicate references across pages. +In Blazor, scripts and styles are included once at the application level (such as in `App.razor` file) and are served from static web assets. This approach ensures consistent styling and avoids duplicate references across pages. **Web Forms approach** @@ -196,6 +196,10 @@ For detailed explanation, refer to the [Blazor DataGrid getting started guide](h | Grouping | [AllowGrouping](https://help.syncfusion.com/cr/aspnet/Syncfusion.JavaScript.Models.GridProperties.html#Syncfusion_JavaScript_Models_GridProperties_AllowGrouping) | [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping)| | Lifecycle & refs | `Page_Load`, control IDs (`ID`) | `OnInitialized[Async]`, DI, `@ref` and async methods +Bind data to the DataGrid and define the required columns. In Web Forms, the DataGrid is defined using server controls, and the data source is assigned in the code-behind during the page lifecycle (for example, in the `Page_Load` method). + +In Blazor, the DataGrid component is declared in Razor markup and binds data directly to a component property using the `DataSource` property. + **Web Forms approach** {% tabs %} @@ -220,7 +224,6 @@ namespace WebFormsGrid { protected void Page_Load(object sender, EventArgs e) { - // Data is assigned on each page load/postback List Persons = new List { new Person() { FirstName = "John", LastName = "Beckett", Email = "john@syncfusion.com" }, @@ -259,7 +262,6 @@ namespace WebFormsGrid @code { - // Component state - data persists in memory during component lifetime List Persons = new() { new Person { FirstName = "John", LastName = "Beckett", Email = "john@syncfusion.com" }, @@ -293,6 +295,12 @@ For detailed explanation, refer to the [Web Forms Scheduler getting started guid | Theming & assets | CSS/JS referenced in ASPX or Master Page | CSS theme files + Syncfusion JS and `AddSyncfusionBlazor()` | | Lifecycle & refs | `Page_Load`, control `ID` | `OnInitialized[Async]`, DI, `@ref` async APIs | +Configure the Scheduler component by defining its views and binding it to the required appointment data. + +In Web Forms, the Scheduler is defined using server controls, where configuration is set through control properties and appointment data is assigned programmatically in the code-behind during page execution. + +In Blazor, the Scheduler is implemented as a Razor component, where views and event settings are defined declaratively in markup, and appointment data is bound directly using the `ScheduleEventSettings` property. + **Web Forms approach** {% tabs %} @@ -346,7 +354,7 @@ namespace WebFormsScheduler @page '/schedule' @rendermode InteractiveServer - + @@ -398,6 +406,12 @@ For detailed explanation, refer to the [Web Forms Rich Text Editor getting start | Theming & assets | CSS/JS referenced per page | CSS theme files + Syncfusion JS and `AddSyncfusionBlazor()` | | Lifecycle & refs | `Page_Load`, control `ID` | `OnInitialized[Async]`, DI, `@ref` async APIs | +Set and bind the initial content of the Rich Text Editor. + +In Web Forms, the Rich Text Editor content is defined directly within the markup using the `RTEContent` section, with content embedded as static HTML. + +In Blazor, the Rich Text Editor is implemented as a Razor component, where content is bound dynamically using the `Value` property with two-way binding. + **Web Forms approach** {% tabs %} From 5a99b8c7fe9605214c9bde9eb7142429f99f9d9d Mon Sep 17 00:00:00 2001 From: ponselvajeganathan <68591831+ponselvajeganathan@users.noreply.github.com> Date: Mon, 18 May 2026 10:13:47 +0530 Subject: [PATCH 4/7] Removed brand name --- .../authentication/blazor-aws-cognito.md | 20 +++++----- .../blazor-deploying-github-pages.md | 30 +++++++-------- .../integration/blazor-azure-functions.md | 28 +++++++------- .../migration/webform-to-blazor-migration.md | 38 ++++++++++--------- .../blazor-rendering-performance.md | 20 +++++----- .../memory-management.md | 25 ++++++------ .../authentication-and-authorization.md | 38 +++++++++---------- blazor/common/security/input-sanitization.md | 16 ++++---- 8 files changed, 109 insertions(+), 106 deletions(-) diff --git a/blazor/common/authentication/blazor-aws-cognito.md b/blazor/common/authentication/blazor-aws-cognito.md index 6af3098af2..103053a198 100644 --- a/blazor/common/authentication/blazor-aws-cognito.md +++ b/blazor/common/authentication/blazor-aws-cognito.md @@ -1,15 +1,15 @@ --- layout: post title: Blazor with AWS Cognito Authentication | Syncfusion -description: Authenticate a Blazor Server app with AWS Cognito (OIDC Hosted UI) and secure Syncfusion components. +description: Authenticate a Blazor Server app with AWS Cognito (OIDC Hosted UI) and secure Blazor components. platform: Blazor control: Common documentation: ug --- -# Blazor Authentication with AWS Cognito using Syncfusion® Components +# Blazor Authentication with AWS Cognito using Blazor Components -This guide demonstrates how to integrate [AWS Cognito authentication](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-how-to-authenticate.html) with [Syncfusion® Blazor components](https://www.syncfusion.com/blazor-components). This enables you to implement secure authentication, control access to Blazor components based on user identity, and protect application data. +This guide demonstrates how to integrate [AWS Cognito authentication](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-how-to-authenticate.html) with [Blazor components](https://www.syncfusion.com/blazor-components). This enables you to implement secure authentication, control access to Blazor components based on user identity, and protect application data. ## Prerequisites @@ -19,7 +19,7 @@ This guide demonstrates how to integrate [AWS Cognito authentication](https://do ## Create a Blazor project -If you already have a Blazor project, proceed to the [Install required packages](#install-required-packages) section. Otherwise, create one using Syncfusion’s Blazor getting started guides. +If you already have a Blazor project, proceed to the [Install required packages](#install-required-packages) section. Otherwise, create one using below Blazor getting started guides. * [Getting Started with Blazor Server App](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) * [Getting Started with Blazor Web App](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) @@ -65,9 +65,9 @@ Open the `~/_Imports.razor` file and import the `Syncfusion.Blazor`, `Syncfusion {% endhighlight %} {% endtabs %} -## Register Syncfusion® Blazor service +## Register Blazor service -Add the Syncfusion Blazor service to the `~/Program.cs` file to enable Syncfusion components in the application. +Add the Blazor service to the `~/Program.cs` file to enable Blazor components in the application. {% tabs %} {% highlight razor tabtitle="~/Program.cs" %} @@ -300,22 +300,22 @@ app.Run(); {% endhighlight %} {% endtabs %} -## Add Syncfusion® theme and script references +## Add theme and script references -Add the Syncfusion Blazor theme CSS and script references to your application's `App.razor` file (or `_Host.cshtml` depending on your project template). +Add the Blazor theme CSS and script references to your application's `App.razor` file (or `_Host.cshtml` depending on your project template). {% tabs %} {% highlight html tabtitle="App.razor" %} ... - + ... ... - + ... diff --git a/blazor/common/deployment/blazor-deploying-github-pages.md b/blazor/common/deployment/blazor-deploying-github-pages.md index 5a446e28d9..ece7ce93eb 100644 --- a/blazor/common/deployment/blazor-deploying-github-pages.md +++ b/blazor/common/deployment/blazor-deploying-github-pages.md @@ -1,15 +1,15 @@ --- layout: post -title: Deploying Blazor WASM with Syncfusion Components to GitHub Pages -description: Guide to deploying Syncfusion Blazor Components to GitHub Pages with complete configuration and examples. +title: Deploying Blazor WASM with Blazor Components to GitHub Pages +description: Guide to deploying Blazor Components to GitHub Pages with complete configuration and examples. platform: Blazor control: Common documentation: ug --- -# Deploying Syncfusion® Blazor Components to GitHub Pages +# Deploying Blazor Components to GitHub Pages -This guide demonstrates how to deploy [Syncfusion® Blazor components](https://www.syncfusion.com/blazor-components) to [GitHub Pages](https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site) in a Blazor WebAssembly application. It includes steps for publishing the application, configuring client-side routing, and hosting the application. +This guide demonstrates how to deploy [Blazor components](https://www.syncfusion.com/blazor-components) to [GitHub Pages](https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site) in a Blazor WebAssembly application. It includes steps for publishing the application, configuring client-side routing, and hosting the application. ## Prerequisites @@ -17,7 +17,7 @@ This guide demonstrates how to deploy [Syncfusion® Blazor components](https://w * [Visual Studio](https://visualstudio.microsoft.com/downloads/) 2022 or later or [Visual Studio Code](https://code.visualstudio.com/) with [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension * [GitHub account](https://github.com/) -If you haven't created your Blazor app yet, follow the [Syncfusion® Blazor getting started guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) to create a Blazor WebAssembly project. +If you haven't created your Blazor app yet, follow the [Blazor getting started guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) to create a Blazor WebAssembly project. ## Create GitHub repository @@ -31,7 +31,7 @@ Follow the below steps to create GitHub repository for deploying Blazor applicat * Select **Public** visibility. * Click **Create Repository** button to create the repository. -## Configure Syncfusion® Blazor DataGrid component +## Configure Blazor DataGrid component ### Install required packages @@ -65,9 +65,9 @@ Open the `~/_Imports.razor` file and import the `Syncfusion.Blazor`, `Syncfusion {% endhighlight %} {% endtabs %} -### Register Syncfusion® Blazor service +### Register Blazor service -Add the Syncfusion Blazor service to the `~/Program.cs` file to enable Syncfusion components in the application. +Add the Blazor service to the `~/Program.cs` file to enable Blazor components in the application. {% tabs %} {% highlight cs tabtitle="~/Program.cs" %} @@ -83,17 +83,17 @@ builder.Services.AddSyncfusionBlazor(); ### Add stylesheet and script resources -Add the Syncfusion theme CSS and required scripts to the `~/wwwroot/index.html` file. +Add the Blazor theme CSS and required scripts to the `~/wwwroot/index.html` file. {% tabs %} {% highlight html tabtitle="index.html" %} - + - + @@ -104,7 +104,7 @@ Add the Syncfusion theme CSS and required scripts to the `~/wwwroot/index.html` ### DataGrid component example -This sample demonstrates how to use the [Syncfusion® Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component to display a list of orders. It also helps confirm that the DataGrid is correctly integrated and functioning as expected for deployment scenarios. +This sample demonstrates how to use the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component to display a list of orders. It also helps confirm that the DataGrid is correctly integrated and functioning as expected for deployment scenarios. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -225,7 +225,7 @@ dotnet run **Expected behavior:** - The application loads without errors. -- Syncfusion components render with correct styles and fonts. +- Blazor components render with correct styles and fonts. - Navigation between pages works as expected. - No JavaScript console errors appear. @@ -298,7 +298,7 @@ Your application will be live at a GitHub Pages within minutes. ## See Also -* [Getting started with Syncfusion WebAssembly App](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -* [Getting started with Syncfusion DataGrid component](https://blazor.syncfusion.com/documentation/datagrid/getting-started) +* [Getting started with Blazor WebAssembly App](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +* [Getting started with Blazor DataGrid component](https://blazor.syncfusion.com/documentation/datagrid/getting-started) * [Blazor WebAssembly Hosting and Deployment](https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly/github-pages?view=aspnetcore-10.0) * [GitHub Pages Configuration](https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages) \ No newline at end of file diff --git a/blazor/common/integration/blazor-azure-functions.md b/blazor/common/integration/blazor-azure-functions.md index 345dbe6f78..375cbca450 100644 --- a/blazor/common/integration/blazor-azure-functions.md +++ b/blazor/common/integration/blazor-azure-functions.md @@ -1,15 +1,15 @@ --- layout: post -title: Syncfusion® Blazor components with Azure Functions | Syncfusion -description: Step-by-step guide to integrate Azure Functions as a serverless backend for Blazor WebAssembly with Syncfusion components (Grid, Scheduler, DatePicker). +title: Blazor components with Azure Functions | Syncfusion +description: Step-by-step guide to integrate Azure Functions as a serverless backend for Blazor WebAssembly with Blazor components (Grid, Scheduler, DatePicker). platform: Blazor control: Common documentation: ug --- -# Integrating Syncfusion® Blazor Components with Azure Functions +# Integrating Blazor Components with Azure Functions -This guide explains how to integrate [Syncfusion® Blazor components](https://www.syncfusion.com/blazor-components) with [Azure Functions](https://learn.microsoft.com/en-us/azure/azure-functions/functions-overview) as a serverless backend in a Blazor WebAssembly application. +This guide explains how to integrate [Blazor components](https://www.syncfusion.com/blazor-components) with [Azure Functions](https://learn.microsoft.com/en-us/azure/azure-functions/functions-overview) as a serverless backend in a Blazor WebAssembly application. ## Prerequisites @@ -61,7 +61,7 @@ Install required packages in your project using the NuGet Package Manager in Vis **Syncfusion® packages:** -Navigate into the Blazor WASM project (`Client`) directory and install the necessary Syncfusion packages. +Navigate into the Blazor WASM project (`Client`) directory and install the necessary Blazor packages. * [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid) * [Syncfusion.Blazor.Schedule](https://www.nuget.org/packages/Syncfusion.Blazor.Schedule) @@ -90,9 +90,9 @@ Open the `Client/_Imports.razor` file from WASM project and import the below nam {% endhighlight %} {% endtabs %} -## Register Syncfusion® Blazor service +## Register Blazor service -Add the Syncfusion Blazor service to the `Client/Program.cs` file to enable Syncfusion components in the application. +Add the Blazor service to the `Client/Program.cs` file to enable Blazor components in the application. {% tabs %} {% highlight cs tabtitle="Program.cs" %} @@ -110,20 +110,20 @@ N> The `BaseAddress` is set to `http://localhost:7071/` for local development. I ## Add stylesheet and script resources -Add the Syncfusion theme CSS and required scripts to the `wwwroot/index.html` file from WASM project. +Add the Blazor theme CSS and required scripts to the `wwwroot/index.html` file from WASM project. {% tabs %} {% highlight html %} ... - + ... ... - + ... @@ -258,7 +258,7 @@ public static class OrdersApi N> The above code example uses `Access-Control-Allow- : *` for development convenience only. In production, replace `"*"` with your Blazor client's origin (e.g., `https://myapp.azurewebsites.net`) in *Azure Portal → Function App → API → CORS*. Never use wildcards in production. -## Integrating Syncfusion® components in the application +## Integrating Blazor components in the application This example demonstrates the use of components, including a [DatePicker](https://www.syncfusion.com/blazor-components/blazor-datepicker) to select a date range, a [DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) to display orders, and a [Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) to present events. @@ -396,6 +396,6 @@ dotnet run ## See also -* [Getting started with Syncfusion DataGrid](https://blazor.syncfusion.com/documentation/datagrid/getting-started) -* [Getting started with Syncfusion Scheduler](https://blazor.syncfusion.com/documentation/scheduler/getting-started) -* [Getting started with Syncfusion DatePicker](https://blazor.syncfusion.com/documentation/datepicker/getting-started) +* [Getting started with Blazor DataGrid](https://blazor.syncfusion.com/documentation/datagrid/getting-started) +* [Getting started with Blazor Scheduler](https://blazor.syncfusion.com/documentation/scheduler/getting-started) +* [Getting started with Blazor DatePicker](https://blazor.syncfusion.com/documentation/datepicker/getting-started) diff --git a/blazor/common/migration/webform-to-blazor-migration.md b/blazor/common/migration/webform-to-blazor-migration.md index f922428d8f..9208c3be63 100644 --- a/blazor/common/migration/webform-to-blazor-migration.md +++ b/blazor/common/migration/webform-to-blazor-migration.md @@ -1,15 +1,15 @@ --- layout: post -title: Migrating Syncfusion ASP.NET Web Forms to Blazor | Syncfusion -description: Learn how to migrate Syncfusion ASP.NET Web Forms controls to Blazor components, including key concepts and a detailed migration approach. +title: Migrating ASP.NET Web Forms to Blazor | Syncfusion +description: Learn how to migrate ASP.NET Web Forms controls to Blazor components, including key concepts and a detailed migration approach. platform: Blazor control: Common documentation: ug --- -# Migrating Syncfusion® ASP.NET Web Forms Controls to Blazor Components +# Migrating ASP.NET Web Forms Controls to Blazor Components -Migrating enterprise applications from [ASP.NET Web Forms](https://learn.microsoft.com/en-us/aspnet/web-forms/) to [Blazor](https://learn.microsoft.com/en-us/aspnet/core/blazor/?view=aspnetcore-10.0) represents a significant architectural shift from a page centric, postback based framework to a modern, component driven framework built on .NET. This guide provides a **structured, step-by-step migration approach** for [Syncfusion® ASP.NET Web Forms controls](https://help.syncfusion.com/aspnet/overview) to their corresponding [Blazor components](https://blazor.syncfusion.com/documentation/introduction). +Migrating enterprise applications from [ASP.NET Web Forms](https://learn.microsoft.com/en-us/aspnet/web-forms/) to [Blazor](https://learn.microsoft.com/en-us/aspnet/core/blazor/?view=aspnetcore-10.0) represents a significant architectural shift from a page centric, postback based framework to a modern, component driven framework built on .NET. This guide provides a **structured, step-by-step migration approach** for [ASP.NET Web Forms controls](https://help.syncfusion.com/aspnet/overview) to their corresponding [Blazor components](https://blazor.syncfusion.com/documentation/introduction). ## Why migrate from Web Forms to Blazor? @@ -85,9 +85,9 @@ cd MyBlazorApp > N> The `--interactivity Server` flag configures SignalR based interactivity, providing immediate UI updates similar to Web Forms postback behavior, but over a persistent connection instead of full page reloads. -## Migrating Syncfusion® Components from Web Forms to Blazor +## Migrating Components from Web Forms to Blazor -The following shared setup applies to all Syncfusion components and covers the common configuration required before proceeding to the [component specific migration steps](#add-syncfusion-datagrid-component). +The following shared setup applies to all three components and covers the common configuration required before proceeding to the [component specific migration steps](#add-syncfusion-datagrid-component). ### Package installation @@ -108,7 +108,7 @@ ASP.NET Web Forms initializes controls automatically as part of the page lifecyc Blazor uses dependency injection (DI), where components must be registered in the service container to enable required functionality such as rendering and interaction. -In the `Program.cs` file, add the Syncfusion namespace and register services. +In the `Program.cs` file, add the namespace and register services. {% tabs %} {% highlight c# tabtitle="Program.cs" %} @@ -118,7 +118,7 @@ using Syncfusion.Blazor; var builder = WebApplication.CreateBuilder(args); builder.Services.AddRazorComponents() .AddInteractiveServerComponents(); -builder.Services.AddSyncfusionBlazor(); // Register Syncfusion services +builder.Services.AddSyncfusionBlazor(); // Register Blazor services var app = builder.Build(); ... @@ -127,7 +127,7 @@ var app = builder.Build(); ### Add import namespaces -After packages are installed and services are registered, import the required Syncfusion namespaces in the `/_Imports.razor` file. +After packages are installed and services are registered, import the required namespaces in the `/_Imports.razor` file. | Component | Required namespaces | |---|---| @@ -162,13 +162,13 @@ In Blazor, scripts and styles are included once at the application level (such a ... - + ... ... - + ... @@ -190,7 +190,7 @@ For detailed explanation, refer to the [Blazor DataGrid getting started guide](h | Columns | `` | `` | | Editing & API | [EditSettings](https://help.syncfusion.com/cr/aspnet/Syncfusion.JavaScript.Models.GridProperties.html#Syncfusion_JavaScript_Models_GridProperties_EditSettings) | [GridEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html), [GridEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html), `@ref` async APIs | | Events & commands | Server events (postback / AJAX callbacks) | `EventCallback` based async handlers | -| Theming & assets | CSS/JS referenced in `.aspx` or Master Page | CSS theme files + Syncfusion JS and `AddSyncfusionBlazor()` | +| Theming & assets | CSS/JS referenced in `.aspx` or Master Page | CSS theme files + JS and `AddSyncfusionBlazor()` | | Paging / virtualization | [AllowPaging](https://help.syncfusion.com/cr/aspnet/Syncfusion.JavaScript.Models.GridProperties.html#Syncfusion_JavaScript_Models_GridProperties_AllowPaging), [ScrollSettings](https://help.syncfusion.com/cr/aspnet/Syncfusion.JavaScript.Models.GridProperties.html#Syncfusion_JavaScript_Models_GridProperties_ScrollSettings) | [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging), [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html), [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualization) | | Filtering | [AllowFiltering](https://help.syncfusion.com/cr/aspnet/Syncfusion.JavaScript.Models.GridProperties.html#Syncfusion_JavaScript_Models_GridProperties_AllowFiltering) | [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) | | Grouping | [AllowGrouping](https://help.syncfusion.com/cr/aspnet/Syncfusion.JavaScript.Models.GridProperties.html#Syncfusion_JavaScript_Models_GridProperties_AllowGrouping) | [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping)| @@ -280,7 +280,7 @@ namespace WebFormsGrid {% endhighlight %} {% endtabs %} -### Add Syncfusion® Scheduler component +### Add Blazor Scheduler component For detailed explanation, refer to the [Web Forms Scheduler getting started guide](https://help.syncfusion.com/aspnet/schedule/getting-started) and [Blazor Scheduler getting started guide](https://blazor.syncfusion.com/documentation/scheduler/getting-started-with-server-app). @@ -292,7 +292,7 @@ For detailed explanation, refer to the [Web Forms Scheduler getting started guid | Data binding | `DataSource` set during `Page_Load` or callbacks | `DataSource="@..."` via `ScheduleEventSettings` | | Appointment model | [AppointmentSettings](https://help.syncfusion.com/cr/aspnet/Syncfusion.JavaScript.Models.ScheduleProperties.html#Syncfusion_JavaScript_Models_ScheduleProperties_AppointmentSettings) | [ScheduleEventSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleEventSettings-1.html) | | Views configuration | [CurrentView](https://help.syncfusion.com/cr/aspnet/Syncfusion.JavaScript.Models.ScheduleProperties.html#Syncfusion_JavaScript_Models_ScheduleProperties_CurrentView) property | [``](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleView.html) collection | -| Theming & assets | CSS/JS referenced in ASPX or Master Page | CSS theme files + Syncfusion JS and `AddSyncfusionBlazor()` | +| Theming & assets | CSS/JS referenced in ASPX or Master Page | CSS theme files + JS and `AddSyncfusionBlazor()` | | Lifecycle & refs | `Page_Load`, control `ID` | `OnInitialized[Async]`, DI, `@ref` async APIs | Configure the Scheduler component by defining its views and binding it to the required appointment data. @@ -392,7 +392,7 @@ namespace WebFormsScheduler N> The event class (`Meeting` in this example) property names match the Scheduler's default field mappings. Alternatively, you can add an explicit `Fields` configuration in `ScheduleEventSettings` to map custom property names. -### Add Syncfusion® Rich Text Editor component +### Add Blazor Rich Text Editor component For detailed explanation, refer to the [Web Forms Rich Text Editor getting started guide](https://help.syncfusion.com/aspnet/richtexteditor/getting-started) and [Blazor Rich Text Editor getting started guide](https://blazor.syncfusion.com/documentation/rich-text-editor/getting-started-with-server-app). @@ -403,7 +403,9 @@ For detailed explanation, refer to the [Web Forms Rich Text Editor getting start | Component declaration | `` (ASPX) | `` (Razor) | | Content binding | `Value` property set during page lifecycle | `Value` / `@bind-Value` bound to component state | | Toolbar configuration | [ToolsList](https://help.syncfusion.com/cr/aspnet/Syncfusion.JavaScript.Models.RTEproperties.html#Syncfusion_JavaScript_Models_RTEproperties_ToolsList), [Tools](https://help.syncfusion.com/cr/aspnet/Syncfusion.JavaScript.Models.RTEproperties.html#Syncfusion_JavaScript_Models_RTEproperties_Tools) | [ToolbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html) with predefined/custom items | -| Theming & assets | CSS/JS referenced per page | CSS theme files + Syncfusion JS and `AddSyncfusionBlazor()` | +| Theming & assets | CSS/JS referenced per page | CSS theme files \ + +JS and `AddSyncfusionBlazor()` | | Lifecycle & refs | `Page_Load`, control `ID` | `OnInitialized[Async]`, DI, `@ref` async APIs | Set and bind the initial content of the Rich Text Editor. @@ -419,7 +421,7 @@ In Blazor, the Rich Text Editor is implemented as a Razor component, where conte -

Welcome to Syncfusion Rich Text Editor

+

Welcome to Blazor Rich Text Editor

 @@ -437,7 +439,7 @@ In Blazor, the Rich Text Editor is implemented as a Razor component, where conte @code { - private string Content = "

Welcome to Syncfusion Rich Text Editor

"; + private string Content = "

Welcome to Blazor Rich Text Editor

"; } {% endhighlight %} diff --git a/blazor/common/performance-and-scalability/blazor-rendering-performance.md b/blazor/common/performance-and-scalability/blazor-rendering-performance.md index 20f4fc0025..88b4fc1b70 100644 --- a/blazor/common/performance-and-scalability/blazor-rendering-performance.md +++ b/blazor/common/performance-and-scalability/blazor-rendering-performance.md @@ -1,19 +1,19 @@ --- layout: post title: Blazor Rendering Performance - Syncfusion -description: Learn how Blazor's render tree, diffing, and update batching work, and apply techniques to optimize rendering with Syncfusion components effectively. +description: Learn how Blazor's render tree, diffing, and update batching work, and apply techniques to optimize rendering with Blazor components effectively. platform: Blazor control: Common documentation: ug --- -# Syncfusion® Blazor Rendering and Performance Optimization +# Blazor Rendering and Performance Optimization -This guide explains how rendering works in Blazor and provides practical techniques to optimize rendering performance when using [Syncfusion® Blazor components](https://www.syncfusion.com/blazor-components). It focuses on reducing unnecessary re-renders, minimizing diffing overhead, and improving UI update efficiency. +This guide explains how rendering works in Blazor and provides practical techniques to optimize rendering performance when using [Blazor components](https://www.syncfusion.com/blazor-components). It focuses on reducing unnecessary re-renders, minimizing diffing overhead, and improving UI update efficiency. -## Syncfusion® Blazor DataGrid example with stable data binding +## Blazor DataGrid example with stable data binding -The following example demonstrates a [Syncfusion® Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) with a stable data source. The data collection is created once and reused, which helps prevent unnecessary internal rendering when the component updates for unrelated reasons. +The following example demonstrates a [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) with a stable data source. The data collection is created once and reused, which helps prevent unnecessary internal rendering when the component updates for unrelated reasons. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -242,9 +242,9 @@ protected override void OnInitialized() This keeps the render path simple and avoids repeated computation during every UI update. -## Syncfusion® Blazor Chart example with render-efficient updates +## Blazor Chart example with render-efficient updates -[Syncfusion® Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) are frequently used in dashboards where filters or live data can trigger repeated updates. Keeping the chart data stable and updating it only when required reduces redraw cost and avoids unnecessary layout recalculations. +[Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) are frequently used in dashboards where filters or live data can trigger repeated updates. Keeping the chart data stable and updating it only when required reduces redraw cost and avoids unnecessary layout recalculations. {% tabs %} {% highlight razor tabtitle="Charts.razor" %} @@ -345,7 +345,7 @@ This difference is not about code style and directly impacts rendering efficienc * [Razor component rendering](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/rendering?view=aspnetcore-10.0) * [Razor component lifecycle](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/lifecycle?view=aspnetcore-10.0) * [Blazor rendering performance best practices](https://learn.microsoft.com/en-us/aspnet/core/blazor/performance/rendering?view=aspnetcore-10.0) -* [Getting started with Syncfusion Blazor DataGrid](https://blazor.syncfusion.com/documentation/datagrid/getting-started) -* [Getting started with Syncfusion Blazor Chart](https://blazor.syncfusion.com/documentation/chart/getting-started) -* [Getting started with Syncfusion Blazor DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started) +* [Getting started with Blazor DataGrid](https://blazor.syncfusion.com/documentation/datagrid/getting-started) +* [Getting started with Blazor Chart](https://blazor.syncfusion.com/documentation/chart/getting-started) +* [Getting started with Blazor DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started) diff --git a/blazor/common/performance-and-scalability/memory-management.md b/blazor/common/performance-and-scalability/memory-management.md index 1647679bda..81f0e7dd43 100644 --- a/blazor/common/performance-and-scalability/memory-management.md +++ b/blazor/common/performance-and-scalability/memory-management.md @@ -1,25 +1,25 @@ --- layout: post -title: Memory management in Syncfusion Blazor Components -description: Provides best practices for managing memory efficiently in Syncfusion Blazor components to improve performance, reduce leaks, and ensure optimal resource usage. +title: Memory management in Blazor Components | Syncfusion +description: Provides best practices for managing memory efficiently in Blazor components to improve performance, reduce leaks, and ensure optimal resource usage. platform: Blazor control: Common documentation: ug --- -# Memory Management with Syncfusion® Blazor Components +# Memory Management with Blazor Components -This guide explains best practices for [managing memory](https://learn.microsoft.com/en-us/aspnet/core/performance/memory) in Blazor applications using [Syncfusion® Blazor components](https://www.syncfusion.com/blazor-components). It covers efficient component lifecycle management, proper resource cleanup, and techniques such as `IDisposable` to prevent memory leaks and optimize application performance. +This guide explains best practices for [managing memory](https://learn.microsoft.com/en-us/aspnet/core/performance/memory) in Blazor applications using [Blazor components](https://www.syncfusion.com/blazor-components). It covers efficient component lifecycle management, proper resource cleanup, and techniques such as `IDisposable` to prevent memory leaks and optimize application performance. -## Preventing memory leaks with Syncfusion® Blazor components +## Preventing memory leaks with Blazor components Blazor components are optimized for efficient rendering and automatically manage their internal resources. However, application level objects such as data collections, service subscriptions, timers, and JavaScript interop references should be cleared explicitly. In Blazor WebAssembly, releasing these references allows the browser runtime to reclaim memory. In Blazor Server, proper cleanup prevents memory retention across active user circuits, which is essential for maintaining scalability. -If you haven't created a Blazor application yet, follow the [Syncfusion® Blazor getting started guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) to create a project. +If you haven't created a Blazor application yet, follow the [Blazor getting started guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) to create a project. -### Disposing data bound Syncfusion® Blazor components +### Disposing data bound Blazor components Data bound components such as [DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) and [ListView](https://www.syncfusion.com/blazor-components/blazor-listview) can hold large data collections in memory. These references should be cleared when the component is removed from the render tree. @@ -192,7 +192,7 @@ Rendering large datasets increases memory allocation and DOM size. [Blazor compo In [DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid), to configure row virtualization, set [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableVirtualization) to **true** and define a fixed content height using the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Height) property. The number of rendered records is implicitly determined by the content height. -The following example demonstrates how to use built‑in virtualization in the Syncfusion DataGrid component to efficiently render large data collections. +The following example demonstrates how to use built‑in virtualization in the DataGrid component to efficiently render large data collections. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -319,7 +319,7 @@ When the collection changes, Blazor can correctly match existing components inst In Blazor Server, each user maintains their own `ServiceProvider` instance per circuit. A scoped service is created once per user circuit, ensuring user specific state is isolated. `Singleton` services are shared across all users and may lead to unintended data sharing or memory issues. -This behavior is important when working with [Syncfusion® Blazor components](https://www.syncfusion.com/blazor-components) that depend on application state, data services, or user specific data. Choosing the correct service lifetime helps prevent memory retention issues and ensures proper component behavior. +This behavior is important when working with [Blazor components](https://www.syncfusion.com/blazor-components) that depend on application state, data services, or user specific data. Choosing the correct service lifetime helps prevent memory retention issues and ensures proper component behavior. {% tabs %} {% highlight csharp tabtitle="Program.cs" %} @@ -335,7 +335,8 @@ This guidance applies to the Blazor Server hosting model and to Blazor Web App p ## See also -* [Blazor Component Lifecycle](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/lifecycle?view=aspnetcore-10.0) +* [Blazor DataGrid Virtualization](https://blazor.syncfusion.com/documentation/datagrid/virtual-scrolling) +* [Blazor Performance Guidelines](https://blazor.syncfusion.com/documentation/common/best-practices) +* [Blazor Component Lifecycle documentation](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/lifecycle?view=aspnetcore-10.0) * [Blazor Dependency Injection](https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/dependency-injection?view=aspnetcore-10.0) -* [Syncfusion® DataGrid Virtualization](https://blazor.syncfusion.com/documentation/datagrid/virtual-scrolling) -* [Syncfusion® Blazor Performance Guidelines](https://blazor.syncfusion.com/documentation/common/best-practices) + diff --git a/blazor/common/security/authentication-and-authorization.md b/blazor/common/security/authentication-and-authorization.md index ea460c8c71..0717a07126 100644 --- a/blazor/common/security/authentication-and-authorization.md +++ b/blazor/common/security/authentication-and-authorization.md @@ -1,14 +1,14 @@ --- -title: Authentication and Authorization in Syncfusion Blazor Components -description: Learn how to secure Syncfusion Blazor components with authentication and authorization in Blazor Server and WebAssembly applications. +title: Authentication and Authorization in Blazor Components |Syncfusion +description: Learn how to secure Blazor components with authentication and authorization in Blazor Server and WebAssembly applications. platform: blazor component: common documentation: ug --- -# Authentication and Authorization for Syncfusion® Blazor Components +# Authentication and Authorization for Blazor Components -This guide explains how to secure [Syncfusion® Blazor components](https://www.syncfusion.com/blazor-components) using [authentication and authorization](https://learn.microsoft.com/en-us/aspnet/core/blazor/security). This enables you to control what users can see and interact with through UI-level security, while also protecting backend data access through data-level security. +This guide explains how to secure [Blazor components](https://www.syncfusion.com/blazor-components) using [authentication and authorization](https://learn.microsoft.com/en-us/aspnet/core/blazor/security). This enables you to control what users can see and interact with through UI-level security, while also protecting backend data access through data-level security. ## Prerequisites @@ -16,7 +16,7 @@ This guide explains how to secure [Syncfusion® Blazor components](https://www.s * [Visual Studio](https://visualstudio.microsoft.com/downloads/) 2022 or later or [Visual Studio Code](https://code.visualstudio.com/) with [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. * [AuthorizeView](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.authorization.authorizeview), [AuthenticationStateProvider](https://learn.microsoft.com/en-us/aspnet/core/blazor/security/authentication-state), and token-based data requests require the Blazor authentication pipeline to be configured. -If you already have a Blazor project, proceed to the package installation section. Otherwise, create one using Syncfusion’s Blazor getting started guides. +If you already have a Blazor project, proceed to the package installation section. Otherwise, create one using below Blazor getting started guides. * [Getting Started with Blazor WebAssembly App](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) * [Getting Started with Blazor Server App](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) @@ -39,7 +39,7 @@ Install required packages in your project using the NuGet Package Manager in Vis ## Add required namespaces -Open the `~/_Imports.razor` file and add the required Syncfusion namespaces. +Open the `~/_Imports.razor` file and add the required Blazor namespaces. {% tabs %} {% highlight c# tabtitle="~/_Imports.razor" %} @@ -56,20 +56,20 @@ Open the `~/_Imports.razor` file and add the required Syncfusion namespaces. ## Add stylesheet and script resources -Add the Syncfusion theme CSS and required scripts to the `/App.razor` file. +Add the Blazor theme CSS and required scripts to the `/App.razor` file. {% tabs %} {% highlight html tabtitle="App.razor" %} ... - + ... ... - + ... @@ -102,7 +102,7 @@ Inject the authentication provider in components that need to access the authent {% endhighlight %} {% endtabs %} -**Step 3. Register authentication and Syncfusion® services in `Program.cs`** +**Step 3. Register authentication and Blazor services in `Program.cs`** {% tabs %} {% highlight c# tabtitle="Program.cs" %} @@ -116,7 +116,7 @@ builder.Services.AddAuthentication(IdentityConstants.ApplicationScheme) builder.Services.AddAuthorization(); // This class is generated by the Blazor Server Identity template. builder.Services.AddScoped>(); -// Add Syncfusion Blazor services +// Add Blazor services builder.Services.AddSyncfusionBlazor(); ... @@ -125,9 +125,9 @@ builder.Services.AddSyncfusionBlazor(); N> This example uses Blazor Server with ASP.NET Core Identity. For WebAssembly apps or custom authentication, implement a custom AuthenticationStateProvider. -## Authentication with Syncfusion® components +## Authentication with Blazor components -This section explains how to implement **UI-level** and **data-level authentication** in [Syncfusion® Blazor components](https://www.syncfusion.com/blazor-components) such as [DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid), [Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler), and [TreeView](https://www.syncfusion.com/blazor-components/blazor-treeview). UI-level authentication is demonstrated across all components using `` to control the visibility of UI elements based on the user’s authentication state. +This section explains how to implement **UI-level** and **data-level authentication** in [Blazor components](https://www.syncfusion.com/blazor-components) such as [DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid), [Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler), and [TreeView](https://www.syncfusion.com/blazor-components/blazor-treeview). UI-level authentication is demonstrated across all components using `` to control the visibility of UI elements based on the user’s authentication state. For data-level security, [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) is configured to include **Bearer tokens** in API requests, enabling secure access to protected backend endpoints for components such as **DataGrid** and **Scheduler**. In this example, the **TreeView** component uses local data and focuses only on UI-level authentication. @@ -337,16 +337,16 @@ dotnet run {% endtabs %} **Expected behavior** -* Syncfusion components should render **only for authorized users**. -* If the user is not authenticated, the application should display **Register or Log in** options instead of the Syncfusion components. -* After a successful login, the user should be able to view the Syncfusion components such as **DataGrid, Scheduler, and TreeView** while navigating across different pages. +* Blazor components should render **only for authorized users**. +* If the user is not authenticated, the application should display **Register or Log in** options instead of the Blazor components. +* After a successful login, the user should be able to view the Blazor components such as **DataGrid, Scheduler, and TreeView** while navigating across different pages. **Output:** ![Blazor Authentication And Authorization](./authentication-authorization.webp) ## See also -* [Getting started with Syncfusion DataGrid](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-server-app) -* [Getting started with Syncfusion Scheduler](https://blazor.syncfusion.com/documentation/scheduler/getting-started-with-server-app) -* [Getting started with Syncfusion TreeView](https://blazor.syncfusion.com/documentation/treeview/getting-started-with-server-app) +* [Getting started with Blazor DataGrid](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-server-app) +* [Getting started with Blazor Scheduler](https://blazor.syncfusion.com/documentation/scheduler/getting-started-with-server-app) +* [Getting started with Blazor TreeView](https://blazor.syncfusion.com/documentation/treeview/getting-started-with-server-app) * [Blazor Server app with authentication](https://learn.microsoft.com/en-us/aspnet/core/blazor/security/?view=aspnetcore-10.0&tabs=visual-studio) diff --git a/blazor/common/security/input-sanitization.md b/blazor/common/security/input-sanitization.md index 444cf7aad9..23d2cc61de 100644 --- a/blazor/common/security/input-sanitization.md +++ b/blazor/common/security/input-sanitization.md @@ -1,15 +1,15 @@ --- layout: post -title: Input Sanitization with Syncfusion Blazor Components -description: Discover effective techniques for securely sanitizing user input in Syncfusion Blazor components to protect your application from unsafe data. +title: Input Sanitization with Blazor Components | Syncfusion +description: Discover effective techniques for securely sanitizing user input in Blazor components to protect your application from unsafe data. platform: Blazor control: Common documentation: ug --- -# Input Sanitization in Syncfusion® Blazor Components +# Input Sanitization in Blazor Components -This documentation explains how to protect [Syncfusion® Blazor components](https://www.syncfusion.com/blazor-components) from unsafe or malicious user input using **input sanitization** techniques. It highlights built‑in sanitization support in components such as the [Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-rich-text-editor) and [Block Editor](https://www.syncfusion.com/blazor-components/blazor-block-editor), along with best practices like HTML encoding to ensure safe rendering of user content. +This documentation explains how to protect [Blazor components](https://www.syncfusion.com/blazor-components) from unsafe or malicious user input using **input sanitization** techniques. It highlights built‑in sanitization support in components such as the [Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-rich-text-editor) and [Block Editor](https://www.syncfusion.com/blazor-components/blazor-block-editor), along with best practices like HTML encoding to ensure safe rendering of user content. ## What is input sanitization? @@ -32,12 +32,12 @@ Sanitizing user input ensures that only safe and expected values are stored or d | Attacks | Description | Prevention | |--------|-------------|------------| -| Cross-Site Scripting (XSS) | Malicious scripts are injected and execute in the user’s browser, which may lead to unauthorized actions or data exposure.
**Example:** `` | HTML sanitization is enabled by default in Syncfusion components such as the RTE. For plain text inputs, use HTML encoding. **
Example:** `HtmlEncoder.Default.Encode()`.| -| HTML Injection | Unwanted markup can change layout or behavior by introducing unexpected HTML elements, styles, or attributes, which affect how content is rendered in the UI.
**Example:** Injecting unexpected `
`, `