From 98cb223d9d5ade11c9e46e8e612e4fe8a85d9be2 Mon Sep 17 00:00:00 2001 From: Backiaraj Date: Fri, 3 Oct 2025 19:01:32 +0530 Subject: [PATCH 1/7] Updated the Blazor common UG documentation --- blazor/common/best-practices.md | 41 ++++++++++++----------- blazor/common/cdn-fallback.md | 18 +++++----- blazor/common/content-security-policy.md | 26 +++++++-------- blazor/common/deployment.md | 34 +++++++++---------- blazor/common/showcase-samples.md | 42 ++++++++++++------------ 5 files changed, 81 insertions(+), 80 deletions(-) diff --git a/blazor/common/best-practices.md b/blazor/common/best-practices.md index 6340ff50a4..2e863b0695 100644 --- a/blazor/common/best-practices.md +++ b/blazor/common/best-practices.md @@ -1,37 +1,38 @@ --- layout: post -title: Optimizing Syncfusion Blazor App Performance | Best Practices -description: Check out and learn here all about optimal strategies for enhancing Syncfusion Blazor App performance. +title: Best practices to optimize Syncfusion Blazor App performance +description: Learn practical ways to optimize Syncfusion Blazor Apps, including smaller packages, minimal scripts, optimized themes, lazy loading, and PreventRender. platform: Blazor -component: Common +control: Common documentation: ug --- -# Best Practices for Improving Syncfusion® Blazor App Performance +# Best practices for optimizing Syncfusion® Blazor App performance -Enhancing the rendering performance of Syncfusion® Blazor apps involves implementing the following best practices. +Improve rendering performance by applying the following best practices. -## Use Individual NuGet Packages +## Use individual NuGet packages -Opt for individual Syncfusion® NuGet packages for specific components. This approach allows you to selectively include only the necessary components, minimizing overhead. For detailed information, refer to [Benefits of Using Individual NuGet Packages](https://blazor.syncfusion.com/documentation/nuget-packages#benefits-of-using-individual-nuget-packages). +Use individual Syncfusion® NuGet packages for specific components. This lets the app include only what it needs and reduces download size. Learn more in [Benefits of using individual NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages#benefits-of-using-individual-nuget-packages). -## Reduce Script Reference Size +## Reduce script reference size -The overall `syncfusion-blazor.min.js` script reference may be redundant. Instead, consider employing the following solutions to include only the required scripts for rendering Syncfusion® components. -* [Individual reference](https://blazor.syncfusion.com/documentation/common/adding-script-references#individual-control-script-reference) -* [Blazor custom resource generator](https://blazor.syncfusion.com/documentation/common/custom-resource-generator) +The overall `syncfusion-blazor.min.js` may include scripts the app doesn't use. Prefer referencing only the required scripts using one of the following options: -## Use Optimized CSS Themes +- [Individual reference](https://blazor.syncfusion.com/documentation/common/adding-script-references#individual-control-script-reference) +- [Blazor Custom Resource Generator (CRG)](https://blazor.syncfusion.com/documentation/common/custom-resource-generator) -To reduce CSS payload and improve rendering speed, use optimized CSS themes provided by Syncfusion. These themes are tailored to include only the styles required for the components you use. Learn more at Optimized CSS Themes -https://blazor.syncfusion.com/documentation/appearance/themes#optimized-css-themes -## Lazy Loading in Blazor WebAssembly App +## Use optimized CSS themes -If you're using a Blazor WebAssembly app, consider implementing lazy loading to reduce the initial loading time. For guidance, refer to Microsoft's documentation on [WebAssembly lazy load assemblies](https://learn.microsoft.com/en-us/aspnet/core/blazor/webassembly-lazy-load-assemblies?view=aspnetcore-7.0) and Syncfusion's blog on [lazy loading Syncfusion® Blazor assemblies](https://www.syncfusion.com/blogs/post/lazy-loading-syncfusion-blazor-assemblies-in-a-blazor-webassembly-application.aspx). +To reduce CSS payload and improve rendering speed, use optimized CSS themes that include only the styles required by the components in use. Learn more in [Optimized CSS themes](https://blazor.syncfusion.com/documentation/appearance/themes#optimized-css-themes). -## Utilize PreventRender Option in Blazor WebAssembly App +## Lazy loading in Blazor WebAssembly App -In a Blazor WebAssembly app, leverage the **PreventRender** option to avoid unnecessary re-rendering of Syncfusion® Blazor components. This ensures optimal performance. For reference, we have provided links for the DataGrid and PivotTable: +If using a Blazor WebAssembly App, implement lazy loading to reduce initial load time. See [WebAssembly lazy load assemblies](https://learn.microsoft.com/en-us/aspnet/core/blazor/webassembly-lazy-load-assemblies) and the Syncfusion blog on [lazy loading Syncfusion® Blazor assemblies](https://www.syncfusion.com/blogs/post/lazy-loading-syncfusion-blazor-assemblies-in-a-blazor-webassembly-application.aspx). -* DataGrid: [Link to WebAssembly performance documentation](https://blazor.syncfusion.com/documentation/datagrid/webassembly-performance) -* PivotTable: [Link to WebAssembly performance documentation](https://blazor.syncfusion.com/documentation/pivot-table/webassembly-performance) +## Use PreventRender in Blazor WebAssembly App + +In a Blazor WebAssembly App, use the `PreventRender` option to avoid unnecessary re-rendering of Syncfusion® Blazor components and improve performance. For details, see: + +- DataGrid: [WebAssembly performance](https://blazor.syncfusion.com/documentation/datagrid/webassembly-performance) +- Pivot Table: [WebAssembly performance](https://blazor.syncfusion.com/documentation/pivot-table/webassembly-performance) diff --git a/blazor/common/cdn-fallback.md b/blazor/common/cdn-fallback.md index e4699be8e8..104072f298 100644 --- a/blazor/common/cdn-fallback.md +++ b/blazor/common/cdn-fallback.md @@ -1,23 +1,23 @@ --- layout: post title: CDN fallback in Blazor - Syncfusion -description: Learn here about content delivery network (CDN) fallback handling in Blazor Server and WebAssembly (WASM) apps. +description: Learn how to handle content delivery network (CDN) fallbacks in Blazor Web App, Blazor Server, and Blazor WebAssembly (WASM) apps using Static Web Assets. platform: Blazor -component: Common +control: Common documentation: ug --- # CDN fallback in Blazor application -This section provides information about how to refer fallback [scripts](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets) and [style sheet](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets) from **Static Web Assets** when CDN is not available in Blazor application. +This section explains how to reference fallback [scripts](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets) and [stylesheets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets) from Static Web Assets when the CDN is unavailable in a Blazor application. ## Blazor Web App -For **.NET 8 and .NET 9** Blazor Web Apps using any render mode (Server, WebAssembly, or Auto), refer the script and style sheet fallback from [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets) inside the Script tag like below. +For **.NET 8 and .NET 9** Blazor Web Apps using any render mode (Server, WebAssembly, or Auto), reference script and stylesheet fallbacks from [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets) as shown below. ### Script fallback -You can check the Syncfusion® Blazor object for script fallback whether scripts are loaded or not. If it's not loaded, create a script tag and refer scripts externally inside the `` of **~/Components/App.razor** file in server side app as in the below code. +Check the Syncfusion® Blazor object to determine whether scripts are loaded. If they are not loaded, create a script tag and reference the scripts from Static Web Assets inside the `` of the **~/Components/App.razor** file in the Server App, as shown below. {% tabs %} {% highlight cshtml tabtitle="~/App.razor" %} @@ -39,7 +39,7 @@ You can check the Syncfusion® Blazor object ### Stylesheet fallback -You can refer the theme stylesheet inside the `` of **~/Components/App.razor** file in server side app like below. +Reference the theme stylesheet inside the `` of the **~/Components/App.razor** file in the Server App, as shown below. {% tabs %} {% highlight cshtml %} @@ -58,11 +58,11 @@ You can refer the theme stylesheet inside the `` of **~/Components/App.raz ## Blazor WebAssembly Standalone App -For Blazor WebAssembly Standalone app, refer the script and style sheet fallback from [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets) inside the Script tag like below. +For Blazor WebAssembly Standalone App, reference script and stylesheet fallbacks from [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets) as shown below. ### Script fallback -You can check the Syncfusion® Blazor object for script fallback whether scripts are loaded or not. If it's not loaded, create a script tag and refer scripts externally inside the `` of **wwwroot/index.html** file in client web app as in the below code. +Check the Syncfusion® Blazor object to determine whether scripts are loaded. If they are not loaded, create a script tag and reference the scripts from Static Web Assets inside the `` of the **wwwroot/index.html** file in the client app, as shown below. {% tabs %} {% highlight cshtml tabtitle="~/index.html" %} @@ -84,7 +84,7 @@ You can check the Syncfusion® Blazor object ### Stylesheet fallback -You can refer the theme stylesheet inside the `` of **wwwroot/index.html** file in client web app like below. +Reference the theme stylesheet inside the `` of the **wwwroot/index.html** file in the client app, as shown below. {% tabs %} {% highlight cshtml tabtitle="~/index.html" %} diff --git a/blazor/common/content-security-policy.md b/blazor/common/content-security-policy.md index c9b6a24741..4d31e1eee4 100644 --- a/blazor/common/content-security-policy.md +++ b/blazor/common/content-security-policy.md @@ -1,30 +1,30 @@ --- layout: post title: Content Security Policy (CSP) - Syncfusion -description: Learn here about that how use Syncfusion Blazor Components with strict Content Security Policy (CSP). +description: Learn how to use Syncfusion Blazor components with a strict Content Security Policy (CSP) in Blazor Web App, Blazor WebAssembly (WASM), and Blazor Server. platform: Blazor -component: Common +control: Common documentation: ug --- -# Syncfusion® Blazor Components with Strict Content Security Policy (CSP) +# Syncfusion® Blazor components with a strict Content Security Policy (CSP) -Content Security Policy (CSP) is a security feature implemented by web browsers that helps to protect against attacks such as cross-site scripting (XSS) and data injection. It does this by limiting the sources from which certain types of content can be loaded on a webpage. +Content Security Policy (CSP) is a browser security feature that helps protect against cross-site scripting (XSS) and data injection by limiting the allowed sources for scripts, styles, images, fonts, and other resources. -When enabling strict Content Security Policy (CSP), some browser features are disabled by default. In order to use Syncfusion® blazor components with strict CSP mode, certain directives must be included in the CSP meta tag. These directives allow to use certain features that are necessary for Syncfusion® blazor components to function properly. +When enforcing a strict CSP, some browser features are blocked by default. To use Syncfusion® Blazor components under a strict CSP, include specific directives in the CSP policy so required runtime behaviors continue to work. -To use Syncfusion® blazor components with strict CSP mode, the following directives must be included in the CSP meta tag: +Include the following directives in the CSP policy for Syncfusion® Blazor components: -* `font-src data:` - This directive allows for the use of `base64` encoded font icons. -* `style-src 'self' unsafe-inline` - This directive permits the use of inline styles, allowing components to apply parameters such as Width, Height, positioning, etc. Additionally, certain components depend on inline styling to render dynamic behaviors and responsive UI design. -* `connect-src 'self' https: wss:` - This directive enables web sockets. -* `script-src 'self' unsafe-eval` - This directive allows for the use of the `new()` and `eval()` functions. Used in animation enabled Syncfusion® components. +* `font-src data:` – Allows `base64`-encoded font icons. +* `style-src 'self' 'unsafe-inline'` – Permits inline styles. Some components use inline styling for sizing, positioning, and dynamic UI behavior. +* `connect-src 'self' https: wss:` – Enables WebSockets and HTTPS connections. +* `script-src 'self' 'unsafe-eval'` – Permits dynamic code evaluation required by certain features (for example, animation logic). These directives should be included in the `` tag of the application's webpage, typically -* For **.NET 8 and .NET 9** Blazor Web Apps using any render mode (Server, WebAssembly, or Auto), inside the `` of **~/Components/App.razor** file. +* For **.NET 8 and .NET 9** Blazor Web Apps using any render mode (Server, WebAssembly, or Auto), inside the `` of the **~/Components/App.razor** file. -* For **Blazor WebAssembly Standalone App**, inside the `` of **wwwroot/index.html** file. +* For **Blazor WebAssembly Standalone App**, inside the `` of the **wwwroot/index.html** file. {% tabs %} {% highlight c# hl_lines="9 10" %} @@ -47,7 +47,7 @@ These directives should be included in the `` tag of the application's web {% endhighlight %} {% endtabs %} -if you are referencing script and style references from CDN, then add CDN domain reference in CSP meta tag. +If referencing scripts and styles from a CDN, add the CDN domain to the CSP policy (for example, include the Syncfusion CDN under `script-src` and `style-src`). {% tabs %} {% highlight c# hl_lines="9 10" %} diff --git a/blazor/common/deployment.md b/blazor/common/deployment.md index d0b1254d38..4e802631e8 100644 --- a/blazor/common/deployment.md +++ b/blazor/common/deployment.md @@ -1,17 +1,17 @@ --- layout: post title: Deployment in Blazor | AOT | Syncfusion -description: Learn here all about deploying the Blazor application with Syncfusion Blazor Components and much more. +description: Learn how to publish and deploy Blazor Web App, Blazor WASM, Blazor Server Apps with Syncfusion Blazor components, including self-contained deployment and AOT. platform: Blazor -component: Common +control: Common documentation: ug --- # Deployment in Blazor -This section provides information about deploying Blazor applications with the Syncfusion® Blazor components. +This section provides information about deploying Blazor applications with Syncfusion® Blazor components. -Refer to [Host and deploy ASP.NET Core Blazor](https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/?view=aspnetcore-7.0&tabs=visual-studio) topic for more information. +For more information, see [Host and deploy ASP.NET Core Blazor](https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy). ## Publish Blazor Application with Visual Studio @@ -27,7 +27,7 @@ Refer to [Host and deploy ASP.NET Core Blazor](https://learn.microsoft.com/en-us ![Release Configuration in Blazor](./images/config.png) -* For `Blazor Server side application`, set Deployment Mode as `Self-Contained`. Because some dependencies are not loaded properly when the published folder is hosted. +* For Blazor Server App, consider setting Deployment mode to `Self-Contained` when the hosting environment doesn't have the required .NET runtime installed. ![Deploy Mode in Blazor](./images/deploy.png) @@ -37,9 +37,9 @@ Refer to [Host and deploy ASP.NET Core Blazor](https://learn.microsoft.com/en-us ## Publish Blazor Application with CLI -Packing the application and its dependencies into a folder for deployment to a hosting system by using the `dotnet publish` command. +Package the application and its dependencies into a folder for deployment by using the `dotnet publish` command. -For CLI deployment, run the following command from your root directory. +Run the following command from the project directory. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -49,7 +49,7 @@ dotnet publish -c Release {% endhighlight %} {% endtabs %} -For Blazor Server CLI deployment. +For Blazor Server CLI deployment: {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -59,7 +59,7 @@ dotnet publish -c Release --self-contained true -r win-x86 {% endhighlight %} {% endtabs %} -Refer to the [dotnet publish - arguments](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-publish?tabs=netcore21#arguments) to learn about various optional arguments. Use the following command to specify the path for the output directory. +Refer to [dotnet publish arguments](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-publish#arguments) to learn about optional arguments. Use the following command to specify the output directory path. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -75,7 +75,7 @@ If the path is relative, the output directory generated is relative to the proje ## Ahead-of-time (AOT) compilation in Blazor WebAssembly -Blazor WebAssembly supports ahead-of-time (AOT) compilation which provides improved runtime performance at the expense of a larger app size. Refer to [Ahead-of-time (AOT) compilation](https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly?view=aspnetcore-6.0#ahead-of-time-aot-compilation) topic to learn more about how it works and how to enable. +Blazor WebAssembly supports ahead-of-time (AOT) compilation, which improves runtime performance at the expense of a larger app size. For details and enablement steps, see [Ahead-of-time (AOT) compilation](https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly/?view=aspnetcore-8.0&tabs=windows#ahead-of-time-aot-compilation). ### Enable AOT in the application @@ -93,10 +93,10 @@ To enable AOT compilation in the application, add `RunAOTCompilation` options wi ## See also -* [Host and Deploy Blazor](https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/?view=aspnetcore-7.0&tabs=visual-studio) -* [Host and deploy Blazor Server](https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/server?view=aspnetcore-7.0) -* [Host and deploy ASP.NET Core Blazor WebAssembly](https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly?view=aspnetcore-7.0) -* [Publish a Web app to Azure App Service using Visual Studio](https://learn.microsoft.com/en-us/visualstudio/deployment/quickstart-deploy-aspnet-web-app?view=vs-2022&tabs=azure) -* [Deploy ASP.NET Core apps to Azure App Service](https://learn.microsoft.com/en-us/aspnet/core/host-and-deploy/azure-apps/?view=aspnetcore-7.0&tabs=visual-studio) -* [Deploy Blazor WASM App to Cloudflare](https://www.syncfusion.com/blogs/post/easily-deploy-a-blazor-webassembly-app-to-cloudflare.aspx) -* [Publish a Blazor WebAssembly app and .NET API with Azure Static Web Apps](https://learn.microsoft.com/en-us/training/modules/publish-app-service-static-web-app-api-dotnet/) +* [Host and deploy Blazor](https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy) +* [Host and deploy Blazor Server](https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/server/) +* [Host and deploy ASP.NET Core Blazor WebAssembly](https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly) +* [Publish a web app to Azure App Service using Visual Studio](https://learn.microsoft.com/en-us/visualstudio/deployment/quickstart-deploy-aspnet-web-app?view=vs-2022&tabs=azure) +* [Deploy ASP.NET Core apps to Azure App Service](https://learn.microsoft.com/en-us/aspnet/core/host-and-deploy/azure-apps) +* [Deploy Blazor WASM App to Cloudflare](https://www.syncfusion.com/blogs/post/easily-deploy-a-blazor-webassembly-app-to-cloudflare) +* [Publish a Blazor WebAssembly App and .NET API with Azure Static Web Apps](https://learn.microsoft.com/en-us/training/modules/publish-app-service-static-web-app-api-dotnet/) diff --git a/blazor/common/showcase-samples.md b/blazor/common/showcase-samples.md index dc62ce42f5..ff2ec40de5 100644 --- a/blazor/common/showcase-samples.md +++ b/blazor/common/showcase-samples.md @@ -1,30 +1,30 @@ --- layout: post -title: Syncfusion Blazor Components showcase samples | Syncfusion -description: Learn here all about list of showcase samples in Blazor Server and WebAssembly (WASM) apps and much more. +title: Syncfusion Blazor components showcase samples | Syncfusion +description: Explore showcase applications that demonstrate Syncfusion Blazor components for Blazor Server and Blazor WebAssembly (WASM). platform: Blazor -component: Common +control: Common documentation: ug --- -# Syncfusion® Blazor Components showcase samples +# Syncfusion® Blazor components showcase samples -Syncfusion® has a collection of sample applications that demonstrate the use of Syncfusion® Blazor UI components. +The following showcase applications demonstrate Syncfusion® Blazor components in real-world scenarios. -| Sample Application | Description | Platform | GitHub | +| Sample Application | Description | Application | GitHub | | ------------- | ------------- | ------------- | ------------- | -| Expense Tracker | Track and visualize your daily expenses with a great UI. | [Server](https://blazor.syncfusion.com/showcase/expensetracker/)/[WASM](https://blazor.syncfusion.com/showcase/wasm/expensetracker/) | [GitHub code](https://github.com/syncfusion/blazor-showcase-expense-tracker) | -| Diagram Builder | Diagram Builder is a web application which is used to create the diagrams like Flow Chart, process diagrams and more. | [Server](https://blazor.syncfusion.com/showcase/diagrambuilder/)/[WASM](https://blazor.syncfusion.com/showcase/wasm/diagrambuilder) | [GitHub code](https://github.com/syncfusion/blazor-showcase-diagram-builder) | -| Floor Planner | Design and plan the layout of a floor or building, including the placement of walls, doors, windows, furniture, and other objects. | [Server](https://blazor.syncfusion.com/showcase/floor-planner/)/[WASM](https://blazor.syncfusion.com/showcase/wasm/floor-planner/) | [GitHub code](https://github.com/syncfusion/blazor-showcase-floor-planner) | -| Logic Circuit Designer | Design and simulate digital logic circuits using a wide range of logic gates, input and output components to better visualize and understand how it works, and share your design with others. | [Server](https://blazor.syncfusion.com/showcase/logic-circuit-designer/)/[WASM](https://blazor.syncfusion.com/showcase/wasm/logic-circuit-designer/) | [GitHub code](https://github.com/syncfusion/blazor-showcase-logic-circuit-designer) | -| Appointment Planner | An appointment scheduling application for doctors in a clinic to manage their appointments with patients. | [Server](https://blazor.syncfusion.com/showcase/appointmentplanner/)/[WASM](https://blazor.syncfusion.com/showcase/wasm/appointment-planner/) | [GitHub code](https://github.com/syncfusion/blazor-showcase-appointment-planner) | -| Mind Map | A mind map, a type of spider diagram, is used to visually organize information around a central concept. It helps show the relationships between groups of information. | [Server](https://blazor.syncfusion.com/showcase/mind-map/)/[WASM](https://blazor.syncfusion.com/showcase/wasm/mind-map/) | [GitHub code](https://github.com/syncfusion/blazor-showcase-mindmap) | -| BPMN Editor | A business process model and notation (BPMN) diagram is like a flowchart for complex business processes, used for sharing process information across organizations and industries. | [Server](https://blazor.syncfusion.com/showcase/bpmn-editor/)/[WASM](https://blazor.syncfusion.com/showcase/wasm/bpmn-editor/) | [GitHub code](https://github.com/syncfusion/blazor-showcase-bpmn-editor) | -| Organizational Chart | An organizational chart is a diagram that visually conveys a company's internal structure by detailing the roles, responsibilities, and relationships between individuals within an entity. | [Server](https://blazor.syncfusion.com/showcase/organization-chart/)/[WASM](https://blazor.syncfusion.com/showcase/wasm/organization-chart/) | [GitHub code](https://github.com/syncfusion/blazor-showcase-organizational-chart) | -| Document Explorer | Manages the file system that allows users to access, edit, and sort files or folders and open Word, PowerPoint, and PDF documents. | [Server](https://blazor.syncfusion.com/showcase/documentexplorer/) | [GitHub code](https://github.com/syncfusion/blazor-showcase-document-explorer) | -| Sprint Management | Sprint management involves managing the sprint board of an organization. It allows teams to track tasks, allocate work, and monitor progress during a sprint. | [Server](https://blazor.syncfusion.com/showcase/sprint-management/) | [GitHub code](https://github.com/syncfusion/blazor-showcase-sprint-management) | -| Stay Reservation |Stay Reservation simplifies room bookings, streamlines management for hotel owners, and provides real-time insights into occupancy, including active reservations and available rooms by floor. | [Server](https://blazor.syncfusion.com/showcase/stay-reservation) | [GitHub code](https://github.com/syncfusion/blazor-showcase-stay-reservation)| -| Stock Market Dashboard | StockMarket Dashboard Showcase app is a comprehensive tool that provides real-time data, analytics, and insights for investors, displaying key financial metrics and market trends in an intuitive interface. | [Server](https://blazor.syncfusion.com/showcase/stockmarket-dashboard/) | [GitHub code](https://github.com/syncfusion/blazor-showcase-stockmarket-dashboard) | -| Fitness Tracker | Track and visualize data of your daily activities, diet and fasting to track fitness of daily statistics. | [Server](https://blazor.syncfusion.com/showcase/fitness-tracker/) | [GitHub code](https://github.com/syncfusion/blazor-showcase-fitness-tracker) | -| Loan Calculator | Calculate loan payments, interest rates, and amortization schedules. When you are planning for a personal loan or analyzing business financing options, this provides accurate results and helps you make informed financial decisions. | [WASM](https://blazor.syncfusion.com/showcase/wasm/loan-calculator/) | [GitHub code](https://github.com/syncfusion/blazor-showcase-loan-calculator) | -| Health Tracker | Track and visualize data such as calories consumed and daily activities like steps taken, water consumption, and sleep duration. | [WASM](https://blazor.syncfusion.com/showcase/wasm/health-tracker/) | [GitHub code](https://github.com/syncfusion/blazor-showcase-healthtracker) | +| Expense Tracker | Track and visualize daily expenses with an intuitive UI. | [Blazor Server](https://blazor.syncfusion.com/showcase/expensetracker/)/[Blazor WebAssembly (WASM)](https://blazor.syncfusion.com/showcase/wasm/expensetracker/) | [GitHub code](https://github.com/syncfusion/blazor-showcase-expense-tracker) | +| Diagram Builder | Create flowcharts, process diagrams, and more in a web-based diagramming tool. | [Blazor Server](https://blazor.syncfusion.com/showcase/diagrambuilder/)/[Blazor WebAssembly (WASM)](https://blazor.syncfusion.com/showcase/wasm/diagrambuilder) | [GitHub code](https://github.com/syncfusion/blazor-showcase-diagram-builder) | +| Floor Planner | Design and plan the layout of a floor or building, including the placement of walls, doors, windows, furniture, and other objects. | [Blazor Server](https://blazor.syncfusion.com/showcase/floor-planner/)/[Blazor WebAssembly (WASM)](https://blazor.syncfusion.com/showcase/wasm/floor-planner/) | [GitHub code](https://github.com/syncfusion/blazor-showcase-floor-planner) | +| Logic Circuit Designer | Design and simulate digital logic circuits using a wide range of logic gates, inputs, and outputs; visualize behavior and share designs. | [Blazor Server](https://blazor.syncfusion.com/showcase/logic-circuit-designer/)/[Blazor WebAssembly (WASM)](https://blazor.syncfusion.com/showcase/wasm/logic-circuit-designer/) | [GitHub code](https://github.com/syncfusion/blazor-showcase-logic-circuit-designer) | +| Appointment Planner | Schedule and manage clinic appointments efficiently. | [Blazor Server](https://blazor.syncfusion.com/showcase/appointmentplanner/)/[Blazor WebAssembly (WASM)](https://blazor.syncfusion.com/showcase/wasm/appointment-planner/) | [GitHub code](https://github.com/syncfusion/blazor-showcase-appointment-planner) | +| Mind Map | Visually organize information around a central concept and explore relationships between topics. | [Blazor Server](https://blazor.syncfusion.com/showcase/mind-map/)/[Blazor WebAssembly (WASM)](https://blazor.syncfusion.com/showcase/wasm/mind-map/) | [GitHub code](https://github.com/syncfusion/blazor-showcase-mindmap) | +| BPMN Editor | Model and share complex business processes with BPMN diagrams. | [Blazor Server](https://blazor.syncfusion.com/showcase/bpmn-editor/)/[Blazor WebAssembly (WASM)](https://blazor.syncfusion.com/showcase/wasm/bpmn-editor/) | [GitHub code](https://github.com/syncfusion/blazor-showcase-bpmn-editor) | +| Organizational Chart | Visualize a company's internal structure with roles, responsibilities, and relationships. | [Blazor Server](https://blazor.syncfusion.com/showcase/organization-chart/)/[Blazor WebAssembly (WASM)](https://blazor.syncfusion.com/showcase/wasm/organization-chart/) | [GitHub code](https://github.com/syncfusion/blazor-showcase-organizational-chart) | +| Document Explorer | Manage files and folders; open Word, PowerPoint, and PDF documents. | [Blazor Server](https://blazor.syncfusion.com/showcase/documentexplorer/) | [GitHub code](https://github.com/syncfusion/blazor-showcase-document-explorer) | +| Sprint Management | Track tasks, allocate work, and monitor progress on a sprint board. | [Blazor Server](https://blazor.syncfusion.com/showcase/sprint-management/) | [GitHub code](https://github.com/syncfusion/blazor-showcase-sprint-management) | +| Stay Reservation | Stay Reservation simplifies room bookings, streamlines management for hotel owners, and provides real-time insights into occupancy, including active reservations and available rooms by floor. | [Blazor Server](https://blazor.syncfusion.com/showcase/stay-reservation) | [GitHub code](https://github.com/syncfusion/blazor-showcase-stay-reservation) | +| Stock Market Dashboard | Stock Market Dashboard is a comprehensive tool that provides real-time data, analytics, and insights for investors, displaying key metrics and market trends in an intuitive interface. | [Blazor Server](https://blazor.syncfusion.com/showcase/stockmarket-dashboard/) | [GitHub code](https://github.com/syncfusion/blazor-showcase-stockmarket-dashboard) | +| Fitness Tracker | Track daily activities, diet, and fasting, and visualize fitness statistics. | [Blazor Server](https://blazor.syncfusion.com/showcase/fitness-tracker/) | [GitHub code](https://github.com/syncfusion/blazor-showcase-fitness-tracker) | +| Loan Calculator | Calculate loan payments, interest rates, and amortization schedules to support informed financial decisions. | [Blazor WebAssembly (WASM)](https://blazor.syncfusion.com/showcase/wasm/loan-calculator/) | [GitHub code](https://github.com/syncfusion/blazor-showcase-loan-calculator) | +| Health Tracker | Track calories and daily activities such as steps, water consumption, and sleep duration. | [Blazor WebAssembly (WASM)](https://blazor.syncfusion.com/showcase/wasm/health-tracker/) | [GitHub code](https://github.com/syncfusion/blazor-showcase-healthtracker) | From 414cb9387547e3b841bffb86648cd3268b7e68f6 Mon Sep 17 00:00:00 2001 From: Backiaraj Date: Mon, 6 Oct 2025 16:10:44 +0530 Subject: [PATCH 2/7] Updated the Blazor common UG documentation --- .../playground/build-in-code-snippets.md | 22 ++++----- .../common/playground/configure-services.md | 27 ++++++----- .../playground/end-user-capabilities.md | 47 ++++++++++--------- blazor/common/playground/getting-started.md | 24 +++++----- .../playground/managing-nuget-packages.md | 28 +++++------ .../playground/working-with-components.md | 16 +++---- 6 files changed, 84 insertions(+), 80 deletions(-) diff --git a/blazor/common/playground/build-in-code-snippets.md b/blazor/common/playground/build-in-code-snippets.md index 1a8559c62e..3e63d1d748 100644 --- a/blazor/common/playground/build-in-code-snippets.md +++ b/blazor/common/playground/build-in-code-snippets.md @@ -1,27 +1,27 @@ --- layout: post title: Predefined code templates in Blazor Playground | Syncfusion -description: Simplify your Blazor development using Syncfusion's ready-to-use code templates in the Blazor Playground. +description: Learn here all about how to simplify Blazor development using Syncfusion's ready-to-use code templates in the Blazor Playground and explore more details. platform: Blazor -component: Common +control: Common documentation: ug --- -# Predefined Code Snippets for Blazor Playground -Blazor Playground provides pre-defined code snippets for all Syncfusion® Blazor components that helps to ease access the component's code snippets. +# Predefined code snippets for Blazor Playground +Blazor Playground provides predefined code snippets for all Syncfusion® Blazor components to quickly insert component code examples. -* Click the `Snippet` button to open a popup containing a list of predefined code snippets for Syncfusion® Blazor UI components. -![Blazor Playground with pre-configured code snippet](./images/Click_Snippet.png) +* Click the Snippet button to open a dialog containing a list of predefined code snippets for Syncfusion® Blazor UI components. +![Blazor Playground with preconfigured code snippet](./images/Click_Snippet.png) -* Choose the specific components you want to render (up to 10 at a time). This can be done by simply clicking on the desired snippet. Blazor Playground allows you to select multiple components simultaneously. -![Blazor Playground with selecting a component](./images/Select_Component.png) +* Select up to 10 components to render by clicking the desired snippets. Multiple components can be selected simultaneously. +![Blazor Playground selecting a component](./images/Select_Component.png) -* Once you've selected the component, click the `Add` button. The chosen snippet will be added in the editor. +* After selecting components, click the Add button. The chosen snippets are added to the editor. ![Blazor Playground with code snippets](./images/Add_Snippets.png) -N>For each selected component, the corresponding individual NuGet package (latest version) will be added, while the overall `Syncfusion.Blazor` package will be removed. +N> For each selected component, the corresponding individual NuGet package (latest version) is added automatically, and the overall `Syncfusion.Blazor` package is removed. ![Selected snippet output](./images/Snippet_Output.gif) -* Press the `run` button or Ctrl+R to execute the code. The output of the executed code will appear in the result view. \ No newline at end of file +* Press the Run button or Ctrl+R to execute the code. The output appears in the result view. diff --git a/blazor/common/playground/configure-services.md b/blazor/common/playground/configure-services.md index 7c636e45b6..6d18fb85e6 100644 --- a/blazor/common/playground/configure-services.md +++ b/blazor/common/playground/configure-services.md @@ -1,19 +1,20 @@ --- layout: post -title: Configuration and new services in Blazor Playground | Syncfusion -description: Blazor Playground supports configuration and new services, making it easier to develop and maintain complex Blazor components. +title: Configure services in Blazor Playground | Syncfusion +description: Learn here all about how to configure services and dependency injection in Blazor Playground by updating register source file via the Services button. platform: Blazor -component: Common +control: Common documentation: ug --- -# Configuring Services in Blazor Playground +# Configure services in Blazor Playground -You can add or modify services in Blazor Playground using the `Services` button in the app bar. -* Access the ConfigureServices method in Program.cs for adding new injectable services or overriding existing service configurations. -* Register the created service class in the ConfigureServices method. -* Inject the service into components as needed using dependency injection. +You can add or modify services in Blazor Playground using the Services button in the app bar. -For example +* Open the Services button to edit Program.cs and the `ConfigureServices` method. +* Add or update service registrations in `ConfigureServices`. +* Inject the service into components as needed. + +For example: * Add a class file by clicking '+' button and include the following code snippet. @@ -44,7 +45,7 @@ namespace Playground.User } } ``` -* Click the "Services" button to configure the created class in the Program.cs file. Then, register the services in `ConfigureServices` method. +* Click the Services button to open Program.cs and register the service in the `ConfigureServices` method. ```csharp using System; @@ -74,7 +75,7 @@ namespace Playground.User } ``` -* Include the dependency injection in the **__Index.razor** file. +* Inject the service in the `_Index.razor` file. ```csharp @@ -101,4 +102,6 @@ namespace Playground.User } ``` -![Syncfusion Blazor Playground with adding services](images/add_services.gif) \ No newline at end of file +* Press the Run button to execute the code. The output appears in the result view. + +![Syncfusion Blazor Playground with adding services](images/add_services.gif) diff --git a/blazor/common/playground/end-user-capabilities.md b/blazor/common/playground/end-user-capabilities.md index 0b629147ed..20c050bcfd 100644 --- a/blazor/common/playground/end-user-capabilities.md +++ b/blazor/common/playground/end-user-capabilities.md @@ -1,35 +1,35 @@ --- layout: post -title: Exploring Themes and Code Editor in Blazor Playground | Syncfusion -description: Blazor Playground offers theme customization and a feature-rich code editor to simplify the development and testing of Blazor components. +title: Exploring themes and code editor in Blazor Playground | Syncfusion +description: Blazor Playground offers theme customization and a feature-rich code editor to simplify development and testing of Blazor components and more details. platform: Blazor -component: Common +control: Common documentation: ug --- -# End-user Capabilities +# End-user capabilities -## Switching the Themes +## Switch themes -Blazor Playground lets you customize the appearance of Syncfusion® Blazor components by choosing from various themes using the dropdown accessible through the **Output Theme** button. +Blazor Playground lets users customize the appearance of Syncfusion® Blazor components by choosing a theme from the dropdown available via the **Output Theme** button. ![Syncfusion Blazor Playground with theme](images/Output_Theme.gif) -## Explore the Code Editor +## Explore the code editor * Type, copy, cut, paste, and edit your code within the editor. -* Create and manage .razor and .cs files alongside the default index.razor. +* Create and manage .razor and .cs files alongside the default `_Index.razor`. * Enhance readability with syntax highlighting for keywords, variables, strings, and comments. -## Compiling and Running Code +## Compiling and running code -* Execute your code by pressing the Run button or using the Ctrl+R keyboard shortcut. -* Visualize the compiled code's output in the result view. +* Execute code by pressing the Run button or using the Ctrl+R keyboard shortcut. +* View the compiled output in the result view. -## Preview Code Output +## Preview code output * Click the Run button to compile your code. -* If there are no errors, the result view displays the output for your code. +* If there are no errors, the result view displays the output. ## Error and warning handling @@ -37,31 +37,32 @@ During compilation, any errors or warnings are displayed with their correspondin ![Syncfusion Blazor Playground with error console](images/ErrorConsole.png) -## Sharing Code -You can share your code snippets with unique URLs easily for collaboration and discussion by clicking the `Share` button, which presents two sections: **Shared Link** and **Embed Link**. +## Sharing code + +Click the Share button to generate a unique URL for collaboration and discussion. The dialog presents two sections: **Shared Link** and **Embed Link**. ![Syncfusion Blazor Playground with save code snippet](images/Save_Snippet.png) -## Embedding Code +## Embedding code -The embed links are useful for sharing the code snippet that provides various customization options: +Embed links provide customization options: * **Display Code Editor:** Enables the code editor for the end user. * **Display Result View:** Disables the code editor and shows only the result. * **Display Error Console:** Shows the warnings and errors console. -* **Display App Bar:** Enables the app bar with the run button. +* **Display App Bar:** Enables the app bar with the Run button. -For example, enabled all the options on embed a link. +For example, enable all options in an embed link. ![Syncfusion Blazor Playground with all embed options](images/Embed_enableall.png) -For example, show the result view and disabled all other options. +For example, show only the result view and disable all other options. ![Syncfusion Blazor Playground with result view](images/Embed_Result.png) -## Handling Static Assets +## Handling static assets -You can manage CSS and JavaScript files for styling and scripting your application in Blazor Playground. +Manage CSS and JavaScript files for styling and scripting your application in Blazor Playground. * Add CDN links for static assets through the **Static Assets** tab in the **NuGet Asset Manager**. -* Include the CDN link in your code files (**__Index.razor** in this example) to apply the styles or scripts. +* Include the CDN link in your code files (for example, `__Index.razor`) to apply styles or scripts. ![Syncfusion Blazor Playground with static assets](images/static_assets.gif) \ No newline at end of file diff --git a/blazor/common/playground/getting-started.md b/blazor/common/playground/getting-started.md index 45ffcafee8..01fc0954bd 100644 --- a/blazor/common/playground/getting-started.md +++ b/blazor/common/playground/getting-started.md @@ -1,9 +1,9 @@ --- layout: post title: Getting Started with Blazor Playground | Syncfusion -description: Explore real-time Blazor component development with Syncfusion Blazor Playground. Write, edit, compile, and share effortlessly in your browser! +description: Learn here about how to write, edit, compile, build, run, and share Blazor and Syncfusion Blazor components directly in the browser using Blazor Playground. platform: Blazor -component: Common +control: Common documentation: ug --- @@ -11,17 +11,17 @@ documentation: ug The Blazor playground allows you to develop and test any Blazor component, including both general components and pre-built Syncfusion® Blazor components. -To get start quickly with Blazor Playground, you can check on this video. +To get started quickly with Blazor Playground, watch the following video. {% youtube "youtube:https://www.youtube.com/watch?v=tMu19E-xkyk" %} -## Blazor Component +## Blazor component You can create a Blazor component in Blazor playground by following the given steps below: -* Open the [Blazor Playground](https://blazorplayground.syncfusion.com/) URL in your browser. -* Add the code in **__Index.razor**, +* Open the [Blazor Playground](https://blazorplayground.syncfusion.com/) URL in your browser. +* In the editor, add the following code: ```cshtml @@ -73,15 +73,15 @@ You can create a Blazor component in Blazor playground by following the given st ``` -* Press the `run` button or Ctrl+R to execute the code. The output of the executed code will appear in the result view. +* Press the Run button or Ctrl+R to execute the code. The output appears in the result view. ![Syncfusion Blazor Playground](images/blazor_component.png) -## Syncfusion® Blazor Component +## Syncfusion® Blazor component -As Syncfusion® Blazor playground comes pre-configured with `Syncfusion.Blazor` package, stylesheet, script, and namespace are included with the application. To render Syncfusion® components in Blazor playground, follow the steps given below: +Blazor Playground is preconfigured with the `Syncfusion.Blazor` package, stylesheets, and scripts. To render Syncfusion® components in the Playground, import the required namespaces and add the component as shown below: -* Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace on top of the code editor. +* Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces at the top of the editor. ```cshtml @@ -91,7 +91,7 @@ As Syncfusion® Blazor playground comes pre- ``` -* Add the Blazor Calendar component in the code editor. +* Add the Blazor Calendar component in the editor. ```cshtml @@ -99,6 +99,6 @@ As Syncfusion® Blazor playground comes pre- ``` -* Press the `run` button or Ctrl+R to execute the code. The output of the executed code will appear in the result view. +* Press the Run button or Ctrl+R to execute the code. The output appears in the Result view. ![Syncfusion Blazor Playground with Calendar component](images/syncfusion_component.png) \ No newline at end of file diff --git a/blazor/common/playground/managing-nuget-packages.md b/blazor/common/playground/managing-nuget-packages.md index 777941c0a6..cc64e68409 100644 --- a/blazor/common/playground/managing-nuget-packages.md +++ b/blazor/common/playground/managing-nuget-packages.md @@ -1,46 +1,46 @@ --- layout: post -title: Installing Nuget Packages in Blazor Playground | Syncfusion -description: Blazor Playground makes it easy to add functionality to your Blazor apps by providing a convenient way to install NuGet packages. +title: Manage NuGet packages in Blazor Playground | Syncfusion +description: Learn here all about how to install, remove, and upgrade NuGet packages in Syncfusion Blazor Playground to optimize load time, add features and more details. platform: Blazor -component: Common +control: Common documentation: ug --- -# Managing NuGet Packages +# Manage NuGet packages -Syncfusion® Blazor Playground pre-configures the `Syncfusion.Blazor` package for immediate component rendering. However, this loads the entire Syncfusion® Blazor library, affecting initial page load time. You can optimize performance by using individual NuGet packages, loading only the specific components you need. +Syncfusion® Blazor Playground is preconfigured with the `Syncfusion.Blazor` package for immediate component rendering. This loads the full library, which can impact initial load time. For better performance, install individual NuGet packages to load only the components required. ## Adding NuGet packages * Open the NuGet Asset Manager sidebar. -* Search and select the desired package with its preferred version. Install it using the `Install NuGet` button. +* Search for the desired package, select a version, and click the Install NuGet button. The Playground restores packages automatically. -N>Uninstall the `Syncfusion.Blazor` package before installing individual packages. +N> Uninstall the `Syncfusion.Blazor` package before installing individual packages to avoid duplication and reduce payload size. -For example, Uninstall `Syncfusion.Blazor` and install the latest [Syncfusion.Blazor.Calendar](https://blazor.syncfusion.com/documentation/nuget-packages#syncfusionblazorcalendars). +For example, uninstall `Syncfusion.Blazor` and install the latest [Syncfusion.Blazor.Calendars](https://blazor.syncfusion.com/documentation/nuget-packages#syncfusionblazorcalendars). ![Syncfusion Blazor Playground with NuGet Package](images/adding_package.gif) -* Add the rendering code in the code editor. +* Add rendering code in the editor. ```csharp @using Syncfusion.Blazor @using Syncfusion.Blazor.Calendars ``` -* Execute the code with the `Run` button or Ctrl+R to execute the code. The output will appear in the result view. +* Press the Run button or Ctrl+R to execute the code. The output appears in the result view. -### Removing Packages +### Remove packages Click the `Remove` button next to the installed package details to uninstall it. ![Syncfusion Blazor Playground with Delete Package](images/delete_Package.gif) -### Control the NuGet Versioning +### Control NuGet versioning -Upgrade or downgrade packages by searching for the desired package name and selecting the specific version. The Playground will handle installation or updates accordingly. +Upgrade or downgrade packages by searching for the package name and selecting a specific version. The Playground handles installation or updates automatically. -N>Maintain consistent versions across all Syncfusion® Blazor packages to avoid compatibility issues. +N> Maintain consistent versions across all Syncfusion® Blazor packages to avoid compatibility issues. ![Syncfusion Blazor Playground with Upgrade and Downgrade](images/upgrade_downgrade.gif) \ No newline at end of file diff --git a/blazor/common/playground/working-with-components.md b/blazor/common/playground/working-with-components.md index 32c4628d55..934abd946f 100644 --- a/blazor/common/playground/working-with-components.md +++ b/blazor/common/playground/working-with-components.md @@ -3,19 +3,19 @@ layout: post title: Working with components | Syncfusion description: Syncfusion Blazor Playground is a powerful online code editor for building and editing Blazor components easily. platform: Blazor -component: Common +control: Common documentation: ug --- # Working with components in Blazor Playground -## Adding a Child Component +## Add a child component * Click the "+" button to add a new component. * Name the component in the input box. -* Add the corresponding code within the child component file (e.g., .razor). +* Add code to the child component file (for example, a .razor file). -For example, **ChildComponent.razor** +For example, **ChildComponent.razor**: ```cshtml Parent Component @@ -55,13 +55,13 @@ For example, **ChildComponent.razor** private string _password; } ``` -* Press the `Run` button to execute the code and see the component rendered. +* Press the Run button to execute the code and see the component rendered. ![Syncfusion Blazor Playground with Child Component](images/child_component.gif) -## Removing a Child Component +## Remove a child component Click the delete icon next to the child component in the Playground. -N>The Playground doesn't automatically remove references from __Index.razor. Manually update the file to reflect the deletion. +N> The Playground does not automatically remove references from `__Index.razor`. Manually update the file to reflect the deletion and prevent build errors. From 51f6311d3ea5db45a1f47ab7afff5b58afd06eea Mon Sep 17 00:00:00 2001 From: Backiaraj Date: Mon, 6 Oct 2025 18:56:37 +0530 Subject: [PATCH 3/7] Updated common Blazor UG documentation --- blazor/common/cdn-fallback.md | 4 +-- blazor/common/content-security-policy.md | 2 +- blazor/common/deployment.md | 2 +- ...mponent-on-existing-aspnet-core-mvc-app.md | 34 +++++++++---------- .../add-blazor-component-to-the-toolbox.md | 21 ++++++------ .../how-to/render-blazor-server-app-in-ie.md | 28 +++++++-------- blazor/common/showcase-samples.md | 2 +- 7 files changed, 47 insertions(+), 46 deletions(-) diff --git a/blazor/common/cdn-fallback.md b/blazor/common/cdn-fallback.md index 104072f298..cfc1a3a855 100644 --- a/blazor/common/cdn-fallback.md +++ b/blazor/common/cdn-fallback.md @@ -13,7 +13,7 @@ This section explains how to reference fallback [scripts](https://blazor.syncfus ## Blazor Web App -For **.NET 8 and .NET 9** Blazor Web Apps using any render mode (Server, WebAssembly, or Auto), reference script and stylesheet fallbacks from [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets) as shown below. +For **.NET 8 and .NET 9** Blazor Web Apps using any render mode (Server, WebAssembly, or Auto), reference script and stylesheet fallback from [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets) as shown below. ### Script fallback @@ -58,7 +58,7 @@ Reference the theme stylesheet inside the `` of the **~/Components/App.raz ## Blazor WebAssembly Standalone App -For Blazor WebAssembly Standalone App, reference script and stylesheet fallbacks from [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets) as shown below. +For Blazor WebAssembly Standalone App, reference script and stylesheet fallback from [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets) as shown below. ### Script fallback diff --git a/blazor/common/content-security-policy.md b/blazor/common/content-security-policy.md index 4d31e1eee4..547a8812f6 100644 --- a/blazor/common/content-security-policy.md +++ b/blazor/common/content-security-policy.md @@ -7,7 +7,7 @@ control: Common documentation: ug --- -# Syncfusion® Blazor components with a strict Content Security Policy (CSP) +# Syncfusion® Blazor components with a strict Content Security Policy (CSP) Content Security Policy (CSP) is a browser security feature that helps protect against cross-site scripting (XSS) and data injection by limiting the allowed sources for scripts, styles, images, fonts, and other resources. diff --git a/blazor/common/deployment.md b/blazor/common/deployment.md index 4e802631e8..a75d422848 100644 --- a/blazor/common/deployment.md +++ b/blazor/common/deployment.md @@ -75,7 +75,7 @@ If the path is relative, the output directory generated is relative to the proje ## Ahead-of-time (AOT) compilation in Blazor WebAssembly -Blazor WebAssembly supports ahead-of-time (AOT) compilation, which improves runtime performance at the expense of a larger app size. For details and enablement steps, see [Ahead-of-time (AOT) compilation](https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly/?view=aspnetcore-8.0&tabs=windows#ahead-of-time-aot-compilation). +Blazor WebAssembly supports ahead-of-time (AOT) compilation, which improves runtime performance at the expense of a larger app size. For details and enable steps, see [Ahead-of-time (AOT) compilation](https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly/?view=aspnetcore-8.0&tabs=windows#ahead-of-time-aot-compilation). ### Enable AOT in the application diff --git a/blazor/common/how-to/add-blazor-component-on-existing-aspnet-core-mvc-app.md b/blazor/common/how-to/add-blazor-component-on-existing-aspnet-core-mvc-app.md index 0290fc1ef6..2a5af4df03 100644 --- a/blazor/common/how-to/add-blazor-component-on-existing-aspnet-core-mvc-app.md +++ b/blazor/common/how-to/add-blazor-component-on-existing-aspnet-core-mvc-app.md @@ -1,27 +1,27 @@ --- layout: post -title: Client Resources in Production Environment in Blazor - Syncfusion -description: Check out the documentation for Configure Syncfusion Blazor Client Resources in Production Environment in Blazor +title: Add a Blazor component to an existing ASP.NET Core MVC app | Syncfusion +description: Learn how to integrate a Syncfusion Blazor component into an existing ASP.NET Core MVC application using the component tag helper and explore to more details. platform: Blazor -component: Common +control: Common documentation: ug --- -# How to Add Blazor Component into Existing ASP.NET Core MVC Application +# Add a Blazor component to an existing ASP.NET Core MVC application -This section explains how to add Syncfusion® Blazor component on an existing ASP.NET Core MVC application. +This guide explains how to add a Syncfusion® Blazor component to an existing ASP.NET Core MVC application. -1. Open your existing ASP.NET Core MVC application on Visual Studio 2022. +1. Open the existing ASP.NET Core MVC application in Visual Studio 2022. -2. Right-click on the project and select `Manage NuGet Package`. +2. Right-click the project and select `Manage NuGet Packages`. ![Manage NuGet package on ASP.NET Core MVC app](images/asp-mvc-manage-nuget-package.png) -3. Search the `Syncfusion.Blazor.Grid` and `Syncfusion.Blazor.Themes` NuGet packages and install them. +3. Search for the `Syncfusion.Blazor.Grid` and `Syncfusion.Blazor.Themes` NuGet packages and install them. ![Installing Syncfusion Blazor Grid NuGet package](images/asp-mvc-install-nuget.png) -4. Register Blazor server service and Syncfusion® Blazor service in the `~/Program.cs` file. +4. Register Blazor Server and Syncfusion® Blazor services in the `~/Program.cs` file. ```c# using Syncfusion.Blazor; @@ -41,7 +41,7 @@ This section explains how to add Syncfusion®®` tag and Syncfusion® theme and script references inside the `` tag on `~/Views/Shared/_Layout.cshtml` file. +7. Add Blazor script references at the end of the `` tag and Syncfusion® theme and script references inside the `` tag in the `~/Views/Shared/_Layout.cshtml` file. ```cshtml @@ -73,9 +73,9 @@ This section explains how to add Syncfusion® ``` -8. Create a new folder `~/Components` at the root of application. Right-click on the `~/Components` folder and add a new razor component by `Add -> Razor Component`. +8. Create a new `~/Components` folder at the root of the application. Right-click the `~/Components` folder and add a new razor component via `Add -> Razor Component`. -9. Add the Syncfusion® Blazor component in the created razor file. +9. Add the Syncfusion® Blazor component in the created razor component file. ```cshtml @@ -112,7 +112,7 @@ This section explains how to add Syncfusion®® ``` -11. Run the application by pressing `F5` key. Now, the Syncfusion® Blazor Grid component will be rendered in the ASP.NET Core MVC application. +11. Run the application by pressing `F5`. The Syncfusion® Blazor Grid component is rendered in the ASP.NET Core MVC application. ![Syncfusion Blazor Grid component rendered on ASP.NET Core MVC application](images/asp-mvc-grid.png) ## See Also -* [Component Tag Helper in ASP.NET Core](https://learn.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/built-in/component-tag-helper?view=aspnetcore-7.0) -* [Integrating Blazor Components on Existing ASP.NET Core MVC apps](https://devblogs.microsoft.com/premier-developer/integrating-blazor-components-into-existing-asp-net-core-mvc-apps/) +* [Component Tag Helper in ASP.NET Core](https://learn.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/built-in/component-tag-helper) +* [Integrating Blazor components into existing ASP.NET Core MVC apps](https://devblogs.microsoft.com/premier-developer/integrating-blazor-components-into-existing-asp-net-core-mvc-apps/) diff --git a/blazor/common/how-to/add-blazor-component-to-the-toolbox.md b/blazor/common/how-to/add-blazor-component-to-the-toolbox.md index fb92846351..4bffcc612a 100644 --- a/blazor/common/how-to/add-blazor-component-to-the-toolbox.md +++ b/blazor/common/how-to/add-blazor-component-to-the-toolbox.md @@ -1,31 +1,32 @@ --- layout: post -title: Adding Blazor component to the toolbox - Syncfusion -description: Checkout and learn here all about the documentation for adding Syncfusion Blazor component to the toolbox in Blazor +title: Add Syncfusion Blazor components to the Toolbox | Syncfusion +description: Learn how to add the Syncfusion Blazor component snippets to the Visual Studio Toolbox in a Blazor project on Windows and explore here to more details. platform: Blazor -component: Common +control: Common documentation: ug --- -# How to add Syncfusion® Component to the toolbox in Blazor Application +# Add Syncfusion® Blazor components to the Visual Studio Toolbox -This section provides step-by-step guidance on how to add Syncfusion® Blazor components to the Visual Studio Toolbox. By default, the Toolbox displays HTML elements and Bootstrap snippets. To customize it for Blazor development, open the Toolbox by pressing `Ctrl + Alt + X` or by navigating to **View → Toolbox** from the top menu. +This guide explains how to add Syncfusion® Blazor component snippets to the Visual Studio Toolbox on Windows. By default, the Toolbox shows HTML elements and Bootstrap snippets. Open the Toolbox with Ctrl+Alt+X or navigate to **View → Toolbox**. To include Syncfusion® components for Blazor in the Toolbox, follow these steps: -1. Right-click anywhere within the Visual Studio Toolbox window, select **Add Tab** from the context menu. Enter a name for the new tab such as Syncfusion® Blazor Components and press Enter to create it. +1. Right-click anywhere within the Visual Studio Toolbox, select **Add Tab**, then name the tab (for example, "Syncfusion Blazor Components") and press Enter. ![Add new tab in toolbox](images/new-tab-toolbox.png) -2. In the code editor, **write or paste a Blazor component snippet**, such as the Syncfusion® SfCalendar. Once the code is in place, **select the entire code snippet**, then **drag and drop it** into the newly created tab in the Visual Studio Toolbox. +2. In the code editor, write or paste a Blazor component snippet (for example, the Syncfusion® `SfCalendar`). Select the entire snippet, then drag and drop it into the new tab in the Toolbox. ![Add code snippet to toolbox](images/add-snippet.gif) -3. Once the code snippet is added, the Toolbox will automatically assign it a default name based on the snippet content. -To improve clarity, right-click the item, select **Rename**, and enter a more descriptive name—such as **SfCalendar**. +3. After the snippet is added, the Toolbox assigns a default name. Right-click the item, select **Rename**, and enter a descriptive name (for example, "SfCalendar"). ![Update name](images/update-name.png) -4. After adding the component to the Toolbox, simply **drag the component from the Toolbox into your code editor** to seamlessly use it into your Blazor project. +4. Drag the component from the Toolbox into the code editor to insert the snippet into your Blazor project. + +N> Dragging a Toolbox item inserts code into the editor. Ensure required namespaces and services are present in the project (for example, `@using Syncfusion.Blazor` and registering Syncfusion services in Program.cs). ![Drag component to editor](images/drag-component.gif) diff --git a/blazor/common/how-to/render-blazor-server-app-in-ie.md b/blazor/common/how-to/render-blazor-server-app-in-ie.md index 232192b82c..3b52beb0c2 100644 --- a/blazor/common/how-to/render-blazor-server-app-in-ie.md +++ b/blazor/common/how-to/render-blazor-server-app-in-ie.md @@ -1,27 +1,27 @@ --- layout: post -title: Render the Blazor Server App in IE11 Browser in Blazor - Syncfusion -description: Learn here all about how to Render the Blazor Server App in IE11 Browser in Blazor component and more. +title: Render a Blazor Server app in IE11 | Syncfusion +description: Learn how to run a Blazor Server app in Internet Explorer 11 (IE11) using polyfills for legacy .NET Core 3.1 apps, and understand current browser support. platform: Blazor -component: Common +control: Common documentation: ug --- -# How to Render the Blazor Server Application in IE11 Web Browser +# Render a Blazor Server app in Internet Explorer 11 (IE11) -This section explains how to render the Blazor Server application in IE11 web browser. +This topic explains the historical guidance for running a Blazor Server app in Internet Explorer 11 (IE11). -## Blazor Client/WebAssembly App +## Blazor WebAssembly App -The Microsoft Internet Explorer doesn't support with `WebAssembly`. So, Blazor Client/WebAssembly application does not support with Internet Explorer web browser. +Internet Explorer does not support WebAssembly. Blazor WebAssembly apps do not run in IE11. ## Blazor Server App -The Microsoft Internet Explorer supports `Blazor Server` app with additional polyfills in .NET Core 3.1 apps. However, it is not support with .NET 5.0 or later versions. Refer to [Blazor updated browser support](https://learn.microsoft.com/en-us/aspnet/core/blazor/supported-platforms?view=aspnetcore-7.0) for more information. +IE11 can run Blazor Server Apps only when using .NET Core 3.1 with additional polyfills. IE11 is not supported for Blazor on .NET 5.0 or later. For current details, see [Blazor supported platforms and browsers](https://learn.microsoft.com/aspnet/core/blazor/supported-platforms). -Find the following steps to add the polyfills in the Blazor server application. +Follow these steps to add the polyfills for a .NET Core 3.1 Blazor Server app: -1. Create a Blazor server application using [Blazor Server Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. +1. Create a Blazor Server Application using the [Blazor Server getting started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) guide. 2. Add the polyfill script reference in the `` element of the `~/Pages/_Host.cshtml` page. @@ -36,13 +36,13 @@ Find the following steps to add the polyfills in the Blazor server application. ``` - N> This [polyfill](https://github.com/Daddoon/Blazor.Polyfill/releases/tag/3.0.8) is required to configure in Blazor server application for IE 11 support for .NET Core 3.1 app. +N> This [polyfill](https://github.com/Daddoon/Blazor.Polyfill/releases/tag/3.0.8) is required to configure in Blazor server application for IE 11 support for .NET Core 3.1 app. -3. Run the application in the IE 11 web browser and the Syncfusion® Blazor Component is now rendered on IE 11. +3. Run the application in IE11. The Syncfusion® Blazor component renders in IE11 when polyfills are correctly configured. ![Syncfusion component rendering on IE11](images/rendering-component-on-ie11.png) ## See Also -* [Blazor Updated Browser Support](https://learn.microsoft.com/en-us/dotnet/core/compatibility/aspnet-core/5.0/blazor-browser-support-updated) -* [Blazor Browser Support on .NET 7.0](https://learn.microsoft.com/en-us/aspnet/core/blazor/supported-platforms?view=aspnetcore-7.0) +* [Blazor supported platforms and browsers](https://learn.microsoft.com/en-us/aspnet/core/blazor/supported-platforms) +* [Blazor browser support updated (.NET 5)](https://learn.microsoft.com/en-us/dotnet/core/compatibility/aspnet-core/5.0/blazor-browser-support-updated) diff --git a/blazor/common/showcase-samples.md b/blazor/common/showcase-samples.md index ff2ec40de5..a69df65c7c 100644 --- a/blazor/common/showcase-samples.md +++ b/blazor/common/showcase-samples.md @@ -7,7 +7,7 @@ control: Common documentation: ug --- -# Syncfusion® Blazor components showcase samples +# Syncfusion® Blazor components showcase samples The following showcase applications demonstrate Syncfusion® Blazor components in real-world scenarios. From c786d252c3a7622552aff65257b6f5235a711319 Mon Sep 17 00:00:00 2001 From: Backiaraj Date: Tue, 7 Oct 2025 09:58:17 +0530 Subject: [PATCH 4/7] Cleared CI error --- blazor/common/content-security-policy.md | 2 +- .../add-blazor-component-on-existing-aspnet-core-mvc-app.md | 2 +- blazor/common/how-to/render-blazor-server-app-in-ie.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/blazor/common/content-security-policy.md b/blazor/common/content-security-policy.md index 547a8812f6..94c136eccb 100644 --- a/blazor/common/content-security-policy.md +++ b/blazor/common/content-security-policy.md @@ -7,7 +7,7 @@ control: Common documentation: ug --- -# Syncfusion® Blazor components with a strict Content Security Policy (CSP) +# Syncfusion® Blazor components with a strict Content Security Policy Content Security Policy (CSP) is a browser security feature that helps protect against cross-site scripting (XSS) and data injection by limiting the allowed sources for scripts, styles, images, fonts, and other resources. diff --git a/blazor/common/how-to/add-blazor-component-on-existing-aspnet-core-mvc-app.md b/blazor/common/how-to/add-blazor-component-on-existing-aspnet-core-mvc-app.md index 2a5af4df03..be0ad66b01 100644 --- a/blazor/common/how-to/add-blazor-component-on-existing-aspnet-core-mvc-app.md +++ b/blazor/common/how-to/add-blazor-component-on-existing-aspnet-core-mvc-app.md @@ -1,6 +1,6 @@ --- layout: post -title: Add a Blazor component to an existing ASP.NET Core MVC app | Syncfusion +title: Add Blazor component to an existing ASP.NET Core MVC App | Syncfusion description: Learn how to integrate a Syncfusion Blazor component into an existing ASP.NET Core MVC application using the component tag helper and explore to more details. platform: Blazor control: Common diff --git a/blazor/common/how-to/render-blazor-server-app-in-ie.md b/blazor/common/how-to/render-blazor-server-app-in-ie.md index 3b52beb0c2..56b137bd58 100644 --- a/blazor/common/how-to/render-blazor-server-app-in-ie.md +++ b/blazor/common/how-to/render-blazor-server-app-in-ie.md @@ -17,7 +17,7 @@ Internet Explorer does not support WebAssembly. Blazor WebAssembly apps do not r ## Blazor Server App -IE11 can run Blazor Server Apps only when using .NET Core 3.1 with additional polyfills. IE11 is not supported for Blazor on .NET 5.0 or later. For current details, see [Blazor supported platforms and browsers](https://learn.microsoft.com/aspnet/core/blazor/supported-platforms). +IE11 can run Blazor Server Apps only when using .NET Core 3.1 with additional polyfills. IE11 is not supported for Blazor on .NET 5.0 or later. For current details, see [Blazor supported platforms and browsers](https://learn.microsoft.com/en-us/aspnet/core/blazor/supported-platforms). Follow these steps to add the polyfills for a .NET Core 3.1 Blazor Server app: From 082de3588500a12bc3b2fc3ec4469006eaffee0c Mon Sep 17 00:00:00 2001 From: Backiaraj Date: Tue, 7 Oct 2025 18:52:29 +0530 Subject: [PATCH 5/7] Updated the Blazor common UG documentation --- .../optimize-performance-blazor-wasm.md | 40 +++++----- .../reduce-size-of-blazor-wasm.md | 26 +++--- .../common/extend-and-customize-components.md | 30 +++---- ...igure-blazor-component-in-bunit-testing.md | 80 +++++++++---------- .../create-blazor-webassembly-prerendering.md | 44 +++++----- .../common/how-to/port-blazor-server-maui.md | 49 ++++++------ blazor/common/how-to/troubleshoot.md | 18 ++--- ...syncfusion-components-to-18dot1-version.md | 24 +++--- ...syncfusion-components-to-latest-version.md | 37 ++++----- .../common/how-to/use-blazor-report-viewer.md | 16 ++-- 10 files changed, 182 insertions(+), 182 deletions(-) diff --git a/blazor/common/aot-compilation/optimize-performance-blazor-wasm.md b/blazor/common/aot-compilation/optimize-performance-blazor-wasm.md index 47383e55f2..1e89db81df 100644 --- a/blazor/common/aot-compilation/optimize-performance-blazor-wasm.md +++ b/blazor/common/aot-compilation/optimize-performance-blazor-wasm.md @@ -1,23 +1,25 @@ --- layout: post -title: Optimize Performance in Blazor WASM using AOT Compilation - Syncfusion -description: Check out the documentation for Optimize Performance using AOT Compilation in Blazor WebAssembly in Blazor +title: Optimize Blazor WebAssembly performance with AOT compilation - Syncfusion +description: Enable AOT compilation in Blazor WebAssembly to improve performance, understand trade-offs, and review size versus performance considerations and more details. platform: Blazor -component: Common +control: Common documentation: ug --- -# Optimize Performance in Blazor WebAssembly using AOT Compilation +# Optimize Blazor WebAssembly performance with AOT compilation -This article explains how to improve the performance of **Blazor WebAssembly (WASM)** applications using **Ahead-of-Time (AOT) compilation**, specifically for applications using **Syncfusion® Blazor components**. +This article explains how to improve the performance of Blazor WebAssembly (WASM) Apps using **Ahead-of-Time (AOT) compilation**, including apps that use Syncfusion® Blazor components. ## AOT Compilation Overview -Blazor WebAssembly applications run entirely in the browser via WebAssembly. By default, the app’s .NET assemblies are downloaded and executed using a **Just-In-Time (JIT)** interpreter. However, enabling **AOT compilation** ahead of time converts the .NET Intermediate Language (IL) into native WebAssembly at build time, resulting in significant performance gains. +Blazor WebAssembly Apps run entirely in the browser via WebAssembly. By default, the app’s .NET assemblies are downloaded and executed using a **Just-In-Time (JIT)** interpreter. Enabling AOT compilation converts .NET Intermediate Language (IL) into native WebAssembly at build time, which can provide significant performance gains. ## Enable AOT Compilation -Follow the steps below to configure AOT for your Blazor WASM project. +Follow these steps to configure AOT for a Blazor WebAssembly App. + +**Prerequisites:** Target .NET 8 or later and publish in Release configuration. ### Step 1: Target .NET 8+ @@ -62,7 +64,7 @@ bin/Release/net8.0/publish/wwwroot/ --- ## Size vs Performance Tradeoff -The following table compares performance and size metrics for Blazor WebAssembly with and without AOT, using a Syncfusion® Grid with paging enabled. +The following sample metrics compare performance and size for Blazor WebAssembly with and without AOT, using a Syncfusion® Grid with paging enabled. | Metric | Without AOT | With AOT | |----------------------------|----------------------|----------------------| @@ -71,32 +73,32 @@ The following table compares performance and size metrics for Blazor WebAssembly | Bundle Size (Brotli) | ~114 MB | ~192 MB | | Memory Usage | Slightly lower | Slightly higher | -> [AOT compilation](https://learn.microsoft.com/en-us/aspnet/core/blazor/webassembly-build-tools-and-aot?view=aspnetcore-9.0#ahead-of-time-aot-compilation) increases the application size but significantly improves load time, interactivity and overall runtime performance in Blazor WebAssembly applications. +> [AOT compilation](https://learn.microsoft.com/en-us/aspnet/core/blazor/webassembly-build-tools-and-aot#ahead-of-time-aot-compilation) increases app size but can significantly improve load time, interactivity, and overall runtime performance in Blazor WebAssembly apps. --- ## Limitations -- **Longer Build Time:** AOT compilation is slower compared to standard builds. -- **Increased Bundle Size:** Final WebAssembly size is larger. -- **Higher Memory Usage:** While AOT improves performance, it may result in slightly higher memory usage at runtime due to native code execution. -- **Reduced Flexibility:** Dynamic features (e.g., reflection) may require additional handling. -- **More Complex Debugging:** Source map support is limited. -- **Slower Iterations:** Any code change needs full rebuild, affecting dev productivity. +- **Longer build time:** compared to standard builds. +- **Increased bundle size:** Final WebAssembly size is larger. +- **Higher memory usage:** While AOT improves performance, it may result in slightly higher memory usage at runtime due to native code execution. +- **Reduced flexibility:** Dynamic features (e.g., reflection) may require additional handling. +- **More complex debugging:** Source map support is limited. +- **Slower iterations:** Any code change needs full rebuild, affecting dev productivity. --- ## Considerations -- **Better Performance:** Native WebAssembly improves execution speed and UI responsiveness. -- **Enhanced Security:** Native code is harder to reverse-engineer than Intermediate Language code. -- **Cross-Platform Consistency:** Consistent behavior across browsers and devices. +- **Better performance:** Native WebAssembly improves execution speed and UI responsiveness. +- **Enhanced security:** Native code is harder to reverse-engineer than Intermediate Language code. +- **Cross-platform consistency:** Consistent behavior across browsers and devices. --- ## Specific Recommendations -To further reduce published output size, [enable linker and trimming](https://learn.microsoft.com/en-us/dotnet/core/deploying/trimming/trimming-options#enable-trimming) options in your `.csproj`: +To further reduce published output size, [enable linker and trimming](https://learn.microsoft.com/en-us/dotnet/core/deploying/trimming/trimming-options#enable-trimming) options in the `.csproj`. ```xml true diff --git a/blazor/common/aot-compilation/reduce-size-of-blazor-wasm.md b/blazor/common/aot-compilation/reduce-size-of-blazor-wasm.md index 06f56342db..cea807be99 100644 --- a/blazor/common/aot-compilation/reduce-size-of-blazor-wasm.md +++ b/blazor/common/aot-compilation/reduce-size-of-blazor-wasm.md @@ -1,23 +1,23 @@ --- layout: post -title: Reduce Size of Blazor WebAssembly Application - Syncfusion -description: Check out the documentation for reduce size of blazor webassembly application in blazor using various techniques +title: Reduce size of Blazor WebAssembly Applications - Syncfusion +description: Learn here all about how to reduce Syncfusion Blazor WebAssembly (WASM) App size using trimming and linker configuration. Explore here to more details. platform: Blazor -component: Common +control: Common documentation: ug --- -# Reduce Size of Blazor WebAssembly Application +# Reduce size of Blazor WebAssembly Application -This article explains how to reduce the size of **Blazor WebAssembly (WASM)** applications. Although [Ahead-of-Time (AOT)](https://learn.microsoft.com/en-us/aspnet/core/blazor/webassembly-build-tools-and-aot?view=aspnetcore-9.0#ahead-of-time-aot-compilation) compilation improves performance, it also increases the app size. To help reduce this, you can enable code trimming options in our projects. Trimming automatically removes unused code from the final output, which helps lower the bundle size without affecting functionality. This is especially helpful when using large projects. +This article explains how to reduce the size of **Blazor WebAssembly (WASM)** applications. Although [Ahead-of-Time (AOT) compilation](https://learn.microsoft.com/en-us/aspnet/core/blazor/webassembly-build-tools-and-aot#ahead-of-time-aot-compilation) improves performance, it also increases app size. To reduce size, enable code trimming options in projects. Trimming removes unused code from the final output, helping lower the bundle size without affecting functionality. ## Configure the Linker for ASP.NET Core Blazor -Blazor WebAssembly uses [Intermediate Language (IL) linking](https://learn.microsoft.com/en-us/aspnet/core/blazor/webassembly-build-tools-and-aot?view=aspnetcore-9.0#trim-net-il-after-ahead-of-time-aot-compilation) to trim unused code from the final output during build. This process is **only enabled in Release builds** and is **disabled in Debug configuration** by default. To take full advantage of trimming and reduce the size of the published application, it is recommended to **build your app in Release mode** before deployment. +Blazor WebAssembly uses [Intermediate Language (IL) linking](https://learn.microsoft.com/en-us/aspnet/core/blazor/webassembly-build-tools-and-aot#trim-net-il-after-ahead-of-time-aot-compilation) to trim unused code from the final output during build. This process is only enabled in Release builds and is disabled in Debug by default. To take full advantage of trimming and reduce the size of the published app, publish in Release mode before deployment. > Always publish your Blazor WebAssembly app using the `Release` configuration to enable trimming and optimize performance. -### Disable Intermediate Language Linking (Optional) +### Disable Intermediate Language linking (optional) To manually disable Intermediate Language linking, add the following MSBuild property in your `.csproj` file: @@ -28,7 +28,7 @@ To manually disable Intermediate Language linking, add the following MSBuild pro ``` ## Enable trimming -**PublishTrimmed** property enables code trimming for self-contained publishing.It automatically disables features that aren’t compatible with trimming and provides warnings about trimming conflicts during build. +The **PublishTrimmed** property enables code trimming for self-contained publishing. It automatically disables features that are not compatible with trimming and provides warnings about trimming conflicts during build. To [enable trimming](https://learn.microsoft.com/en-us/dotnet/core/deploying/trimming/trimming-options#enable-trimming), add the following to your `.csproj` file: @@ -40,11 +40,11 @@ To [enable trimming](https://learn.microsoft.com/en-us/dotnet/core/deploying/tri ## Trim mode -For all assemblies in a Blazor application, trimming is enabled by default from the.NET 8 target framework. Trim warnings may cause problems for applications that have previously used `PublishTrimmed=true` and `TrimMode=partial`. However, if your application compiles without any trim warnings, this default behavior shouldn't interfere with functionality or cause issues. For more information, refer to the [trim configuration](https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/configure-trimmer?view=aspnetcore-9.0) documentation to achieve this. +For all assemblies in a Blazor application, trimming is enabled by default starting with the .NET 8 target framework. Trim warnings may occur for apps that previously used `PublishTrimmed=true` and `TrimMode=partial`. If the app compiles without trim warnings, this default behavior should not affect functionality. For more information, refer to the [trim configuration](https://learn.microsoft.com/aspnet/core/blazor/host-and-deploy/configure-trimmer) documentation. ### To Resolve trim warnings -Partial trimming is less aggressive and may be safer for applications that use reflection. To ensure smooth builds, resolve all trim warnings in our application, make the below changes in our `.csproj` to resolve the trim warnings +Partial trimming is less aggressive and may be safer for applications that use reflection. To ensure smooth builds, resolve all trim warnings in the application. If needed, make the following change in the `.csproj` file: ```xml partial @@ -52,9 +52,9 @@ Partial trimming is less aggressive and may be safer for applications that use r ## Enable Link Trimming -To control **Intermediate Language (IL)** trimming on a per-assembly basis by supplying an XML configuration file. This approach allows you to explicitly preserve assemblies, types, or members that may be trimmed, even if they are not directly referenced in your application code. +Control Intermediate Language (IL) trimming on a per-assembly basis by supplying an XML configuration file. This approach allows explicitly preserving assemblies, types, or members that may be trimmed, even if they are not directly referenced in application code. -To [enable Intermediate Language trimming](https://learn.microsoft.com/en-us/dotnet/core/deploying/trimming/prepare-libraries-for-trimming#enable-project-specific-trimming) in a Syncfusion® Blazor application, update the project file as shown below. This example demonstrates how to safely configure trimming using the Grid paging feature. +To [enable Intermediate Language trimming](https://learn.microsoft.com/en-us/dotnet/core/deploying/trimming/prepare-libraries-for-trimming#enable-project-specific-trimming) in a Syncfusion® Blazor application, update the project file as shown below. This example demonstrates how to configure trimming using the Grid paging feature. #### How to Enable Intermediate Language Trimming Safely for Syncfusion® Blazor Grid @@ -107,7 +107,7 @@ To [enable Intermediate Language trimming](https://learn.microsoft.com/en-us/dot ``` -3. Prevent Trimming of .NET Core Runtime Types. If your app uses reflection, LINQ expressions, or dynamic operations, consider including a LinkerConfig.xml to preserve critical system libraries. It is completely optional. +3. Prevent trimming of .NET runtime types. If the app uses reflection, LINQ expressions, or dynamic operations, consider including a LinkerConfig.xml to preserve critical system libraries (optional). ```xml diff --git a/blazor/common/extend-and-customize-components.md b/blazor/common/extend-and-customize-components.md index 30a41622ee..3f771ccc41 100644 --- a/blazor/common/extend-and-customize-components.md +++ b/blazor/common/extend-and-customize-components.md @@ -1,19 +1,19 @@ --- layout: post -title: Extend and Customize the Syncfusion Components in Blazor - Syncfusion -description: Checkout and learn here about how to extend, customize, and reuse the Syncfusion Components in Blazor +title: Extend and customize Syncfusion Blazor components - Syncfusion +description: Learn how to extend, compose, and reuse Syncfusion Blazor components, including dynamic rendering patterns. platform: Blazor -component: Common +control: Common documentation: ug --- # Extend, Customize, and Reuse Components -The Blazor framework provides the support to extend a component or customize it within another component for a strong composite model. +Blazor framework provides the support to extend a component or customize it within another component for a strong composite model. ## Extend Syncfusion® Blazor component -The Syncfusion® Blazor components can extend and customize the logic by creating a new Blazor component. +Syncfusion® Blazor components can be extended by creating a new Razor component and implementing custom logic. 1. Right-click on the `~/Pages` folder in the Visual Studio and select `Add -> Razor Component` to create a new Razor component (SyncButton.razor). @@ -82,11 +82,11 @@ The Syncfusion® Blazor components can exten ``` - ![Output of extending Syncfusion component](images/extend-sync-component.png) + ![Output of extending a Syncfusion Blazor component example](images/extend-sync-component.png) ## Use Syncfusion® Blazor component within another Blazor component -The Syncfusion® Blazor component can be implemented within another Blazor component. +A Syncfusion® Blazor component can be implemented within another Razor component. 1. Right-click on the `~/Pages` folder in the Visual Studio and select `Add -> Razor Component` to create a new Razor component (TodoList.razor). @@ -154,21 +154,21 @@ The Syncfusion® Blazor component can be imp ``` - ![Render Syncfusion Blazor components inside another Blazor component](images/todolist.gif) + ![Render Syncfusion Blazor components within another component (example)](images/todolist.gif) ## Render Syncfusion® Blazor component dynamically The following methods can be used to render the Syncfusion® Blazor components dynamically: -1. [RenderFragment](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.renderfragment?view=aspnetcore-8.0) with [Razor Template Syntax](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-8.0#razor-templates) -2. [RenderFragment](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.renderfragment?view=aspnetcore-8.0) with [RenderTreeBuilder](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.rendering.rendertreebuilder?view=aspnetcore-8.0) methods -3. [BuildRenderTree](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.componentbase.buildrendertree?view=aspnetcore-7.0) method +1. [RenderFragment](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.renderfragment) with [Razor template syntax](https://learn.microsoft.com/en-us/aspnet/core/blazor/components#razor-templates) +2. [RenderFragment](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.renderfragment) with [RenderTreeBuilder](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.rendering.rendertreebuilder) methods +3. [BuildRenderTree](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.componentbase.buildrendertree) method ### RenderFragment with Razor Syntax The `RenderFragment` represents the segments of UI content that can be reused in the view page based on the application logic. -You can use [Razor Template Syntax](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-8.0#razor-templates) to define the `RenderFragment` in the view page. +You can use [Razor template syntax](https://learn.microsoft.com/en-us/aspnet/core/blazor/components#razor-templates) to define the `RenderFragment` in the view page. The following code demonstrates the RenderFragment that renders the `SfButton` component. @@ -212,9 +212,9 @@ The following code demonstrates the RenderFragment that renders the `SfGrid` com ## RenderFragment with RenderTreeBuilder methods -You can define the RenderFragment delegate with [RenderTreeBuilder](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.rendering.rendertreebuilder?view=aspnetcore-8.0)'s methods. +You can define the RenderFragment delegate with [RenderTreeBuilder](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.rendering.rendertreebuilder) methods. -N> Refer to [Manual RenderTreeBuilder logic](https://learn.microsoft.com/en-us/aspnet/core/blazor/advanced-scenarios?view=aspnetcore-8.0#manual-rendertreebuilder-logic) to know more about RenderTreeBuilder. +N> Refer to [Manual RenderTreeBuilder logic](https://learn.microsoft.com/en-us/aspnet/core/blazor/advanced-scenarios#manual-rendertreebuilder-logic) to learn more about RenderTreeBuilder. ```cshtml @RenderSfButton() @@ -295,7 +295,7 @@ You can create a simple Blazor component with the `BuildRenderTree` method and g 1. Right-click on the `~/Pages` folder in the Visual Studio and select `Add -> Class` to create a new class file (SyncTextBox.cs). -2. Inherit the newly created class with [ComponentBase](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.componentbase?view=aspnetcore-7.0) and override the [BuildRenderTree](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.componentbase.buildrendertree?view=aspnetcore-7.0) method to create the component. +2. Inherit the newly created class with [ComponentBase](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.componentbase) and override the [BuildRenderTree](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.componentbase.buildrendertree) method to create the component. ```c# using Microsoft.AspNetCore.Components; diff --git a/blazor/common/how-to/configure-blazor-component-in-bunit-testing.md b/blazor/common/how-to/configure-blazor-component-in-bunit-testing.md index 2ff53b1761..f7b68b5e07 100644 --- a/blazor/common/how-to/configure-blazor-component-in-bunit-testing.md +++ b/blazor/common/how-to/configure-blazor-component-in-bunit-testing.md @@ -1,15 +1,15 @@ --- layout: post -title: Configure Syncfusion Blazor Components in bUnit Testing | Syncfusion -description: Checkout and learn here all about configuring syncfusion Blazor Components in bUnit Testing and much more. +title: Configure Syncfusion Blazor components in bUnit tests | Syncfusion +description: Learn how to configure Syncfusion Blazor components in bUnit using xUnit or NUnit, register required services, write unit tests and explore to more details. platform: Blazor -component: Common +control: Common documentation: ug --- -# How to Configure Syncfusion® Blazor Component in bUnit Testing +# How to configure Syncfusion® Blazor components in bUnit testing -This section explains how to configure Syncfusion® Blazor component in bUnit testing. +This section explains how to configure Syncfusion® Blazor components for unit testing with bUnit. ## Configure bUnit with xUnit Test Project @@ -17,37 +17,37 @@ This section explains how to configure Syncfusion® 1. Open Visual Studio 2022 and create a new `xUnit Test Project`. - ![xUnit project creation in VS 2022](images/bunit/xunit-project.png) + ![xUnit project creation dialog in Visual Studio 2022](images/bunit/xunit-project.png) 2. Specify the project name and click the `Next` button. - ![Specify xUnit project name in Blazor](images/bunit/xunit-project-name.png) + ![Specify the xUnit project name](images/bunit/xunit-project-name.png) -3. Select specific `Target Framework` and click the `Create` button. +3. Select the target framework and click the `Create` button. - ![Select target framework for xUnit project in Blazor](images/bunit/xunit-target-framework.png) + ![Select the target framework for the xUnit project](images/bunit/xunit-target-framework.png) -4. Right-click on the project in the Solution Explorer and select `Manage NuGet Package`. +4. Right-click the project in Solution Explorer and select `Manage NuGet Packages`. - ![Manage NuGet package on xUnit project](images/bunit/xunit-manage-nuget-package.png) + ![Open Manage NuGet Packages on the xUnit project](images/bunit/xunit-manage-nuget-package.png) -5. Search `bunit` and install both NuGet packages in the test project. +5. Search for `bunit` and install both NuGet packages in the test project. - ![Installing bunit NuGet package in Blazor](images/bunit/xunit-bunit-install.png) + ![Install the bUnit NuGet packages in the xUnit project](images/bunit/xunit-bunit-install.png) ### Add Existing Blazor App and Configure it on xUnit Project -1. Right-click on the Solution and select `Add -> Existing Project`. Browse and add your existing project from the local machine. +1. Right-click the solution and select `Add -> Existing Project`. Browse and add your existing Blazor project. - ![Add existing Blazor project](images/bunit/xunit-add-existing-project.png) + ![Add an existing Blazor project to the solution](images/bunit/xunit-add-existing-project.png) N> Refer to [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation, if you don't have any existing application. -2. Now, right-click on the xUnit project and select `Add -> Project Reference` and select the added project reference. +2. Right-click the xUnit project and select `Add -> Project Reference`, then select the added project. - ![Add existing project reference on xUnit project](images/bunit/xunit-add-project-reference.png) + ![Add a project reference to the xUnit project](images/bunit/xunit-add-project-reference.png) -3. Add the below Syncfusion® Button sample in `~/Pages/Home.razor or Index.razor` file on the Blazor project for testing purpose. You can test your Blazor component from your application instead of the below example component. +3. Add the following Syncfusion® Button sample to the `~/Pages/Home.razor` or `~/Pages/Index.razor` file in the Blazor project for testing purposes. You can test any Blazor component from your app instead of this example. ```cshtml @using Syncfusion.Blazor.Buttons @@ -159,47 +159,47 @@ This section explains how to configure Syncfusion® span.MarkupMatches("Count: 1"); ``` -5. Right-click on the xUnit project and select `Run Tests`. The test cases will run and report the output. +5. Right-click the xUnit project and select `Run Tests`. The test cases run and report the results. - ![xUnit test case result in Blazor](images/bunit/xunit-test-run.png) + ![xUnit test case results](images/bunit/xunit-test-run.png) ## Configure bUnit with NUnit Test Project ### Create NUnit Test Project -1. Open Visual Studio 2022 and create a new `NUnit 3 Text Project`. +1. Open Visual Studio 2022 and create a new `NUnit 3 Test Project`. - ![NUnit project creation in VS 2022](images/bunit/nunit-project.png) + ![NUnit project creation dialog in Visual Studio 2022](images/bunit/nunit-project.png) 2. Specify the project name and click the `Next` button. - ![Specify NUnit project name in Blazor](images/bunit/nunit-project-name.png) + ![Specify the NUnit project name](images/bunit/nunit-project-name.png) -3. Select specific `Target Framework` and click the `Create` button. +3. Select the target framework and click the `Create` button. - ![Select target framework for NUnit project in Blazor](images/bunit/nunit-target-framework.png) + ![Select the target framework for the NUnit project](images/bunit/nunit-target-framework.png) -4. Right-click on the project in the Solution Explorer and select `Manage NuGet Package`. +4. Right-click the project in Solution Explorer and select `Manage NuGet Packages`. - ![Manage NuGet package on NUnit project](images/bunit/nunit-manage-nuget-package.png) + ![Open Manage NuGet Packages on the NUnit project](images/bunit/nunit-manage-nuget-package.png) -5. Search `bunit` and install both NuGet packages in the test project. +5. Search for `bunit` and install both NuGet packages in the test project. - ![Installing bunit NuGet package](images/bunit/nunit-bunit-install.png) + ![Install the bUnit NuGet packages in the NUnit project](images/bunit/nunit-bunit-install.png) ### Add existing Blazor App and configure it on NUnit project -1. Right-click on the Solution and select `Add -> Existing Project`. Browse and add your existing project from the local machine. +1. Right-click the solution and select `Add -> Existing Project`. Browse and add your existing Blazor project. - ![Add existing Blazor project](images/bunit/nunit-add-existing-project.png) + ![Add an existing Blazor project to the solution](images/bunit/nunit-add-existing-project.png) N> Refer to [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation, if you don't have any existing application. -2. Now, right-click on the NUnit project and select `Add -> Project Reference` and select the added project reference. +2. Right-click the NUnit project and select `Add -> Project Reference`, then select the added project. - ![Add existing project reference on NUnit project](images/bunit/nunit-add-project-reference.png) + ![Add a project reference to the NUnit project](images/bunit/nunit-add-project-reference.png) -3. Add the below Syncfusion® Button sample in `~/Pages/Home.razor or Index.razor` file on the Blazor project for testing purpose. You can test your Blazor component from your application instead of the below example component. +3. Add the following Syncfusion® Button sample to the `~/Pages/Home.razor` or `~/Pages/Index.razor` file in the Blazor project for testing purposes. You can test any component from your app instead of this example. ```cshtml @using Syncfusion.Blazor.Buttons @@ -313,13 +313,13 @@ This section explains how to configure Syncfusion® span.MarkupMatches("Count: 1"); ``` -5. Right-click on the NUnit project and select `Run Tests`. The test cases will run and report the output. +5. Right-click the NUnit project and select `Run Tests`. The test cases run and report the results. - ![NUnit test case result in Blazor](images/bunit/nunit-test-run.png) + ![NUnit test case results](images/bunit/nunit-test-run.png) -## Passing Parameters to the Blazor Component Testing +## Passing parameters to the Blazor component during testing -You can set the Blazor component parameter using `SetParametersAndRender` method. +Set component parameters using the `SetParametersAndRender` method. ```c# using Microsoft.AspNetCore.Components; @@ -357,5 +357,5 @@ public void TestParameter() ## See Also -* [Create a new bUnit Test Project](https://bunit.dev/docs/getting-started/create-test-project.html?tabs=xunit) -* [Test components in ASP.NET Core Blazor](https://learn.microsoft.com/en-us/aspnet/core/blazor/test?view=aspnetcore-8.0) +* [Create a new bUnit test project](https://bunit.dev/docs/getting-started/create-test-project.html?tabs=xunit) +* [Test components in ASP.NET Core Blazor](https://learn.microsoft.com/en-us/aspnet/core/blazor/test) diff --git a/blazor/common/how-to/create-blazor-webassembly-prerendering.md b/blazor/common/how-to/create-blazor-webassembly-prerendering.md index e70da58060..727818da4c 100644 --- a/blazor/common/how-to/create-blazor-webassembly-prerendering.md +++ b/blazor/common/how-to/create-blazor-webassembly-prerendering.md @@ -1,19 +1,19 @@ --- layout: post -title: Create a Blazor WebAssembly Application with Prerendering | Syncfusion -description: Checkout and learn here all about creating a Blazor WebAssembly Application with Prerendering and much more. -platform: Blazor -component: Common +title: Create a Blazor WebAssembly App with prerendering | Syncfusion +description: Learn how to enable prerendering for a hosted Blazor WebAssembly app, resolve HttpClient issues, and configure routing. +platform: blazor +control: Common documentation: ug --- # How to Create a Blazor WebAssembly Application with Prerendering -This section explains how to enable prerendering to a Blazor WebAssembly application. +This section explains how to enable prerendering for a hosted Blazor WebAssembly application. ## Prerequisites -[.NET 7.0](https://dotnet.microsoft.com/en-us/download/dotnet/7.0) or later. +Install the [.NET SDK](https://dotnet.microsoft.com/en-us/download) (7.0 or later). ## Create a new project for Blazor WebAssembly ASP.NET Core Hosted application @@ -21,7 +21,7 @@ This section explains how to enable prerendering to a Blazor WebAssembly applica 2. Delete `~/wwwroot/index.html` file in the Client project. -3. Remove the below line from Client project's `~/Program.cs` file. +3. Remove the following line from the Client project's `~/Program.cs` file. ```c# // builder.RootComponents.Add("#app"); @@ -29,7 +29,7 @@ This section explains how to enable prerendering to a Blazor WebAssembly applica 4. Add `~/Pages/_Host.cshtml` file in the Server project. - ![Add Host.cshtml file in Server app](images/wasm-prerender-host-file.png) +![Add the _Host.cshtml file to the Server App](images/wasm-prerender-host-file.png) 5. Copy and paste the below code content in the `~/Server/Pages/_Host.cshtml` file. @@ -66,7 +66,7 @@ This section explains how to enable prerendering to a Blazor WebAssembly applica ``` -6. Open `Program.cs` file in the Server project and change endpoint of `MapFallbackToFile` configuration from `index.html` to `/_Host`. +6. Open the `Program.cs` file in the Server project and change the endpoint of the `MapFallbackToFile` configuration from `index.html` to `/_Host`. ```c# .... @@ -78,7 +78,7 @@ This section explains how to enable prerendering to a Blazor WebAssembly applica }); ``` -7. Add Syncfusion® Blazor service in the `~/Server/Program.cs` file. +7. Add the Syncfusion® Blazor service in the `~/Server/Program.cs` file. ```c# using Syncfusion.Blazor; @@ -87,17 +87,17 @@ This section explains how to enable prerendering to a Blazor WebAssembly applica ``` -8. If you don't inject and use `HttpClient` DI on your index page, you can run the application and the component will render in the web browser with prerendering mode. +8. If `HttpClient` is not injected and used on the index page, you can run the application and the component will render in the web browser with prerendering mode. - The created [Blazor WebAssembly ASP.NET Core Hosted application](../introduction#create-a-new-project-for-blazor-webassembly-aspnet-core-hosted-application) has injected the `HttpClient` DI and fetch the data from server for SfGrid component data source. So, refer to the next topic to resolve the `HttpClient` error on prerendering mode. + The created [Blazor WebAssembly ASP.NET Core Hosted application](../introduction#create-a-new-project-for-blazor-webassembly-aspnet-core-hosted-application) injects `HttpClient` to fetch data for the Grid component. Refer to the next section to resolve `HttpClient` errors during prerendering. ### Resolving HttpClient errors on WebAssembly prerendering -When the index page is injected with the `HttpClient` and tried to prerender on the server, the client will not establish its connection at that time. So, it will throw the runtime exceptions. +When the index page injects `HttpClient` and prerenders on the server, the client has not yet established a connection, which can result in runtime exceptions. E> ***InvalidOperationException***: An invalid request URI was provided. The request URI must either be an absolute URI or BaseAddress must be set. -The Syncfusion® Blazor service has registered the HttpClient service itself by default. When you run the `WebAssemblyPrerendered` mode application, it tries to get the WebAPI with its absolute URI or BaseAddress. +The Syncfusion® Blazor service registers the HttpClient by default. In `WebAssemblyPrerendered` mode, requests require an absolute URI or a configured BaseAddress. If you configure with absolute URI in the `~/Client/Pages/Index.razor` file, you will face another runtime error. @@ -112,9 +112,9 @@ E> ***SocketException***: An existing connection was forcibly closed by the remo ***IOException***: Unable to read data from the transport connection: An existing connection was forcibly closed by the remote host
***HttpRequestException***: An error occurred while sending the request. -We are trying to use HTTP from Server to get the fetch data. But, it is also not possible in the prerender mode because of the client is not yet established. +Fetching data over HTTP from the client is not possible during prerendering because the client has not initialized. -Refer to the below steps to resolve these issues and make the app running with HttpClient in the prerendering mode. +Follow these steps to resolve these issues and enable HttpClient usage during prerendering: 1. Create a public interface in the `~/Shared/WeatherForecast.cs` file on the Shared project to abstract the API call. @@ -154,7 +154,7 @@ Refer to the below steps to resolve these issues and make the app running with H } ``` -3. create a new class file with same class name on the Server project and inherit with the interface `IWeatherForecastService`. Here, the existing API `~/Server/Controller/WeatherForecastController.cs` data creation process moved into the override method `GetForecastAsync`. +3. Create a new class file with the same class name in the Server project and implement the `IWeatherForecastService` interface. Move the data creation logic from the existing API to the `GetForecastAsync` method. The existing controller is at `~/Server/Controllers/WeatherForecastController.cs`. ```c# using System; @@ -185,7 +185,7 @@ Refer to the below steps to resolve these issues and make the app running with H } ``` -4. Now, the API controller will have the below changes on `~/Server/Controller/WeatherForecastController.cs` file. +4. Update the API controller in the `~/Server/Controllers/WeatherForecastController.cs` file as follows. ```c# using System.Threading.Tasks; @@ -215,7 +215,7 @@ Refer to the below steps to resolve these issues and make the app running with H } ``` -5. Register the services in both Client and Server project `~/Program.cs`file. +5. Register the services in both the Client and Server project `~/Program.cs` files. ```c# .... @@ -245,9 +245,9 @@ Refer to the below steps to resolve these issues and make the app running with H } ``` -7. Run the application by pressing `F5` key. The Server prerendering will get the data from its local service, and when it renders on the Client, the HTTP Get request will be sent to get the data. +7. Run the application (for example, press `F5`). During server prerendering, data is provided by the server-side service; after client-side hydration, the client sends the HTTP GET request to retrieve data. ## See Also -* [Prerender on ASP.NET Core Razor Component](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/prerendering-and-integration?view=aspnetcore-7.0&pivots=webassembly) -* [Stateful Reconnection After Prerendering](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/lifecycle?view=aspnetcore-7.0#stateful-reconnection-after-prerendering) \ No newline at end of file +* [Prerender on ASP.NET Core Razor components](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/integration) +* [Stateful reconnection after prerendering](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/lifecycle#stateful-reconnection-after-prerendering) diff --git a/blazor/common/how-to/port-blazor-server-maui.md b/blazor/common/how-to/port-blazor-server-maui.md index 9393d003fa..4a390d41da 100644 --- a/blazor/common/how-to/port-blazor-server-maui.md +++ b/blazor/common/how-to/port-blazor-server-maui.md @@ -1,48 +1,45 @@ --- layout: post -title: Port Blazor Server Side App to MAUI Blazor Hybrid App | Syncfusion -description: Checkout and learn here all about porting Syncfusion Blazor Server App to .NET MAUI Blazor Hybrid App. +title: Port a Blazor Web App to a .NET MAUI Blazor Hybrid App | Syncfusion +description: Learn here about how to migrate a Blazor Web App to a .NET MAUI Blazor Hybrid app using a Razor Class Library (RCL) to reuse pages, assets, and services. platform: Blazor -component: Common +control: Common documentation: ug --- -# How to port Syncfusion® Blazor Web App to MAUI Blazor Hybrid App +# How to port Syncfusion® Blazor Web App to .NET MAUI Blazor Hybrid App -This section explains how to port Syncfusion® Blazor Web App to .NET MAUI Blazor Hybrid App using Razor Class Library (RCL). This way, you can avoid rewriting all your Blazor Web App pages for the .NET MAUI Blazor Hybrid App. +This guide explains how to migrate a Blazor Web App to a .NET MAUI Blazor Hybrid App by using a Razor Class Library (RCL) to share pages, layouts, assets, and services. This approach avoids rewriting Blazor Web App pages for the .NET MAUI Blazor Hybrid app. ## Prerequisites -[.NET 8.0](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or later. +Install the [.NET SDK 8.0](https://dotnet.microsoft.com/download) or later and Visual Studio 2022 with the .NET MAUI and ASP.NET and web development workloads. -## Create a new project for Blazor Server App +## Create a Blazor Web App -Create a new [Blazor Web App](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) with Syncfusion® `Blazor Calendar` component using [Visual Studio](https://visualstudio.microsoft.com/vs/). +Create a new [Blazor Web App](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) that uses the Syncfusion® Blazor Calendar component in [Visual Studio](https://visualstudio.microsoft.com/vs/). -### 1. Create MAUI Hybrid App in Visual Studio +### 1. Create a .NET MAUI Blazor Hybrid App in Visual Studio -Open Visual Studio and create a new project. Search for [.NET MAUI Blazor Hybrid App](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) template. -Name the project and create it. +Open Visual Studio and create a new project using the [.NET MAUI Blazor Hybrid App](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) template. Specify a project name and create the project. -### 2. Create Razor Class Library (RCL) +### 2. Create a Razor Class Library (RCL) -In the solution, add a new project using the [Razor Class Library](https://blazor.syncfusion.com/documentation/getting-started/razor-class-library) template in Visual Studio and ensure it targets .NET 8.0 to match both Blazor Web App and Blazor Maui Hybrid. +In the solution, add a new project using the [Razor Class Library](https://blazor.syncfusion.com/documentation/getting-started/razor-class-library) template in Visual Studio. Ensure it targets .NET 8.0 to match both the Blazor Web App and the .NET MAUI Blazor Hybrid App. -### 3. Migrate Static Assets, References, NuGet Packages, Razor Pages +### 3. Migrate static assets, references, NuGet packages, and Razor pages -Move all static assets (such as CSS, JavaScript, and images) from the Blazor Web App’s wwwroot folder to the Razor Class Library’s wwwroot directory. Then, update the asset references in the MAUI Hybrid App’s wwwroot/index.html to use the Razor Class Library’s assets via the _content/RazorClassLibrary/ path. +- Move all static assets (such as CSS, JavaScript, and images) from the Blazor Web App’s `wwwroot` folder to the Razor Class Library’s `wwwroot` directory. Then, update asset references in the .NET MAUI Blazor Hybrid App to use the RCL assets via the `_content/RazorClassLibrary/` path. +- Move Syncfusion® Blazor NuGet package references from the Blazor Web App `.csproj` to the RCL `.csproj`. +- Move `Components/Pages` and `Components/Layouts` to the Razor Class Library. Add the necessary namespaces in the RCL’s `_Imports.razor` file. -Move all Syncfusion® `Blazor NuGet packages` references from the Blazor web app's .csproj to the RCL's .csproj +![Folders to move into the RCL](images/server-folders.png) -Move Components/Pages ,Components/Layouts to the RazorClassLibrary and Add Include Necessary Namespace to _Imports.razor +### 4. Add project references and register services -![Folders to move](images/server-folders.png) +Add the Razor Class Library as a project reference in both the Blazor Web App and the .NET MAUI Blazor Hybrid App. Resolve any missing references or errors. After verifying the reference, remove folders such as `Components/Pages` and `Components/Layouts` from the .NET MAUI Blazor App to avoid duplication and keep the project structure clean. -### 4. Add Project Reference - -Afterward, add Razor Class Library project reference in both the Blazor Web App and the MAUI Blazor App. Resolve any missing references or errors that arise. Once completed, remove folders such as Components/Pages and Components/Layouts from the MAUI Blazor App to avoid duplication and maintain a clean project structure. - -Now, register the Syncfusion® Blazor service in the `MauiProgram.cs` file of your MAUI Blazor App. +Register the Syncfusion® Blazor service in the `MauiProgram.cs` file of the .NET MAUI Blazor App. {% tabs %} {% highlight C# tabtitle="~/MauiProgram.cs" hl_lines="1 3" %} @@ -55,10 +52,10 @@ Now, register the Syncfusion® Blazor servic {% endhighlight %} {% endtabs %} -Finally, update the _Imports.razor file to include the necessary namespaces from the Razor Class Library. Then, modify the Routes.razor file in the Blazor MAUI Hybrid app to set the DefaultLayout and AppAssembly to use the MainLayout component from the Razor Class Library +Finally, update the `_Imports.razor` file to include the necessary namespaces from the Razor Class Library. Then, modify the `Routes.razor` file in the Blazor MAUI Hybrid app to set the DefaultLayout and AppAssembly to use the `MainLayout` component from the Razor Class Library ### 5. Run the project - In the Visual Studio toolbar, select the **Windows Machine** button to build and run the app. +In the Visual Studio toolbar, select the target (for example, **Windows Machine**) to build and run the app. -![Build and run MAUI Blazor Hybrid App](images/windows-machine-mode.png) \ No newline at end of file +![Build and run the .NET MAUI Blazor Hybrid App](images/windows-machine-mode.png) \ No newline at end of file diff --git a/blazor/common/how-to/troubleshoot.md b/blazor/common/how-to/troubleshoot.md index b490a8089d..009a15f0cb 100644 --- a/blazor/common/how-to/troubleshoot.md +++ b/blazor/common/how-to/troubleshoot.md @@ -1,9 +1,9 @@ --- layout: post -title: How to troubleshoot server & client exceptions in Blazor | Syncfusion -description: Checkout and learn here all about troubleshooting server and client exceptions in Blazor and much more. +title: Troubleshoot server and client exceptions in Blazor | Syncfusion +description: Learn here about how to diagnose and resolve common server and client exceptions in Blazor, including runtime, compile-time, and browser console errors. platform: Blazor -component: Common +control: Common documentation: ug --- @@ -25,7 +25,7 @@ documentation: ug **Solution:** - You can register the `SyncfusionBlazorService` in `Program.cs` file to resolve the exception. + Register the `SyncfusionBlazorService` in the `Program.cs` file to resolve the exception. ```c# using Syncfusion.Blazor; @@ -50,7 +50,7 @@ documentation: ug Update your dotnet SDK/hosting bundle with the latest version in your production/hosting server machine. - Install the latest dotnet SDK/hosting bundle from [here](https://dotnet.microsoft.com/en-us/download/dotnet) in your hosting machine to resolve this. + Install the latest .NET SDK/hosting bundle from [here](https://dotnet.microsoft.com/en-us/download/dotnet) on the hosting machine to resolve this. * **The type name 'Shared' does not exist in the type 'SyncfusionBlazor'** @@ -111,7 +111,7 @@ documentation: ug **Solution** - The Syncfusion® Blazor library has changed its namespace, NuGet package name, component name from v18.1.0.36. Refer this [documentation](./upgrade-syncfusion-components-to-18.1.0.36-version#namespace-changes) to migrate your application with correct namespace. Example: `Syncfusion.EJ2.Blazor` is now modified as `Syncfusion.Blazor`. + The Syncfusion® Blazor library changed its namespace, NuGet package name, and component names starting with v18.1.0.36. Refer to this [documentation](../how-to/upgrade-syncfusion-components-to-18dot1-version#namespace-changes) to migrate the application with the correct namespace. Example: `Syncfusion.EJ2.Blazor` is now `Syncfusion.Blazor`. * **Found markup element with unexpected name 'Ejs'. If this is intended to be a component, add a @using directive for its namespace** @@ -125,7 +125,7 @@ documentation: ug **Solution** - The Syncfusion® Blazor library has changed its namespace, NuGet package name and component name from v18.1.0.36. Refer this [documentation](./upgrade-syncfusion-components-to-18.1.0.36-version#component-name-changes) to migrate your application with correct component name. Example: `EjsGrid` is now modified as `SfGrid`. + The Syncfusion® Blazor library changed its namespace, NuGet package name, and component names starting with v18.1.0.36. Refer to this [documentation](./upgrade-syncfusion-components-to-18.1.0.36-version#component-name-changes) to migrate the application with the correct component names. Example: `EjsGrid` is now `SfGrid`. ## Browser console errors @@ -203,9 +203,9 @@ documentation: ug | ------------- | ------------- | | `` | `app.UsePathBase("/myblazorapp");`| - N> The trailing slash is must for '_Host.cshtml' base path configuration. + N> The trailing slash is required for the '_Host.cshtml' base path configuration. - For further details, refer [Host and deploy ASP.NET Core Blazor](https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/?view=aspnetcore-7.0&tabs=visual-studio#app-base-path) topic. + For further details, refer to [Host and deploy ASP.NET Core Blazor](https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy#app-base-path). ## See also diff --git a/blazor/common/how-to/upgrade-syncfusion-components-to-18dot1-version.md b/blazor/common/how-to/upgrade-syncfusion-components-to-18dot1-version.md index ec5e7282cf..1a93c77f6a 100644 --- a/blazor/common/how-to/upgrade-syncfusion-components-to-18dot1-version.md +++ b/blazor/common/how-to/upgrade-syncfusion-components-to-18dot1-version.md @@ -1,21 +1,21 @@ --- layout: post title: Configure Syncfusion Blazor Client Resources in Production -description: Check out the documentation for Configure Syncfusion Blazor Client Resources in Production Environment in Blazor +description: Migrate a Blazor application from EJ2-based packages to Syncfusion Blazor 18.1.0.36, including NuGet, namespace, component prefix, resource, and DataManager changes. platform: Blazor -component: Common +control: Common documentation: ug --- -# How to upgrade Syncfusion® Blazor Components to 18.1.0.36 version +# How to upgrade Syncfusion® Blazor Components to 18.1.0.36 version -To upgrade Syncfusion® Blazor Components to 18.1.0.36 version, you need to check the following: +This guide explains the one-time migration required when upgrading from EJ2-based Syncfusion Blazor packages to version 18.1.0.36 and later. ## NuGet changes -Previous versions of the Syncfusion® Blazor NuGet package name is `Syncfusion.EJ2.Blazor`. From version 18.1.0.36, it will be `Syncfusion.Blazor`. Other Blazor packages will also have the same name changes. +In previous versions, the primary Syncfusion Blazor NuGet package name was `Syncfusion.EJ2.Blazor`. Starting with version 18.1.0.36, the package name is `Syncfusion.Blazor`. Other Blazor packages follow the same naming change. -For example, refer to the following table for changes in the Blazor packages name. +The following table shows example package ID changes: | Before 18.1.0.36 version | From 18.1.0.36 version | | ------------- | ------------- | @@ -27,7 +27,7 @@ For example, refer to the following table for changes in the Blazor packages nam ## Namespace changes -The previous version of Syncfusion® Blazor contains the namespace `Syncfusion.EJ2.Blazor` followed by component package names such as Buttons, Charts, Grids, and Inputs. After 18.1.0.36 version, this has been modified to `Syncfusion.Blazor` followed by its package name. Check the following table for examples. +Earlier versions used the root namespace `Syncfusion.EJ2.Blazor` followed by component package names such as Buttons, Charts, Grids, and Inputs. From version 18.1.0.36, the root namespace is `Syncfusion.Blazor` followed by the package name. The following table provides examples: | Before 18.1.0.36 version | From 18.1.0.36 version | | ------------- | ------------- | @@ -39,7 +39,7 @@ The previous version of Syncfusion® Blazor ## Component name changes -In the previous version, the component names are prefixed with Ejs (example: EjsGrid, EjsChart) which has been changed to the prefix Sf (example: SfGrid, SfChart). Check the following examples for your reference. +In earlier versions, component names were prefixed with Ejs (for example, EjsGrid, EjsChart). Starting with 18.1.0.36, the prefix is Sf (for example, SfGrid, SfChart). See the following examples: @@ -87,7 +87,7 @@ In the previous version, the component names are prefixed with Ejs (example: Ejs ## Resource changes -Till the previous version, you will be loading scripts `ej2.min.js` and `ejs-interop.min.js` manually in the application, which is not required from 18.1.0.36 version. The script will be loaded from NuGet through static web assets for the components loaded on the page. We have also provided styles as static web assets to load in the application. +In earlier versions, the application manually referenced the `ej2.min.js` and `ejs-interop.min.js` scripts. Starting with 18.1.0.36, scripts are loaded automatically via static web assets from the NuGet package for the components used on the page. Styles are also provided as static web assets to reference in the application.
@@ -129,11 +129,11 @@ Till the previous version, you will be loading scripts `ej2.min.js` and `ejs-int
-Still, you can load the resource from CRG by disabling default script loading from static web assets by passing arguments to `AddSyncfusionBlazor` service in the `~/Program.cs` file. +If needed, resources can be loaded from the Custom Resource Generator (CRG) by disabling default script loading from static web assets using options passed to the `AddSyncfusionBlazor` service in the `~/Program.cs` file. ## DataManager changes -In the previous version, Query's initialization was made as `new ej.data.Query()`. From version 18.0.1.36, it has been changed to `new sf.data.Query()`. Check the following table for examples. +In previous versions, Query initialization used `new ej.data.Query()`. From version 18.1.0.36, it uses `new sf.data.Query()`. See the following examples: @@ -191,4 +191,4 @@ In the previous version, Query's initialization was made as `new ej.data.Query()
-N> To downgrade the project from 18.1.0.36 version, you need to do the reverse process of the previous steps. \ No newline at end of file +N> To downgrade a project from version 18.1.0.36, reverse the steps outlined above. diff --git a/blazor/common/how-to/upgrade-syncfusion-components-to-latest-version.md b/blazor/common/how-to/upgrade-syncfusion-components-to-latest-version.md index 18ed4546b0..264acc4b62 100644 --- a/blazor/common/how-to/upgrade-syncfusion-components-to-latest-version.md +++ b/blazor/common/how-to/upgrade-syncfusion-components-to-latest-version.md @@ -1,62 +1,63 @@ --- layout: post -title: Upgrade Syncfusion Components to Latest Version in Blazor - Syncfusion -description: Check out the documentation for Upgrade Syncfusion Components to Latest Version in Blazor Application. +title: Upgrade Syncfusion Blazor components to the latest version +description: Learn how to upgrade Syncfusion Blazor components, verify .NET compatibility, and ensure correct CSS references and configuration for Blazor Web App, Server, WebAssembly. platform: Blazor -component: Common +control: Common documentation: ug --- -# How to upgrade Syncfusion® Blazor Components to the latest version +# Upgrade Syncfusion® Blazor components to the latest version -To upgrade Syncfusion® Blazor Components to the latest version, you need to ensure the following: +Use the following checklist to upgrade Syncfusion® Blazor components safely and consistently. ## Compatible .NET version -Syncfusion® Blazor components in the latest version `'{:nuget-version:}'` are compatible with the latest version of [.NET 8.0](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or [.NET 9.0](https://dotnet.microsoft.com/en-us/download/dotnet/9.0). Also, refer to [version compatibility](./version-compatibility) documentation for more information about version compatibility of Syncfusion® Blazor components and .NET Core SDK. +Syncfusion® Blazor components in the latest version `'{:nuget-version:}'` are compatible with the latest version of [.NET 8.0](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) or [.NET 9.0](https://dotnet.microsoft.com/en-us/download/dotnet/9.0). Also, refer to [version compatibility](./version-compatibility) documentation for more information about version compatibility of Syncfusion® Blazor components and .NET SDK. ## Client resource file references -Ensure your CSS files have been properly configured in your application. +Ensure CSS resources are correctly referenced in the application. -* Add the following style file reference in the **~/Components/App.razor** for Blazor Web app or add it in the **~/Pages/_Host.cshtml** for Blazor Server app or add it in the **~/wwwroot/index.html** for Blazor WebAssembly app. +* Add the following style reference in the appropriate file based on the hosting model: in **~/Components/App.razor** for Blazor Web App, in **~/Pages/_Host.cshtml** for Blazor Server App, or in **~/wwwroot/index.html** for Blazor WebAssembly App. - If you are using `Syncfusion.Blazor` NuGet package in your application, then use the below reference link. + If using the `Syncfusion.Blazor` NuGet package, include the following reference: ```html ``` - If you are using [individual NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) in your application, then use the below reference link. + If using [individual NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages), include the following reference: ```html ``` -N> For production purpose and minimal requirement, Syncfusion® provides an option to generate custom styles of selective components by using the ThemeStudio web application. Refer to this [link](https://ej2.syncfusion.com/themestudio/) for more details on ThemeStudio. +N> Use a single theme file that matches the chosen look and feel (for example, Bootstrap 5, Material, Tailwind, or Fluent). Replace the file name in the reference with the corresponding theme (for example, `bootstrap5.css`, `material.css`, `tailwind.css`, or `fluent.css`) when applicable. For production builds or minimal bundles, generate custom styles for selected components using the Theme Studio web application at the following link: https://ej2.syncfusion.com/themestudio/. ## Breaking changes -Some changes have been modified in our Blazor samples for each release. So, we suggest you to ensure the breaking changes. Refer to this [release notes](https://blazor.syncfusion.com/documentation/release-notes/index/?type=breaking-changes) for our Blazor components. +Review breaking changes for each release to understand required code or behavior updates. See the [release notes (breaking changes)](https://blazor.syncfusion.com/documentation/release-notes/index/?type=breaking-changes). ## Cache problem -Before restoring the NuGet packages, clean the older versions of Syncfusion® Blazor NuGet packages. +Before restoring NuGet packages, clear older versions of Syncfusion® Blazor NuGet packages to avoid conflicts. The following steps explain how to clean the cache: 1. Delete the Syncfusion® Blazor NuGet packages from the installed location `{System-driver}/Users/{user-name}/.nuget/packages/`. In Windows, the installed location of Syncfusion® Blazor NuGet packages can be found using `%userprofile%/.nuget/packages/`. +2. Update to the latest Syncfusion® Blazor NuGet packages. -2. Update the latest version of Syncfusion® Blazor NuGet packages. +Tip: The NuGet cache can also be cleared using the .NET CLI: run `dotnet nuget locals all --clear` in a terminal. ## Linker.xml configuration -In Blazor WebAssembly application, ensure if you have configured **Linker.xml** file in your Syncfusion® Blazor application. Missing this configuration may prevent the rendering of Syncfusion® Blazor components in the application. +For Blazor WebAssembly applications, ensure that a Linker.xml (trimming configuration) file is configured when required. Missing this configuration can prevent Syncfusion® Blazor components from rendering. -Refer to this [KB article](https://support.syncfusion.com/kb/article/12054/syncfusion-components-doesnt-render-in-blazor-webassembly-application) for more information on Linker.xml file usage. +Refer to this [KB article](https://support.syncfusion.com/kb/article/12054/syncfusion-components-doesnt-render-in-blazor-webassembly-application) for details on Linker.xml usage. -N> Linker.xml configuration is applicable only for the Blazor WebAssembly application. +N> Linker.xml configuration applies only to Blazor WebAssembly applications. ## See Also -* [Version Compatibility](./version-compatibility) +* [Version compatibility](../version-compatibility) diff --git a/blazor/common/how-to/use-blazor-report-viewer.md b/blazor/common/how-to/use-blazor-report-viewer.md index 15696279ba..9b29ce7a8a 100644 --- a/blazor/common/how-to/use-blazor-report-viewer.md +++ b/blazor/common/how-to/use-blazor-report-viewer.md @@ -1,16 +1,16 @@ --- layout: post -title: Blazor Client Resources in Production Environment - Syncfusion -description: Check out the documentation for Configure Syncfusion Blazor Client Resources in Production Environment in Blazor +title: Use the Blazor Report Viewer (Bold Reports) | Syncfusion +description: Learn here about how to use the Blazor Report Viewer from Bold Reports in Blazor WebAssembly (WASM) and Blazor Server Apps. Explore here to more details. platform: Blazor -component: Common +control: Common documentation: ug --- -# How to Use Syncfusion® Blazor ReportViewer +# How to use the Blazor Report Viewer (Bold Reports) -This section contains the references of how to use Syncfusion® ReportViewer in Blazor application. +The Blazor Report Viewer is provided through the Bold Reports product. Use the following resources to integrate the Report Viewer into Blazor applications. -* [How to Use Syncfusion® ReportViewer in Blazor WebAssembly Application](https://help.boldreports.com/embedded-reporting/javascript-reporting/report-viewer/how-to/use-javascript-reportviewer-in-blazor-web-assembly-application/) -* [How to Use Syncfusion® ReportViewer in Blazor Server Application](https://help.boldreports.com/embedded-reporting/javascript-reporting/report-viewer/how-to/use-javascript-reportviewer-in-blazor-server-application/) -* [Blazor Reporting Components](https://www.boldreports.com/blog/blazor-reporting-components) \ No newline at end of file +* [How to use the Bold Reports Report Viewer in a Blazor WebAssembly App](https://help.boldreports.com/embedded-reporting/javascript-reporting/report-viewer/how-to/use-javascript-reportviewer-in-blazor-web-assembly-application/) +* [How to use the Bold Reports Report Viewer in a Blazor Server App](https://help.boldreports.com/embedded-reporting/javascript-reporting/report-viewer/how-to/use-javascript-reportviewer-in-blazor-server-application/) +* [Learn about Blazor reporting components in Bold Reports](https://www.boldreports.com/blog/blazor-reporting-components) \ No newline at end of file From 563ef5d8fb425b48f7557b9dd61e67fddefb0c9b Mon Sep 17 00:00:00 2001 From: Backiaraj Date: Wed, 8 Oct 2025 11:13:20 +0530 Subject: [PATCH 6/7] Cleared CI error --- .../common/aot-compilation/optimize-performance-blazor-wasm.md | 2 +- blazor/common/extend-and-customize-components.md | 2 +- blazor/common/how-to/create-blazor-webassembly-prerendering.md | 2 +- blazor/common/how-to/port-blazor-server-maui.md | 2 +- .../how-to/upgrade-syncfusion-components-to-18dot1-version.md | 2 +- .../how-to/upgrade-syncfusion-components-to-latest-version.md | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/blazor/common/aot-compilation/optimize-performance-blazor-wasm.md b/blazor/common/aot-compilation/optimize-performance-blazor-wasm.md index 1e89db81df..1d2a3abada 100644 --- a/blazor/common/aot-compilation/optimize-performance-blazor-wasm.md +++ b/blazor/common/aot-compilation/optimize-performance-blazor-wasm.md @@ -1,6 +1,6 @@ --- layout: post -title: Optimize Blazor WebAssembly performance with AOT compilation - Syncfusion +title: Optimize Blazor WASM performance with AOT compilation - Syncfusion description: Enable AOT compilation in Blazor WebAssembly to improve performance, understand trade-offs, and review size versus performance considerations and more details. platform: Blazor control: Common diff --git a/blazor/common/extend-and-customize-components.md b/blazor/common/extend-and-customize-components.md index 3f771ccc41..2a331ccfd7 100644 --- a/blazor/common/extend-and-customize-components.md +++ b/blazor/common/extend-and-customize-components.md @@ -154,7 +154,7 @@ A Syncfusion® Blazor component can be imple ``` - ![Render Syncfusion Blazor components within another component (example)](images/todolist.gif) + ![Render Syncfusion Blazor components within another component](images/todolist.gif) ## Render Syncfusion® Blazor component dynamically diff --git a/blazor/common/how-to/create-blazor-webassembly-prerendering.md b/blazor/common/how-to/create-blazor-webassembly-prerendering.md index 727818da4c..b7b417494d 100644 --- a/blazor/common/how-to/create-blazor-webassembly-prerendering.md +++ b/blazor/common/how-to/create-blazor-webassembly-prerendering.md @@ -93,7 +93,7 @@ Install the [.NET SDK](https://dotnet.microsoft.com/en-us/download) (7.0 or late ### Resolving HttpClient errors on WebAssembly prerendering -When the index page injects `HttpClient` and prerenders on the server, the client has not yet established a connection, which can result in runtime exceptions. +When the index page injects `HttpClient` and prerender on the server, the client has not yet established a connection, which can result in runtime exceptions. E> ***InvalidOperationException***: An invalid request URI was provided. The request URI must either be an absolute URI or BaseAddress must be set. diff --git a/blazor/common/how-to/port-blazor-server-maui.md b/blazor/common/how-to/port-blazor-server-maui.md index 4a390d41da..66033d167b 100644 --- a/blazor/common/how-to/port-blazor-server-maui.md +++ b/blazor/common/how-to/port-blazor-server-maui.md @@ -13,7 +13,7 @@ This guide explains how to migrate a Blazor Web App to a .NET MAUI Blazor Hybrid ## Prerequisites -Install the [.NET SDK 8.0](https://dotnet.microsoft.com/download) or later and Visual Studio 2022 with the .NET MAUI and ASP.NET and web development workloads. +Install the [.NET SDK 8.0](https://dotnet.microsoft.com/en-us/download) or later and Visual Studio 2022 with the .NET MAUI and ASP.NET and web development workloads. ## Create a Blazor Web App diff --git a/blazor/common/how-to/upgrade-syncfusion-components-to-18dot1-version.md b/blazor/common/how-to/upgrade-syncfusion-components-to-18dot1-version.md index 1a93c77f6a..9ed7f5c65e 100644 --- a/blazor/common/how-to/upgrade-syncfusion-components-to-18dot1-version.md +++ b/blazor/common/how-to/upgrade-syncfusion-components-to-18dot1-version.md @@ -1,7 +1,7 @@ --- layout: post title: Configure Syncfusion Blazor Client Resources in Production -description: Migrate a Blazor application from EJ2-based packages to Syncfusion Blazor 18.1.0.36, including NuGet, namespace, component prefix, resource, and DataManager changes. +description: Migrate a Blazor application from EJ2-based package to Syncfusion Blazor 18.1.0.36, including NuGet, namespace, component prefix, resource, DataManager changes. platform: Blazor control: Common documentation: ug diff --git a/blazor/common/how-to/upgrade-syncfusion-components-to-latest-version.md b/blazor/common/how-to/upgrade-syncfusion-components-to-latest-version.md index 264acc4b62..e671006d4b 100644 --- a/blazor/common/how-to/upgrade-syncfusion-components-to-latest-version.md +++ b/blazor/common/how-to/upgrade-syncfusion-components-to-latest-version.md @@ -1,7 +1,7 @@ --- layout: post title: Upgrade Syncfusion Blazor components to the latest version -description: Learn how to upgrade Syncfusion Blazor components, verify .NET compatibility, and ensure correct CSS references and configuration for Blazor Web App, Server, WebAssembly. +description: Learn how to upgrade Syncfusion Blazor components, verify .NET compatibility, ensure correct CSS references and configuration for Blazor Web, Server, WASM App. platform: Blazor control: Common documentation: ug From c82d4e8d7c4441e376cd12229ca67f4f2d058304 Mon Sep 17 00:00:00 2001 From: Backiaraj Date: Thu, 9 Oct 2025 10:17:02 +0530 Subject: [PATCH 7/7] Cleared CI error --- blazor/common/aot-compilation/reduce-size-of-blazor-wasm.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/common/aot-compilation/reduce-size-of-blazor-wasm.md b/blazor/common/aot-compilation/reduce-size-of-blazor-wasm.md index cea807be99..3e0a8b37ae 100644 --- a/blazor/common/aot-compilation/reduce-size-of-blazor-wasm.md +++ b/blazor/common/aot-compilation/reduce-size-of-blazor-wasm.md @@ -40,7 +40,7 @@ To [enable trimming](https://learn.microsoft.com/en-us/dotnet/core/deploying/tri ## Trim mode -For all assemblies in a Blazor application, trimming is enabled by default starting with the .NET 8 target framework. Trim warnings may occur for apps that previously used `PublishTrimmed=true` and `TrimMode=partial`. If the app compiles without trim warnings, this default behavior should not affect functionality. For more information, refer to the [trim configuration](https://learn.microsoft.com/aspnet/core/blazor/host-and-deploy/configure-trimmer) documentation. +For all assemblies in a Blazor application, trimming is enabled by default starting with the .NET 8 target framework. Trim warnings may occur for apps that previously used `PublishTrimmed=true` and `TrimMode=partial`. If the app compiles without trim warnings, this default behavior should not affect functionality. For more information, refer to the [trim configuration](https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/configure-trimmer) documentation. ### To Resolve trim warnings