diff --git a/blazor/ai-coding-assistant/mcp-server.md b/blazor/ai-coding-assistant/mcp-server.md index 5062680f78..81218249d1 100644 --- a/blazor/ai-coding-assistant/mcp-server.md +++ b/blazor/ai-coding-assistant/mcp-server.md @@ -1,19 +1,19 @@ --- layout: post -title: SyncfusionBlazorAssistant MCP Server | Syncfusion -description: Learn how to configure and use SyncfusionBlazorAssistant MCP server for intelligent code generation, documentation, and troubleshooting in Blazor apps. +title: SyncfusionBlazorAssistant MCP server | Syncfusion +description: Learn how to configure and use SyncfusionBlazorAssistant MCP server for intelligent code generation, documentation, and troubleshooting in Blazor applications. control: Getting started with SyncfusionBlazorAssistant MCP Server platform: Blazor documentation: ug --- -# SyncfusionBlazorAssistant MCP Server +# SyncfusionBlazorAssistant MCP server ## Overview -The [SyncfusionBlazorAssistant](https://www.npmjs.com/package/@syncfusion/blazor-assistant) is a specialized [Model Context Protocol (MCP)](https://modelcontextprotocol.io/docs/getting-started/intro) server that provides intelligent assistance for developers using Syncfusion's Blazor component libraries. This tool seamlessly integrates with compatible [MCP clients](https://modelcontextprotocol.io/clients) to enhance your development workflow when building Blazor applications with Syncfusion® components. +The [SyncfusionBlazorAssistant](https://www.npmjs.com/package/@syncfusion/blazor-assistant) is a specialized [Model Context Protocol (MCP)](https://modelcontextprotocol.io/docs/getting-started/intro) server that provides intelligent assistance for developers using Syncfusion Blazor component libraries. This tool seamlessly integrates with compatible [MCP clients](https://modelcontextprotocol.io/clients) to enhance your development workflow when building Blazor applications with Syncfusion® components. -### Key Benefits +### Key benefits * Intelligent code generation for Syncfusion® Blazor components. * Detailed component documentation and usage examples. @@ -23,15 +23,15 @@ The [SyncfusionBlazorAssistant](https://www.npmjs.com/package/@syncfusion/blazor Before using [SyncfusionBlazorAssistant](https://www.npmjs.com/package/@syncfusion/blazor-assistant), ensure you have: -* Required [node](https://nodejs.org/en/) version >= 18 -* A [compatible MCP client](https://modelcontextprotocol.io/clients) (Visual Studio Code with GitHub Copilot, [Syncfusion® CodeStudio](https://www.syncfusion.com/code-studio/), etc.) +* Required [Node.js](https://nodejs.org/en/) version >= 18 +* A [compatible MCP client](https://modelcontextprotocol.io/clients) (Visual Studio Code with GitHub Copilot, [Syncfusion® Code Studio](https://www.syncfusion.com/code-studio/), etc.) * An active Syncfusion® license (any of the following): - [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense) - [Free Community License](https://www.syncfusion.com/products/communitylicense) - [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials) -* An active [API KEY](https://syncfusion.com/account/api-key) +* An active [API key](https://www.syncfusion.com/account/api-key) -## Unlimited Access +## Unlimited access Syncfusion® offers unlimited access to this MCP server. There are no restrictions on: @@ -46,7 +46,7 @@ This ensures users can fully leverage Syncfusion® Before you can invoke the `SyncfusionBlazorAssistant` MCP server, you need to configure your MCP client with these core settings. The **Generic MCP Server Settings** shown below are identical across all clients: -### Generic MCP Server Settings +### Generic MCP server settings - **npm package name**: `@syncfusion/blazor-assistant` - **Type**: stdio (standard input/output transport) @@ -54,7 +54,7 @@ Before you can invoke the `SyncfusionBlazorAssistant` MCP server, you need to co - **Arguments**: -y - **Server name**: syncfusionBlazorAssistant -You need to add your [Syncfusion API key](https://syncfusion.com/account/api-key) as an env parameter in the configuration file: +You need to add your [Syncfusion API key](https://www.syncfusion.com/account/api-key) as an env parameter in the configuration file: ```json "env": { @@ -93,7 +93,7 @@ Below are setup instructions for popular MCP clients: } ``` -* After updating the configuration in settings.json, you'll notice a "Start" option at the top of the config. This allows you to easily start the [SyncfusionBlazorAssistant](https://www.npmjs.com/package/@syncfusion/blazor-assistant) server directly from the settings interface without additional commands. +* After updating the configuration in mcp.json, you'll notice a "Start" option at the top of the config. This allows you to easily start the [SyncfusionBlazorAssistant](https://www.npmjs.com/package/@syncfusion/blazor-assistant) server directly from the settings interface without additional commands. * Confirm the server is active by checking for a message like: `SyncfusionBlazorAssistant is running...` in the output. @@ -176,7 +176,7 @@ For more details, refer to the [Cursor documentation](https://cursor.com/docs/co For further assistance, see the [JetBrains documentation](https://www.jetbrains.com/help/ai-assistant/mcp.html#connect-to-an-mcp-server). -> For more detailed information about configuring MCP servers in various clients, refer to the official documentations, e.g., [Windsurf](https://docs.windsurf.com/windsurf/cascade/mcp#mcp-config-json) +> For more detailed information about configuring MCP servers in various clients, refer to the official documentation, e.g., [Windsurf](https://docs.windsurf.com/windsurf/cascade/mcp#mcp-config-json) ## Usage @@ -199,7 +199,7 @@ To activate the SyncfusionBlazorAssistant MCP server: Syncfusion® MCP Servers provide full access to all AI interaction modes — Ask/Chat, Edit, and Agent — across supported MCP clients. -### Best Practices for Effective Usage +### Best practices for effective usage 1. `Be specific`: Mention both platform and component (e.g., "How do I create a Syncfusion Blazor Grid with paging and filtering?"). 2. `Provide context`: Include details about your use case for more targeted solutions. @@ -225,7 +225,7 @@ If you encounter issues: ## Support -Product support is available through the following mediums. +Product support is available through the following channels. * [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours \| Unlimited tickets \| Holiday support * [Community forum](https://www.syncfusion.com/forums/blazor-components) @@ -234,4 +234,4 @@ Product support is available through the following mediums. ## See also -* [Syncfusion Blazor Documentation](https://blazor.syncfusion.com/documentation) \ No newline at end of file +* [Syncfusion Blazor documentation](https://blazor.syncfusion.com/documentation) diff --git a/blazor/ai-coding-assistant/overview.md b/blazor/ai-coding-assistant/overview.md index cc9913fcb7..2dcc8fdc04 100644 --- a/blazor/ai-coding-assistant/overview.md +++ b/blazor/ai-coding-assistant/overview.md @@ -1,36 +1,36 @@ --- layout: post -title: Syncfusion AI Coding Assistant Overview | Syncfusion -description: Learn how Syncfusion AI Coding Assistant boost Blazor productivity by generating accurate code snippets, configuration examples, and contextual guidance. +title: Syncfusion AI Coding Assistant overview | Syncfusion +description: Learn how the Syncfusion AI Coding Assistant boosts Blazor productivity by generating accurate code snippets, configuration examples, and contextual guidance. control: Syncfusion AI Coding Assistant Overview platform: Blazor documentation: ug --- -# Syncfusion® AI Coding Assistant Overview +# Syncfusion® AI Coding Assistant overview -The **Syncfusion® AI Coding Assistant** are designed to streamline your development workflow when building Blazor applications with Syncfusion® components. It uses contextual knowledge of the Syncfusion® component library to generate accurate code snippets, configuration examples, and guided explanations—minimizing documentation searches and maximizing productivity. +The **Syncfusion® AI Coding Assistant** is designed to streamline development when building Blazor applications with Syncfusion® components. It uses contextual knowledge of the Syncfusion® component library to generate accurate code snippets, configuration examples, and guided explanations—minimizing documentation searches and maximizing productivity. -AI Coding Assistant: +AI Coding Assistants: -* **The SyncfusionBlazorAssistant MCP Server** - Processes advanced prompts and returns tailored code suggestions via [MCP-compatible clients](https://modelcontextprotocol.io/clients). +* **SyncfusionBlazorAssistant MCP server** + Processes prompts and returns tailored code suggestions through [MCP-compatible clients](https://modelcontextprotocol.io/clients). -## Getting Started +## Getting started -To use the AI Coding Assistant, you need: +To use the AI Coding Assistant, the following are required: * A [Syncfusion® user account](https://www.syncfusion.com/account) * An active Syncfusion® license (any of the following): - [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense) - [Free Community License](https://www.syncfusion.com/products/communitylicense) - [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials) -* An active [API KEY](https://syncfusion.com/account/api-key) +* An active [API key](https://www.syncfusion.com/account/api-key) * A [Blazor application that includes SyncfusionBlazor](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) -## Unlimited Access +## Unlimited access -Syncfusion® offers unlimited access to the AI Coding Assistant, with no limitations on: +Syncfusion® offers unlimited access to the AI Coding Assistant with no limitations on: * Number of requests * Components usage @@ -39,12 +39,14 @@ Syncfusion® offers unlimited access to the This ensures users can fully leverage Syncfusion® components to enhance their development experience without limitations. -## Best Practices +## Best practices * Initial Setup: Use the tools to quickly add and configure Syncfusion® components in your Blazor application. * Feature Tuning: Enable or disable component features through prompt-based configuration for tailored functionality. * Data Binding: Generate sample data for testing and prototyping. Avoid using sensitive or production data to ensure security. -* Step-by-step explanations: Use annotated code to understand component behavior. Note that the level of detail may vary depending on the tool, mode, and AI model used. Refer to the [Syncfusion® Blazor Documentation](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) for in-depth information. +* Step-by-step explanations: Use annotated code to understand component behavior. The level of detail may vary based on the tool, mode, and AI model. Refer to the [Syncfusion® Blazor documentation](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) for in-depth information. +* Troubleshooting: Resolve common issues with AI-generated suggestions. For complex problems, see the [documentation](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) or contact [support](https://support.syncfusion.com/support/tickets/create). + * Troubleshooting: Resolve common issues with AI-generated suggestions. For complex problems, refer to [documentation](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) or [support](https://support.syncfusion.com/support/tickets/create). > Always check AI-generated content and code for accuracy before using it. @@ -52,18 +54,18 @@ This ensures users can fully leverage Syncfusion® ## Recommendations * Session Management: Start new sessions when switching tasks to ensure prompt relevance and maintain content focus. -* Model Compatibility: For optimal performance, use the tools with advanced AI models such as GPT-5 or Claude Sonnet 4. +* Model compatibility: For optimal performance, use the tools with advanced AI models such as GPT-5 or Claude Sonnet 4. -## Privacy & Data Handling +## Privacy and data handling The Syncfusion® AI Coding Assistant is designed with privacy in mind: * The tools do not access your project files or workspace directly. * User prompts are not stored by any of the tools or used for any other purpose. * Prompts are not used to train Syncfusion® models. -* The assistant generates context, while the final output is handled by your selected AI model. +* The assistant provides context, while the final output is generated by the AI model selected in your client. ## See also -* Add the [SyncfusionBlazorAssistant MCP Server](https://blazor.syncfusion.com/documentation/ai-coding-assistant/mcp-server) to an MCP-enabled client -* [Syncfusion® Blazor Documentation](https://blazor.syncfusion.com/documentation) +* Add the [SyncfusionBlazorAssistant MCP server](https://blazor.syncfusion.com/documentation/ai-coding-assistant/mcp-server) to an MCP-enabled client +* [Syncfusion® Blazor documentation](https://blazor.syncfusion.com/documentation) diff --git a/blazor/getting-started/blazor-electron-app.md b/blazor/getting-started/blazor-electron-app.md index b9c5a50b07..7b4a0a3e0c 100644 --- a/blazor/getting-started/blazor-electron-app.md +++ b/blazor/getting-started/blazor-electron-app.md @@ -9,25 +9,25 @@ documentation: ug # Creating Desktop Application using Blazor and Electron -This section explains how to create and run desktop applications using Blazor and Electron Framework with Syncfusion® Blazor components. +This section explains how to create and run a desktop application by using Blazor and the Electron.NET framework with Syncfusion® Blazor components. ## What is Electron? -[Electron](https://www.electronjs.org/) framework for building cross-platform desktop applications with web technologies. It utilizes `Node.js` and the `Chromium` rendering engine to run a web application on a desktop shell. +[Electron](https://www.electronjs.org/) is a framework for building cross-platform desktop applications with web technologies. It utilizes `Node.js` and the `Chromium` rendering engine to run a web application in a desktop shell. ## Create a Blazor server-side application -You can create Blazor Server application using either CLI or Visual Studio referring the below links +Create a Blazor Server application by using either the CLI or Visual Studio: -* [Create Blazor server application using CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +* [Create a Blazor Server application by using the CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) -* [Create Blazor Server application using Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) +* [Create a Blazor Server application by using Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -N> This setup does not work with Target Frameworks greater than .NET 6. For more details and troubleshooting, refer to this [GitHub thread](https://github.com/ElectronNET/Electron.NET/issues/837#issuecomment-1985434060). +N> This setup does not work with target frameworks greater than .NET 6. For details and troubleshooting, see this [GitHub thread](https://github.com/ElectronNET/Electron.NET/issues/837#issuecomment-1985434060). ## Configure Electron in Blazor App -You can run the below commands either in **Visual Studio Developer Command Prompt** or **CLI** based on the tool you are using for development. +Run the following commands in either the **Visual Studio Developer Command Prompt** or a **command-line interface (CLI)** based on the development environment. 1.Install [ElectronNET.API](https://www.nuget.org/packages/ElectronNET.API/) NuGet package in the application. @@ -35,13 +35,13 @@ You can run the below commands either in **Visual Studio Developer Command Promp dotnet add package ElectronNET.API ``` -2.Create a local .NET tool manifest file by running the following command. This will create a manifest file in the **~/.config/dotnet-tools.json** location. +2.Create a local .NET tool manifest file by running the following command. This creates a manifest file at **~/.config/dotnet-tools.json** in the current project. ``` dotnet new tool-manifest ``` -![.NET tool manifest file](images\electron\net-tool-manifest.png) +![.NET tool manifest file](images/electron/net-tool-manifest.png) 3.Install the tool locally in the project by running the below command. @@ -49,14 +49,14 @@ dotnet new tool-manifest dotnet tool install ElectronNET.CLI ``` -![Electron NET CLI](images\electron\net-cli.png) +![Electron.NET CLI installation](images/electron/net-cli.png) 4.Run the below command to configure Electron.NET manifest tool and update the launch profile of the application. ``` dotnet electronize init ``` -![Update launch profile](images\electron\update-launch-profile.png) +![Update launch profile for Electron.NET](images/electron/update-launch-profile.png) 5.To integrate `Electron.NET` in the application add the below code in **~/Program.cs** file of the application. @@ -113,9 +113,9 @@ var app = builder.Build(); dotnet electronize start ``` -![Electron app output](images\electron\electron-grid-output.png) +![Electron app output](images/electron/electron-grid-output.png) -N> To close the electron app when closed the electron window add the below code in **//Open the Electron-Window** in step 6 in the **~/Program.cs** file of .NET 6 application. +N> To close the Electron app when the Electron window is closed, add the following code under **// Open the Electron-Window** in step 6 in the **~/Program.cs** file of a .NET 6 application. {% tabs %} {% highlight c# tabtitle=".NET 6 (~/Program.cs)" hl_lines="14 15 16" %} @@ -145,7 +145,7 @@ var app = builder.Build(); {% endhighlight %} {% endtabs %} -8.Run the below command lines to do production builds based on platform +8.Run the following commands to create production builds for each platform. ``` dotnet electronize build /target win @@ -153,4 +153,4 @@ dotnet electronize build /target osx dotnet electronize build /target linux ``` -N> [View the complete Blazor Server electron application with Syncfusion® controls on GitHub](https://github.com/SyncfusionExamples/blazor-electron-app) +N> [View the complete Blazor Server Electron application with Syncfusion® components on GitHub](https://github.com/SyncfusionExamples/blazor-electron-app) diff --git a/blazor/getting-started/blazor-server-side-visual-studio.md b/blazor/getting-started/blazor-server-side-visual-studio.md index e7f9ed505c..b09472a1ca 100644 --- a/blazor/getting-started/blazor-server-side-visual-studio.md +++ b/blazor/getting-started/blazor-server-side-visual-studio.md @@ -9,17 +9,17 @@ documentation: ug # Getting Started with Blazor Server App -This article provides a step-by-step instructions for building Blazor Server App with `Blazor DataGrid` component using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/) and [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This article provides step-by-step instructions for building a Blazor Server App with the `Blazor DataGrid` component using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). ## Using Playground -[Blazor Playground](https://blazor.syncfusion.com/documentation/common/playground/getting-started) allows you to interact with our Blazor components directly in your web browser without need to install any required NuGet packages. By default, the `Syncfusion.Blazor` package is included in this. +[Blazor Playground](https://blazor.syncfusion.com/documentation/common/playground/getting-started) allows interaction with Syncfusion Blazor components directly in a web browser without needing to install any NuGet packages. By default, the `Syncfusion.Blazor` package is included. {% playground "https://blazorplayground.syncfusion.com/" %} ## Manually Creating a Project -This section provides a brief explanation on how to manually create a Blazor Server App using Visual Studio, Visual Studio Code and .NET CLI. +This section provides a brief guide on how to manually create a Blazor Server App using Visual Studio, Visual Studio Code, and the .NET CLI. {% tabcontents %} @@ -31,17 +31,17 @@ This section provides a brief explanation on how to manually create a Blazor Ser ### Create a new Blazor Server App in Visual Studio -You can create a **Blazor Server App** using **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +You can create a **Blazor Server App** by using the **Blazor Web App** template in Visual Studio via the [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs) or the [Syncfusion® Blazor extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ![Blazor Server App Creation Template](images/Blazor-server-app-creation.png) -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs) while creating a Blazor Server Application. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs) when creating a Blazor Server App. ![Blazor Server App with Interactive Mode](images/blazor-app-interactive-mode.png) ### Install Syncfusion® Blazor Grid and Themes NuGet in the App -Here's an example of how to add **Blazor DataGrid** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor DataGrid** component to the app, open NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search for and install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -52,7 +52,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available package list with component details. {% endtabcontent %} @@ -66,7 +66,7 @@ N> Syncfusion® Blazor components are availa You can create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can create a Server application using the following command in the terminal(Ctrl+`). +Alternatively, create a Server application by using the following commands in the integrated terminal (Ctrl+`). {% tabs %} {% highlight c# tabtitle="Blazor Server App" %} @@ -77,13 +77,13 @@ cd BlazorApp {% endhighlight %} {% endtabs %} -This command creates new Blazor Server App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. +This command creates a new Blazor Server App and places it in a new directory called `BlazorApp` inside the current location. See [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and the [dotnet new command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) for more details. ### Install Syncfusion® Blazor Grid and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Run the following commands to install the [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed. {% tabs %} {% highlight c# tabtitle="Package Manager" %} @@ -95,7 +95,7 @@ dotnet restore {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available package list with component details. {% endtabcontent %} @@ -103,7 +103,7 @@ N> Syncfusion® Blazor components are availa ### Prerequisites -Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the SDK was previously installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -115,7 +115,7 @@ dotnet --version ### Create a new Blazor Server App in .NET CLI -Run the `dotnet new blazor` command to create a new Blazor Server App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Run the `dotnet new blazor` command to create a new Blazor Server App in a command prompt (Windows), terminal (macOS), or command shell (Linux). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -126,11 +126,11 @@ cd BlazorApp {% endhighlight %} {% endtabs %} -This command creates new Blazor Server App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. +This command creates a new Blazor Server App and places it in a new directory called `BlazorApp` inside the current location. See [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and the [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) for more details. ### Install Syncfusion® Blazor Grid and Themes NuGet in the App -Here's an example of how to add **Blazor DataGrid** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. +To add the **Blazor DataGrid** component to the application, run the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -142,7 +142,7 @@ dotnet restore {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available package list with component details. {% endtabcontent %} @@ -150,7 +150,7 @@ N> Syncfusion® Blazor components are availa ### Add Import Namespaces -Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespaces. ```cshtml @@ -161,7 +161,7 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf ### Register Syncfusion® Blazor Service -Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Server App. +Register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor Server App. {% tabs %} {% highlight C# tabtitle="Blazor Server App" hl_lines="3 10" %} @@ -184,7 +184,7 @@ builder.Services.AddSyncfusionBlazor(); ### Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script in the `` and the script reference at the end of the `` in the **App.razor** file as shown below: +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet in the `` and the script at the end of the `` in the **App.razor** file as shown below: ```html @@ -202,7 +202,7 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ### Add Syncfusion® Blazor component -Add the Syncfusion® Blazor DataGrid component in the **~/Components/Pages/Home.razor** file. If an interactivity location as `per page/component`, define a render mode at the top of the `Home.razor` page. +Add the Syncfusion® Blazor DataGrid component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `Home.razor` page. N> If an Interactivity Location is set to `Global` and the **Render Mode** is set to `Server`, the render mode is configured in the `App.razor` file by default. @@ -243,6 +243,6 @@ N> If an Interactivity Location is set to `Global` and the **Render Mode** is se {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DataGrid component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor DataGrid component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhoWjqXVirUZplo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataGrid Component](images/blazor-datagrid-component.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVesWjwqtDJZluz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataGrid Component](images/blazor-datagrid-component.png)" %} diff --git a/blazor/getting-started/blazor-single-nuget.md b/blazor/getting-started/blazor-single-nuget.md index 08c07de6bb..ad0a8f38c3 100644 --- a/blazor/getting-started/blazor-single-nuget.md +++ b/blazor/getting-started/blazor-single-nuget.md @@ -1,7 +1,7 @@ --- layout: post title: Getting started with Syncfusion.Blazor Single NuGet in Visual Studio -description: Check out the documentation for getting started with Syncfusion.Blazor Single NuGet in Visual Studio and much more. +description: Check out the documentation for getting started with Syncfusion.Blazor Single NuGet in Syncfusion Blazor Web App and and explore here to more details. platform: Blazor component: Common documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Getting started with Blazor Component using Syncfusion.Blazor NuGet -This section briefly explains how to include a Blazor component with the Syncfusion.Blazor Single NuGet package in your Blazor Server App and Blazor WebAssembly Standalone App using Visual Studio. +This section explains how to add a Blazor component by using the consolidated Syncfusion.Blazor (Single NuGet) package in a Blazor Server App and a Blazor WebAssembly Standalone App in Visual Studio. ## Prerequisites @@ -17,11 +17,11 @@ This section briefly explains how to include a Blazor component with the Syncfus ## Create a new Blazor App in Visual Studio -You can create a **Blazor Web App (Server Interactive Mode) or WebAssembly Standalone**using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor Web App (Server Interactive Mode) or WebAssembly Standalone** using Visual Studio via the [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor Single NuGet in the App -To add **Blazor Calendar** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor](https://www.nuget.org/packages/Syncfusion.Blazor). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor Calendar** component to the app, open NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search for, and install [Syncfusion.Blazor](https://www.nuget.org/packages/Syncfusion.Blazor). Alternatively, use the following Package Manager command. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -31,11 +31,11 @@ Install-Package Syncfusion.Blazor -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. The Syncfusion.Blazor Single NuGet package is a comprehensive package that includes all components, with the exception of PDF Viewer and Document Editor. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available package list with component details. The Syncfusion.Blazor Single NuGet package is a comprehensive package that includes all components, with the exception of PDF Viewer and Document Editor. ## Register Syncfusion® Blazor Service -Open **~/Components/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. +Open **~/Components/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. ```cshtml diff --git a/blazor/getting-started/blazor-web-app-authentication.md b/blazor/getting-started/blazor-web-app-authentication.md index 0dc7d323e4..0dd8e535a1 100644 --- a/blazor/getting-started/blazor-web-app-authentication.md +++ b/blazor/getting-started/blazor-web-app-authentication.md @@ -23,47 +23,47 @@ This guide demonstrates how to build a **Blazor Web App with authentication** us ## Choose Project Template -* Select the **Blazor Web App** template using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=windows) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio) and click **Next**. +* Select the **Blazor Web App** template using Visual Studio via the [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=windows) or the [Syncfusion® Blazor extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio), and then click **Next**. ![Create-blazor-web-app-template](images/blazor-web-template.jpeg) ## Configure Project Settings -* In the project configuration settings, choose **Blazor Server, WebAssembly, or Auto** as the render mode. Ensure the Configure for **HTTPS option is enabled**, and select **Individual Accounts** as the authentication type before clicking **Create**. This setup enables authentication support without persisting user data in a local database. +* In the project configuration settings, choose **Blazor Server, WebAssembly, or Auto** as the render mode. Ensure the **Configure for HTTPS** option is enabled, and select **Individual Accounts** as the authentication type before clicking **Create**. This enables authentication support without persisting user data in a local database. ![Project-setting](images/project-setting.png) ## Finalize Project Creation -Click the **Create** button to generate the Blazor Web App. Once created, run the project and locate the **Register** button. +Click **Create** to generate the Blazor Web App. After the project is created, run the app and locate the **Register** button. ![Click-register](images/register-button.png) ## Register a User -* Enter the necessary details, such as your **email address and password** into the registration form, then click **Register** to complete the account creation process. +* Enter the required details, such as **email address** and **password**, in the registration form, and then click **Register** to complete account creation. ![Enter-register-details](images/register-details.jpg) ## Apply Database Migrations -After completing registration, click **Apply Migrations** to set up the database schema and configure it with the necessary account-related tables and settings. +After registration completes, click **Apply Migrations** to create the database schema and configure account-related tables and settings. ![Apply-migration](images/apply-migration.jpg) ## Verify Login -Once migrations are applied, refresh the page. The home page will now display the logged-in user's email address along with a **Logout** option. +After migrations are applied, refresh the page. The home page displays the signed-in user’s email address and a **Logout** option. ![Verify-login](images/verify-login.png) -You can also integrate Syncfusion® Blazor Components within the **AuthorizeView** component by following these steps: +Syncfusion® Blazor components can be integrated within the **AuthorizeView** component as shown in the following steps. -## Install Syncfusion® Blazor Calendars and Themes NuGet in the App in the App +## Install Syncfusion® Blazor Calendars and Themes NuGet in the App To add the **Blazor Calendar** component to your application, open the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*). Search and install the [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) packages. -Alternatively, you can install the packages using the following command in the **Package Manager Console**: +Alternatively, install the packages by using the following command in the **Package Manager Console**: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -74,11 +74,11 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available package list with component details. ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. ```cshtml @@ -87,7 +87,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio ``` -Then, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly Standalone App. +Then, register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor Web App. ```cshtml @@ -101,9 +101,9 @@ builder.Services.AddSyncfusionBlazor(); ## Add stylesheet and script resources -The theme stylesheet and script are available via NuGet as [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). To include them in your application, add the stylesheet reference within the section and the script reference just before the closing tag, as shown below: +The theme stylesheet and script are available via NuGet as [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). To include them in the application, add the stylesheet reference within the section and the script reference just before the closing tag, as shown below. -* For **.NET 9 and .NET 8** Blazor Web app, include it in the **~/Components/App.razor** file. +* For **.NET 9 and .NET 8** Blazor Web App, include these references in the **~/Components/App.razor** file. ```html @@ -119,11 +119,11 @@ The theme stylesheet and script are available via NuGet as [Static Web Assets](h ``` N> For more information on theming options, refer to the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) documentation, which covers various methods such as [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator) for referencing themes in your Blazor application. -Additionally, explore the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn about different approaches for including script references in your Blazor project. +Additionally, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) to learn different approaches for including script references in a Blazor project. ## Add Syncfusion® Blazor component -Add the Syncfusion® Blazor Calendar component in the **~/Pages/Home.razor** file under `AuthorizeView`. +Add the Syncfusion® Blazor Calendar component in the **~/Pages/Home.razor** file within an `AuthorizeView`. {% tabs %} {% highlight razor %} @@ -141,12 +141,12 @@ Add the Syncfusion® Blazor Calendar compone {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will launch your default web browser and display the Syncfusion® Blazor Calendar component within the app interface. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This opens the default web browser and displays the Syncfusion® Blazor Calendar component within the app interface. ![Blazor Calendar Component](images/sync-components-auth.jpg) -N> For detailed implementation, The demo project can be downloaded from the [GitHub](https://github.com/SyncfusionExamples/blazor-authentication) repository. +N> For a complete implementation, download the demo project from the [GitHub repository](https://github.com/SyncfusionExamples/blazor-authentication). ## See Also diff --git a/blazor/getting-started/blazor-web-app-single-nuget.md b/blazor/getting-started/blazor-web-app-single-nuget.md index e035ed1113..8f6b35a597 100644 --- a/blazor/getting-started/blazor-web-app-single-nuget.md +++ b/blazor/getting-started/blazor-web-app-single-nuget.md @@ -1,7 +1,7 @@ --- layout: post title: Getting started with Syncfusion.Blazor Single NuGet in Blazor Web App -description: Check out the documentation for getting started with Syncfusion.Blazor Single NuGet in Blazor Web App and much more. +description: Check out the documentation for getting started with Syncfusion.Blazor Single NuGet in Syncfusion Blazor Web App and and explore here to more details. platform: Blazor component: Common documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Getting started with Blazor Web App using Syncfusion.Blazor NuGet -This section briefly explains how to include a Syncfusion® Blazor component with the Syncfusion.Blazor Single NuGet package in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/). +This section explains how to include a Syncfusion® Blazor component in a Blazor Web App by using the consolidated Syncfusion.Blazor “Single NuGet” package in [Visual Studio](https://visualstudio.microsoft.com/vs/). ## Prerequisites @@ -17,18 +17,17 @@ This section briefly explains how to include a Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). - -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) while creating a Blazor Web App. +Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion® Blazor extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) during project creation. ## Install Syncfusion® Blazor Single NuGet in the App -Here's an example of how to add **Blazor Calendar** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor](https://www.nuget.org/packages/Syncfusion.Blazor). +To add the **Blazor Calendar** component to the app, open NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search for and install [Syncfusion.Blazor](https://www.nuget.org/packages/Syncfusion.Blazor). If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, use the following Package Manager command: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -38,11 +37,11 @@ Install-Package Syncfusion.Blazor -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. The Syncfusion.Blazor Single NuGet package is a comprehensive package that includes all components, with the exception of PDF Viewer and Document Editor. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available packages and component details. The Syncfusion.Blazor Single NuGet package is a comprehensive package that includes all components, except PDF Viewer and Document Editor. ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. +Open **~/_Imports.razor** and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. ```cshtml @@ -51,9 +50,9 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio ``` -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +Next, register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor Web App. -If you select an **Interactive render mode** as `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the **interactive render mode** is `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in both **~/Program.cs** files of the Blazor Web App. ```cshtml @@ -67,7 +66,7 @@ builder.Services.AddSyncfusionBlazor(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: +The theme stylesheet and script are provided via NuGet [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet in the `` and the script at the end of the `` in the **~/Components/App.razor** file as shown: ```html @@ -81,12 +80,12 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> If you are using Syncfusion.Blazor single NuGet, you don’t have to refer Syncfusion.Blazor.Themes NuGet. Since style sheets already inside the assets of Syncfusion.Blazor NuGet. +N> When using the Syncfusion.Blazor Single NuGet, a separate Syncfusion.Blazor.Themes package is not required because the stylesheets are included in the Syncfusion.Blazor assets. N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. ## Add Syncfusion® Blazor component -* Now, add the Syncfusion® Blazor Calendar component in the **~/Pages/.razor** file.If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows: +* Add the Syncfusion® Blazor Calendar component in the **~/Pages/.razor** file. If the interactivity location is `Per page/component`, define a render mode at the top of the `~Pages/.razor` component as follows: {% tabs %} {% highlight razor %} @@ -105,6 +104,6 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion® Blazor Calendar component will be rendered in the default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. The Syncfusion® Blazor Calendar component is rendered in the default browser. -![Blazor Calendar Component](images/core-hosted/browser-output.png) +![Blazor Web App rendering the Syncfusion Blazor Calendar component](images/core-hosted/browser-output.png) diff --git a/blazor/getting-started/blazor-web-app.md b/blazor/getting-started/blazor-web-app.md index af05bdd5f9..7a1b1f40e5 100644 --- a/blazor/getting-started/blazor-web-app.md +++ b/blazor/getting-started/blazor-web-app.md @@ -9,9 +9,9 @@ documentation: ug # Getting Started with Blazor Web App -This article provides a step-by-step instructions for building Blazor Web App with `Blazor DataGrid` component using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/) and [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This article provides step-by-step instructions for building a Blazor Web App with the `Blazor DataGrid` component using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). -To get start quickly with Blazor Web App, you can check on this video. +To get started quickly with a Blazor Web App, watch the following video. {% youtube "youtube:https://www.youtube.com/watch?v=hjPGxApA5W8" %} @@ -28,7 +28,7 @@ You can create a Blazor Web App using Syncfusion® ## Manually Creating a Project -This section provides a brief explanation on how to manually create a Blazor Web App using Visual Studio, Visual Studio Code and .NET CLI. +This section provides a brief guide on how to manually create a Blazor Web App using Visual Studio, Visual Studio Code, and the .NET CLI. {% tabcontents %} @@ -42,13 +42,13 @@ This section provides a brief explanation on how to manually create a Blazor Web You can create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web App. ### Install Syncfusion® Blazor Grid and Themes NuGet in the Blazor Web App -Here's an example of how to add **Blazor DataGrid** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor DataGrid** component to the app, open NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search for and install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. Alternatively, you can utilize the following package manager command to achieve the same. @@ -61,7 +61,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details. {% endtabcontent %} @@ -75,7 +75,7 @@ N> Syncfusion® Blazor components are availa You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). +Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -91,11 +91,11 @@ cd BlazorWebApp.Client ### Install Syncfusion® Blazor Grid and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Run the following command to install the [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed. {% tabs %} @@ -109,7 +109,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details. {% endtabcontent %} @@ -145,13 +145,13 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -This command creates new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=linux-macos&view=aspnetcore-8.0) topics for more details. +This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=linux-macos&view=aspnetcore-8.0) topics for more details. ### Install Syncfusion® Blazor Grid and Themes NuGet in the App -Here's an example of how to add **Blazor DataGrid** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. +Here's an example of how to add the **Blazor DataGrid** component to the application by using the following commands in a command prompt (Windows), terminal (Linux and macOS), or PowerShell to install the [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -163,7 +163,7 @@ dotnet restore {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet package list with component details. {% endtabcontent %} @@ -171,7 +171,7 @@ N> Syncfusion® Blazor components are availa ### Add Import Namespaces -Open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespace. +Open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -186,7 +186,7 @@ Open the **~/_Imports.razor** file from the client project and import the `Syncf Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in both **~/Program.cs** files of the Blazor Web App. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -241,7 +241,7 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ### Add Syncfusion® Blazor DataGrid component -Add the Syncfusion® Blazor DataGrid component in the **~/Components/Pages/*.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/*.razor` component, as follows: +Add the Syncfusion® Blazor DataGrid component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the web app, define a render mode at the top of the `~Pages/*.razor` component, as follows: @@ -309,6 +309,6 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DataGrid component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DataGrid component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhoWjqXVirUZplo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataGrid Component](images/blazor-datagrid-component.png)" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVesWjwqtDJZluz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataGrid Component](images/blazor-datagrid-component.png)" %} \ No newline at end of file diff --git a/blazor/getting-started/blazor-webassembly-app.md b/blazor/getting-started/blazor-webassembly-app.md index b166a81070..a0564a69cc 100644 --- a/blazor/getting-started/blazor-webassembly-app.md +++ b/blazor/getting-started/blazor-webassembly-app.md @@ -9,11 +9,11 @@ documentation: ug # Getting Started with Blazor WebAssembly Standalone App -This article provides a step-by-step instructions for building Blazor WebAssembly App with `Blazor DataGrid` component using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/) and [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This article provides step-by-step instructions for building a Blazor WebAssembly App with the `Blazor DataGrid` component using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). ## Using Playground -[Blazor Playground](https://blazor.syncfusion.com/documentation/common/playground/getting-started) allows you to interact with our Blazor components directly in your web browser without need to install any required NuGet packages. By default, the `Syncfusion.Blazor` package is included in this. +[Blazor Playground](https://blazor.syncfusion.com/documentation/common/playground/getting-started) allows interaction with Syncfusion Blazor components directly in a web browser without needing to install any NuGet packages. By default, the `Syncfusion.Blazor` package is included. {% playground "https://blazorplayground.syncfusion.com/" %} @@ -23,7 +23,7 @@ You can create a Blazor WebAssembly Standalone App using Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +You can create a **Blazor WebAssembly App** using Visual Studio via the [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs) or the [Syncfusion® Blazor extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png) @@ -64,9 +64,9 @@ N> Syncfusion® Blazor components are availa ### Create a Blazor WebAssembly App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +You can create a **Blazor WebAssembly App** using Visual Studio Code via the [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vsc) or the [Syncfusion® Blazor extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application by using the following commands in the integrated terminal (Ctrl+`). {% tabs %} {% highlight c# tabtitle="Blazor WASM App" %} @@ -77,13 +77,13 @@ cd BlazorApp {% endhighlight %} {% endtabs %} -This command creates new Blazor WebAssembly App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. +This command creates a new Blazor WebAssembly App and places it in a new directory called `BlazorApp` inside the current location. See [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and the [dotnet new command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) for more details. ### Install Syncfusion® Blazor Grid and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Run the following commands to install the [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed. {% tabs %} {% highlight c# tabtitle="Package Manager" %} @@ -103,7 +103,7 @@ N> Syncfusion® Blazor components are availa ### Prerequisites -Install latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the .NET SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Install the latest version of the [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK was previously installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -126,11 +126,11 @@ cd BlazorApp {% endhighlight %} {% endtabs %} -This command creates new Blazor WebAssembly App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. +This command creates a new Blazor WebAssembly App and places it in a new directory called `BlazorApp` inside the current location. See [Create a Blazor app](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and the [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) for more details. ### Install Syncfusion® Blazor Grid and Themes NuGet in the App -Here's an example of how to add **Blazor DataGrid** component in the application using the following command in the command prompt (Windows) or command shell (Linux) or terminal (macOS) to install a [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. +To add the **Blazor DataGrid** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -150,7 +150,7 @@ N> Syncfusion® Blazor components are availa ### Add Import Namespaces -Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespaces. ```cshtml @@ -161,7 +161,7 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf ### Register Syncfusion® Blazor Service -Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +Register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor WebAssembly App. {% tabs %} {% highlight c# tabtitle="Blazor WebAssembly App (~/Program.cs)" hl_lines="3 11" %} @@ -195,7 +195,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in a Blazor application. Also, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) to learn different approaches for adding script references in a Blazor application. ### Add Syncfusion® Blazor component @@ -233,6 +233,6 @@ Add the Syncfusion® Blazor DataGrid compone {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DataGrid component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor DataGrid component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhoWjqXVirUZplo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataGrid Component](images/blazor-datagrid-component.png)" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVesWjwqtDJZluz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataGrid Component](images/blazor-datagrid-component.png)" %} \ No newline at end of file diff --git a/blazor/getting-started/blazor-webassembly-authentication.md b/blazor/getting-started/blazor-webassembly-authentication.md index 1843ac6c82..1387f4cdca 100644 --- a/blazor/getting-started/blazor-webassembly-authentication.md +++ b/blazor/getting-started/blazor-webassembly-authentication.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor WASM App with Authentication Library -This article provides a step-by-step instructions for building and securing Blazor WebAssembly Standalone App with Blazor WebAssembly Authentication library using [Visual Studio](https://visualstudio.microsoft.com/vs/). +This article provides step-by-step instructions for building and securing a Blazor WebAssembly Standalone App with the Blazor WebAssembly Authentication library using [Visual Studio](https://visualstudio.microsoft.com/vs/). ## Prerequisites @@ -19,11 +19,11 @@ This article provides a step-by-step instructions for building and securing Blaz You can create a **Blazor WebAssembly Standalone App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio) by setting the `Authentication type` to `Individual Accounts`. This selection adds authentication support and doesn't result in storing users in a database. -## Configure the application with Google Auth 2.0 OIDC +## Configure the application with Google OAuth 2.0 (OIDC) -* Set up `Google OAuth 2.0` authentication. For more information, refer [here](https://support.google.com/cloud/answer/6158849?hl=en) +* Set up Google OAuth 2.0 authentication. For more information, see the [Google Cloud documentation](https://support.google.com/cloud/answer/6158849?hl=en). -* Now, replace the `appsettings.json` with the following code which contains code to configure the application with `Google OAuth 2.0`. +* Replace the `appsettings.json` file with the following content to configure the application with `Google OAuth 2.0`. {% tabs %} {% highlight cshtml tabtitle="appsettings.json" %} @@ -45,11 +45,11 @@ You can create a **Blazor WebAssembly Standalone App** using Visual Studio via [ ![OAuth 2.0 client ID](images/oauth-client-id.png) -* The `RedirectUri` (https:///authentication/login-callback) should be registered in the Google APIs console as mentioned below. +* The `RedirectUri` (https:///authentication/login-callback) must be registered in the Google APIs console as shown below. ![OAuth RedirectUri](images/oauth-rediredt-uri.png) -## Install Syncfusion® Blazor Calendars and Themes NuGet in the App in the App +## Install Syncfusion® Blazor Calendars and Themes NuGet in the App Here's an example of how to add **Blazor Calendar** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. @@ -62,11 +62,11 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available package list with component details. ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. ```cshtml @@ -75,7 +75,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio ``` -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly Standalone App. +Now, register the Syncfusion® Blazor service in the **~/Program.cs** file of the Blazor WebAssembly Standalone App. ```cshtml @@ -89,7 +89,7 @@ builder.Services.AddSyncfusionBlazor(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet reference in the `` section and the script reference at the end of the `` as follows: +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet in the `` section and the script at the end of the `` of the main page as follows: * For **.NET 9 and .NET 8** Blazor WebAssembly Standalone app, include it in the **~/Components/App.razor** file. @@ -109,7 +109,7 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor component -Add the Syncfusion® Blazor Calendar component in the **~/Pages/Home.razor** file under `AuthorizeView`. +Add the Syncfusion® Blazor Calendar component in the **~/Pages/Home.razor** file under an `AuthorizeView`. {% tabs %} {% highlight razor %} @@ -127,7 +127,7 @@ Add the Syncfusion® Blazor Calendar compone {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Calendar component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Calendar component in the default web browser. ![Blazor Calendar Component](images/output-calendar-using-blazor-webassembly.png) diff --git a/blazor/getting-started/maui-blazor-app.md b/blazor/getting-started/maui-blazor-app.md index 9fec95a970..15cede30d3 100644 --- a/blazor/getting-started/maui-blazor-app.md +++ b/blazor/getting-started/maui-blazor-app.md @@ -11,34 +11,34 @@ documentation: ug This section explains how to create and run the first .NET Multi-platform Blazor App UI (.NET MAUI Blazor) app with Syncfusion® Blazor components. -To get start quickly with Blazor MAUI App, you can check on this video. +To get started quickly with a .NET MAUI Blazor app, review the following video. {% youtube "youtube:https://www.youtube.com/watch?v=wnceZx-Xezs" %} ## What is .NET MAUI Blazor App? -.NET MAUI Blazor App is a .NET MAUI App where `Blazor Web App` is hosted in .NET MAUI app using `BlazorWebView` control. This enable a Blazor Web App to be integrated with platform features and UI controls. Also, BlazorWebView can be added to any page of .NET MAUI app, and pointed to the root of the Blazor app. The Blazor components run natively in the .NET process and render web UI to an embedded web view control. .NET MAUI Blazor apps can run on all the platforms supported by .NET MAUI. +A .NET MAUI Blazor App is a .NET MAUI application where a Blazor Web App is hosted in the .NET MAUI app using the `BlazorWebView` control. This enables a Blazor Web App to integrate with platform features and UI controls. The `BlazorWebView` can be added to any page of a .NET MAUI app and pointed to the root of the Blazor app. The Blazor components run in the .NET process and render web UI to an embedded web view control. .NET MAUI Blazor apps can run on all platforms supported by .NET MAUI. -Visual Studio provides **.NET MAUI Blazor app** template to create .NET MAUI Blazor Apps. +Visual Studio provides the **.NET MAUI Blazor App** template to create .NET MAUI Blazor Apps. ## Prerequisites * .NET SDK 8.0 or above -* The latest preview of Visual Studio 2022 17.1 or above, with required workloads: +* Visual Studio 2022 17.1 or above with the required workloads: * [Mobile development with .NET](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?tabs=vswin) * ASP.NET and web development ## Create a new .NET MAUI Blazor App in Visual Studio -You can create a **.NET MAUI Blazor App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui?view=aspnetcore-8.0) +Create a **.NET MAUI Blazor App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui?view=aspnetcore-8.0). ## BlazorWebView in .NET MAUI Blazor App -The above steps creates a multi-targeted .NET MAUI Blazor app that can be deployed to Android, iOS, macOS, and Windows. +The above steps create a multi-targeted .NET MAUI Blazor app that can be deployed to Android, iOS, macOS, and Windows. -In `MainPage.xaml`, The `BlazorWebView` is added and points to the root of the Blazor app. The root Blazor component for the app is in `Routes.razor`, which Razor compiles into a type named `Routes` in the application's root namespace. +In `MainPage.xaml`, the `BlazorWebView` is added and points to the root of the Blazor app. The root Blazor component for the app is in `Routes.razor`, which Razor compiles into a type named `Routes` in the application's root namespace. {% tabs %} {% highlight xaml tabtitle="MainPage.xaml" %} @@ -59,11 +59,11 @@ In `MainPage.xaml`, The `BlazorWebView` is added and points to the root of the B {% endhighlight %} {% endtabs %} -For more details refer [Create a .NET MAUI Blazor app](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/blazorwebview#create-a-net-maui-blazor-app) topic. +For more details, refer to the [Create a .NET MAUI Blazor app](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/blazorwebview#create-a-net-maui-blazor-app) topic. ## Install Syncfusion® Blazor Calendars and Themes NuGet in the App -Here's an example of how to add **Blazor Calendar** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor Calendar** component to the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search for and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -74,11 +74,11 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages with component details. ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. ```cshtml @@ -87,7 +87,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio ``` -Now, register the Syncfusion® Blazor service in the `MauiProgram.cs` file of your MAUI Blazor App. +Next, register the Syncfusion® Blazor service in the `MauiProgram.cs` file of the MAUI Blazor App. {% tabs %} {% highlight C# tabtitle="~/MauiProgram.cs" hl_lines="1 3" %} @@ -111,11 +111,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> See the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for different methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) to reference themes in a Blazor application. For script references, see [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references). ## Add Syncfusion® Blazor component -Now add Syncfusion® Blazor component in any razor file. Here, the Calendar component is added in `~/Home.razor` page under the `~/Components/Pages` folder. +Add a Syncfusion® Blazor component in any Razor file. In this example, the Calendar component is added to the `~/Home.razor` page under the `~/Components/Pages` folder. {% tabs %} {% highlight razor %} @@ -127,22 +127,22 @@ Now add Syncfusion® Blazor component in any {% endhighlight %} {% endtabs %} -In the Visual Studio toolbar, select the **Windows Machine** button to build and run the app. -Before running the sample, make sure the mode is `Windows Machine`. +In the Visual Studio toolbar, select **Windows Machine** to build and run the app. +Ensure the run profile is set to `Windows Machine` before starting the app. ![Build and run MAUI Blazor App](images/maui/windows-machine-mode.png) -N> If you want to run the application in Android or iOS refer [MAUI Getting Started](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui?view=aspnetcore-8.0#run-the-app-in-the-android-emulator) for the setup. +N> To run the application on Android or iOS, refer to [MAUI Getting Started](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui?view=aspnetcore-8.0#run-the-app-in-the-android-emulator) for setup instructions. ![MAUI Blazor App with Syncfusion Blazor Components](images/maui/maui-blazor-calendar.png) -N> Download demo from [GitHub](https://github.com/SyncfusionExamples/MAUI-Blazor-App-using-Syncfusion-Blazor-Components) +N> Download the demo from [GitHub](https://github.com/SyncfusionExamples/MAUI-Blazor-App-using-Syncfusion-Blazor-Components). ## How to use images in .NET MAUI Blazor Application -Add the images in the images in the `wwwroot` folder of the application and refer it using `img` tag in Blazor App. +Add images to the `wwwroot` folder of the application and reference them using the `img` tag in the Blazor App. -In the below code images are added under `images` folder in `wwwroot` folder. +In the following example, images are added under the `images` folder in the `wwwroot` folder. {% tabs %} {% highlight razor %} @@ -158,7 +158,7 @@ In the below code images are added under `images` folder in `wwwroot` folder. ### How to solve deployment errors in Windows? -If you get error dialog like "There were deployment errors", Enable developer mode. For more details refer [Enable your device for development](https://learn.microsoft.com/en-us/windows/apps/get-started/enable-your-device-for-development). +If the error dialog “There were deployment errors” appears, enable Developer Mode. For more details, refer to [Enable your device for development](https://learn.microsoft.com/en-us/windows/apps/get-started/enable-your-device-for-development). ![Enable developer mode in system settings](images/maui/enable-developer-mode.png) @@ -166,11 +166,11 @@ If you get error dialog like "There were deployment errors", Enable developer mo ### How to solve deployment errors in iOS? -In iOS code is statically compiled ahead of time, so, configure Syncfusion® Blazor assemblies in `MtouchExtraArgs` tag for the iOS Release configuration in the project when deploy on a real device. +In iOS, code is statically compiled ahead of time. Configure Syncfusion® Blazor assemblies in the `MtouchExtraArgs` tag for the iOS Release configuration in the project when deploying to a real device. -Below are possible errors if `MtouchExtraArgs` tag is not configured, -1. App won't load on real device with error "An unhandled error has occurred" after you compile in Release mode with Visual Studio and deploy to real device. -2. AOT related failures like [`Attempting to JIT compile method while running in aot-only mode`](https://github.com/xamarin/xamarin-macios/issues/12416) +Possible errors if the `MtouchExtraArgs` tag is not configured: +1. The app does not load on a real device with the error “An unhandled error has occurred” after compiling in Release mode with Visual Studio and deploying to a real device. +2. AOT-related failures such as [`Attempting to JIT compile method while running in aot-only mode`](https://github.com/dotnet/macios/issues/12416) ``` @@ -186,9 +186,9 @@ Reference: ### How to solve "The project doesn't know how to run the profile Windows Machine" while running MAUI Blazor App? -* This issue has been fixed in most recent release of Visual Studio. For more details refer [here](https://developercommunity.visualstudio.com/t/the-project-doesnt-know-how-to-run-the-profile-win/1530395). +* This issue has been addressed in a recent release of Visual Studio. For details, see the discussion [here](https://developercommunity.visualstudio.com/t/the-project-doesnt-know-how-to-run-the-profile-win/1530395). -* You can also fix this error by installing [Single-project MSIX Packaging Tools](https://marketplace.visualstudio.com/items?itemName=ProjectReunion.MicrosoftSingleProjectMSIXPackagingToolsDev17). +* Alternatively, install [Single-project MSIX Packaging Tools](https://marketplace.visualstudio.com/items?itemName=ProjectReunion.MicrosoftSingleProjectMSIXPackagingToolsDev17) to resolve this error. ## See also diff --git a/blazor/getting-started/maui-blazor-web-app.md b/blazor/getting-started/maui-blazor-web-app.md index 13673f5079..8d30241c3a 100644 --- a/blazor/getting-started/maui-blazor-web-app.md +++ b/blazor/getting-started/maui-blazor-web-app.md @@ -9,34 +9,32 @@ documentation: ug # Getting Started with .NET MAUI Blazor Hybrid and Web App -This section explains how to create and run the first .NET Multi-platform Blazor App UI (.NET MAUI with Blazor Web App) app with Syncfusion® Blazor components. - +This section explains how to create and run a .NET Multi-platform Blazor App UI (.NET MAUI with Blazor Web App) using Syncfusion® Blazor components. ## What is .NET MAUI Blazor Hybrid and Web App? -[.NET MAUI Blazor Web App](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui-blazor-web-app?view=aspnetcore-9.0) is a hybrid application that leverages a Razor Class Library (RCL) to define reusable Blazor components. These components are shared between a Blazor WebAssembly or Server app and a .NET MAUI Blazor app. This setup allows developers to create a unified web-based UI and **reuse it across mobile, desktop, and browser platforms**. +[.NET MAUI Blazor Web App](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui-blazor-web-app?view=aspnetcore-9.0) is a hybrid application that leverages a Razor Class Library (RCL) to define reusable Blazor components. These components are shared between a Blazor WebAssembly or Server App and a .NET MAUI Blazor App. This approach enables a unified web-based UI that can be **reused across mobile, desktop, and browser platforms**. -By sharing UI components between native and web apps, this approach ensures consistent user experiences, promotes maximum code reuse, and simplifies maintenance for applications that target multiple environments. +By sharing UI components between native and web apps, this pattern ensures consistent user experiences, maximizes code reuse, and simplifies maintenance for applications targeting multiple environments. -Visual Studio provides **[.NET MAUI Blazor Hybrid and Web App](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui-blazor-web-app?view=aspnetcore-9.0)** template to create .NET MAUI Blazor Hybrid app with a Blazor Web App. +Visual Studio provides the **[.NET MAUI Blazor Hybrid and Web App](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui-blazor-web-app?view=aspnetcore-9.0)** template to create a .NET MAUI Blazor Hybrid app with a Blazor Web App. ## Prerequisites -* .NET SDK 9.0 and later. - -* The latest preview of Visual Studio 2022 17.3 or above, with required workloads: +* .NET SDK 9.0 or later +* Visual Studio 2022 17.3 or later with the following workloads: * [Mobile development with .NET](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?tabs=vswin) * ASP.NET and web development ## Create a new .NET MAUI Blazor Hybrid and Blazor Web App in Visual Studio -You can create a **.NET MAUI Blazor Hybrid and Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui-blazor-web-app?view=aspnetcore-9.0) +Create a **.NET MAUI Blazor Hybrid and Blazor Web App** in Visual Studio using the [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui-blazor-web-app?view=aspnetcore-9.0). ![.NET MAUI Blazor Hybrid and Blazor Web App](images/maui/maui-web-app-template.png) ## Install Syncfusion® Blazor Calendars and Themes NuGet in the App -Here's an example of how to add **Blazor Calendar component in the app's shared folder**, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the Blazor Calendar component in the app’s shared folder, open the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search for and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -47,11 +45,11 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of packages and component details. ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file in both `.Maui` and `.Web` App and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. +Open **~/_Imports.razor** in both the `.Maui` and `.Web` Apps and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. ```cshtml @@ -60,7 +58,7 @@ Open **~/_Imports.razor** file in both `.Maui` and `.Web` App and import the `Sy ``` -Now, register the Syncfusion® Blazor service in both the `MauiProgram.cs` file of your MAUI Blazor App and `~/Program.cs` file of your Blazor Web App. +Now, register the Syncfusion® Blazor service in both the `MauiProgram.cs` file of the MAUI Blazor App and the `~/Program.cs` file of the Blazor Web App. {% tabs %} {% highlight C# tabtitle="~/MauiProgram.cs" hl_lines="1 4" %} @@ -89,7 +87,7 @@ Now, register the Syncfusion® Blazor servic ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet and script in the `` of the **~wwwroot/index.html** file of your MAUI Blazor App and **~/Components/App.razor file** of your Blazor Web App. +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet and script in the `` of the **~wwwroot/index.html** file of your MAUI Blazor App and in the **~/Components/App.razor file** of your Blazor Web App. ```html @@ -108,7 +106,7 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor component -Now add Syncfusion® Blazor component in any razor file. Here, the Calendar component is added in `~/Pages/Home.razor` page under the `~/Pages` folder of your `.Shared` App . +Add a Syncfusion® Blazor component in any Razor file. In this example, the Calendar component is added in `~/Pages/Home.razor` under the `~/Pages` folder of the `.Shared` App. {% tabs %} {% highlight razor %} @@ -120,16 +118,15 @@ Now add Syncfusion® Blazor component in any {% endhighlight %} {% endtabs %} -In the Visual Studio toolbar, select the **Windows Machine** button to build and run the `.Maui` app. -Before running the sample, make sure the mode is `Windows Machine`. Also to build and run the `.Web` app, select the **IIS Express** button. +In the Visual Studio toolbar, select the **Windows Machine** target to build and run the `.Maui` app. To build and run the `.Web` app, select the **IIS Express** target. ![Build and run MAUI Blazor App](images/maui/windows-machine-mode.png) -N> If you want to run the application in Android or iOS refer [MAUI Getting Started](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui?view=aspnetcore-9.0#run-the-app-in-the-android-emulator) for the setup. +N> To run the application on Android or iOS, refer to [MAUI Getting Started](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui?view=aspnetcore-9.0#run-the-app-in-the-android-emulator) for emulator or device setup. ![MAUI Blazor App with Syncfusion Blazor Components](images/maui/maui-blazor-calendar.png) -N> Download demo from [GitHub](https://github.com/SyncfusionExamples/MAUI-Blazor-Hybrid-with-Blazor-Web-App-using-Syncfuion-Blazor-Components) +N> Download the demo from [GitHub](https://github.com/SyncfusionExamples/MAUI-Blazor-Hybrid-with-Blazor-Web-App-using-Syncfuion-Blazor-Components). ## See also diff --git a/blazor/getting-started/microsoft-teams-app.md b/blazor/getting-started/microsoft-teams-app.md index 1e7c0c97b9..9aa54960f0 100644 --- a/blazor/getting-started/microsoft-teams-app.md +++ b/blazor/getting-started/microsoft-teams-app.md @@ -9,51 +9,51 @@ documentation: ug # Getting Started with Microsoft Teams Application -This section explains how to create and run the first Microsoft Teams application (Tab App) with Syncfusion® Blazor components. +This section explains how to create and run a Microsoft Teams application (Tab App) with Syncfusion® Blazor components. ## Prerequisites -* Visual Studio 2022 [> 17.13 version] with the required work loads (Visual studio Installer -> Workloads -> ASP.NET and web development -> Select Microsoft 365 Agents development tools from Installation details). +* Visual Studio 2022 (version 17.13 or later) with the required workloads. In Visual Studio Installer, select Workloads → ASP.NET and web development, then enable Microsoft 365 Agents development tools under Installation details. - ![workload installation](images\MSTeams\workload-installation.png) + ![Visual Studio workloads installation for Microsoft 365 Agents](images/MSTeams/workload-installation.png) -* Microsoft Teams Application +* Microsoft Teams application -* Microsoft Edge or Google Chrome browser with developer tools. +* Microsoft Edge or Google Chrome with developer tools -* In the Teams client, go to the Apps icon > Manage your apps > Upload an app, and check for the "Upload a custom app" option to confirm if custom app upload is enabled. Contact Teams administrator, if you don't have the option to upload a custom app. +* In the Teams client, go to Apps icon → Manage your apps → Upload an app, and confirm that "Upload a custom app" is available. Contact a Teams administrator if the option is not available. - ![custom upload](images\MSTeams\custom-upload.png) + ![Verify Teams custom app upload permission](images/MSTeams/custom-upload.png) ## Create a new Microsoft Team Application with Tab using Visual Studio 1. Launch Visual Studio 2022, and in the start window click **Create a new project**. 2. Search for Microsoft 365 Agents app in Visual Studio template. Select **Microsoft 365 Agents** and click on Next. - ![Create Microsoft Teams App](images\MSTeams\create-msteams-app.png) + ![Create Microsoft Teams App](images/MSTeams/create-msteams-app.png) 3. Configure the project with required project name, select the location to save the application and click on Create. - ![Configure Microsoft Teams App](images\MSTeams\configure-msteams-app.png) + ![Configure Microsoft Teams App](images/MSTeams/configure-msteams-app.png) 4. Select the type of Microsoft 365 Agent application to create. In this example, **Microsoft application with Tab** is selected. -![Select type of Microsoft Teams Application](images\MSTeams\select-type-msteams-app.png) +![Select type of Microsoft Teams Application](images/MSTeams/select-type-msteams-app.png) 5. Wait for the project to be created, and its dependencies to be restored, then the project structure looks like below. - ![Microsoft Teams project structure](images\MSTeams\msteams-project-structure.png) + ![Microsoft Teams project structure](images/MSTeams/msteams-project-structure.png) ## Build and run the first Microsoft Teams Application 1. To configure the project with the Microsoft teams application, right Click on the M365 Agent Project and Select Microsoft M365 Account. - ![Configure dependecies with MS Teams Application](images\MSTeams\configure-teams-dependencies.png) -2. After configuring successfully, it displays the window with Microsoft 365 Account. If you already have an account Select the available Office 365 account and click on continue. If you dont have account, create a new account and add the newly created account and click on continue. + ![Configure dependencies with Microsoft Teams application](images/MSTeams/configure-teams-dependencies.png) +2. After configuration completes, a Microsoft 365 Account window appears. If an account exists, select the Office 365 account and click Continue. If you don't have an account, create a new account, add it, and then click Continue. - ![Select the MS365 account to SignIn](images\MSTeams\ms365-account-select.png) -3. After successful login. Click on Debug -> Start Debugging or click on F5 to run the application. -4. Once the application is build successfully, prompts the output window with create My365Agent application. Click on Add in the created application -![Newly created teams application](images\MSTeams\new-teams-app.png) -5. On clicking on "Open" the new Microsoft application with personal Tab is created. -![New Teams application with Personal Tab](images\MSTeams\new-app-personal-tab.png) + ![Select a Microsoft 365 account to sign in](images/MSTeams/ms365-account-select.png) +3. After successful sign-in, select Debug → Start Debugging or press F5 to run the application. +4. After a successful build, the output window prompts to create the My365Agent application. Click Add to add the created application. +![Newly created Teams application](images/MSTeams/new-teams-app.png) +5. Click Open to create the new Microsoft application with a personal tab. +![New Teams application with a personal tab](images/MSTeams/new-app-personal-tab.png) ## Install Syncfusion® Blazor Kanban and Themes NuGet in the App @@ -68,7 +68,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available package list with component details. ## Register Syncfusion® Blazor Service @@ -208,6 +208,6 @@ Now, add the Syncfusion® Blazor Kanban comp {% endhighlight %} {% endtabs %} -![Microsoft Teams Application with Syncfusion Blazor controls](images\MSTeams\output-msteams-syncfusion.png) +![Microsoft Teams application with Syncfusion Blazor controls](images/MSTeams/output-msteams-syncfusion.png) -N> [View the complete Microsoft Teams Application with Blazor Syncfusion® Controls on GitHub](https://github.com/SyncfusionExamples/Building-Apps-for-Microsoft-Teams-with-Blazor-using-Syncfusion-Components) +N> [View the complete Microsoft Teams application with Syncfusion® Blazor controls on GitHub](https://github.com/SyncfusionExamples/Building-Apps-for-Microsoft-Teams-with-Blazor-using-Syncfusion-Components) diff --git a/blazor/getting-started/razor-class-library.md b/blazor/getting-started/razor-class-library.md index a8e0df84d0..e2f5e07cee 100644 --- a/blazor/getting-started/razor-class-library.md +++ b/blazor/getting-started/razor-class-library.md @@ -7,9 +7,9 @@ component: Common documentation: ug --- -# Creating Razor Class Library (RCL) using Syncfusion® Blazor components +# Creating Razor Class Library (RCL) using Syncfusion® Blazor components -This section provides information about creating Razor Class Library with the Syncfusion® Blazor components using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This guide explains how to create a Razor Class Library (RCL) that includes Syncfusion® Blazor components using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. {% tabcontents %} @@ -17,7 +17,7 @@ This section provides information about creating Razor Class Library with the Sy ## Prerequisites -[System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +- [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) ## Create a Razor Class Library in Visual Studio 2022 @@ -39,7 +39,7 @@ This section provides information about creating Razor Class Library with the Sy ## Install Syncfusion® Blazor Calendars and Themes NuGet in the App -To add **Blazor Calendar** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor Calendar** component to the library, open NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -51,11 +51,11 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available package list with component details. ## Importing Syncfusion® Blazor component in Razor Class Library -Now, import and add the Syncfusion® Blazor components in the `~/Component1.razor` file. For example, the Calendar component is imported and added in the **~/Component1.razor** page. +Import and add the Syncfusion® Blazor components in the `~/Component1.razor` file. For example, the Calendar component is imported and added in the **~/Component1.razor** page. ```html @@ -79,11 +79,11 @@ This Blazor component is defined in the RazorClassLibrary packa ## Prerequisites -[System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +- [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) ## Create a Razor class library in Visual Studio Code -You can create a Razor class library using visual studio code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/razor-pages/ui-class?view=aspnetcore-9.0&tabs=net-cli). +You can create a Razor class library using Visual Studio code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/razor-pages/ui-class?view=aspnetcore-9.0&tabs=net-cli). {% tabs %} @@ -96,13 +96,13 @@ cd RazorUIClassLib {% endtabs %} -## Install Syncfusion® Blazor Navigations and Themes NuGet in the App +## Install Syncfusion® Blazor Calendars and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly` or `Auto` render modes in a Blazor Web App, install Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Run the following commands to install the [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed. {% tabs %} @@ -116,7 +116,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available package list with component details. ## Importing Syncfusion® Blazor component in Razor Class Library @@ -152,7 +152,7 @@ You can create a **Blazor Web App** or **Blazor Server App** or **Blazor WebAsse ![add RCL in blazor app](images/blazor-razor-configure.png) - N> Razor Class Library project is added to the existing Blazor Application. + N> The Razor Class Library project is added to the existing Blazor Application. 3. Right-click the Blazor App project, and then select Add/Project reference. Now, click the checkbox and configure the **Razor Class Library**. @@ -187,7 +187,7 @@ You can create a **Blazor Web App** or **Blazor Server App** or **Blazor WebAsse * For Blazor WebAssembly standalone app, include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/wwwroot/index.html** file. - * For **.NET 8 and .NET 9** Blazor Web Apps using any render mode (Server, WebAssembly, or Auto), include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/Pages/App.razor** file. + * For **.NET 8 and .NET 9** Blazor Web Apps using any render mode (Server, WebAssembly, or Auto), include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/Pages/App.razor** file. ```html diff --git a/blazor/getting-started/winforms-blazor-app.md b/blazor/getting-started/winforms-blazor-app.md index d9caa60f43..1793cd05b1 100644 --- a/blazor/getting-started/winforms-blazor-app.md +++ b/blazor/getting-started/winforms-blazor-app.md @@ -1,7 +1,7 @@ --- layout: post title: Getting Started with WinForms Blazor App in Visual Studio | Syncfusion -description: Check out the documentation for getting started with WinForms Blazor App and Syncfusion Blazor Components in Visual Studio and much more. +description: Check out the documentation for getting started with WinForms Blazor App and Syncfusion Blazor Components in Visual Studio and explore here to more details. platform: Blazor component: Common documentation: ug @@ -9,18 +9,17 @@ documentation: ug # Getting Started with WinForms Blazor Application -This section explains how to create and run the first WinForms Blazor App UI (.NET WinForms Blazor) app with Syncfusion® Blazor components. +This section explains how to create and run a first WinForms Blazor App (.NET WinForms Blazor) that uses Syncfusion® Blazor components. ## What is WinForms Blazor App? -WinForms Blazor App is an app where `Blazor web app` is hosted in WinForms app using `BlazorWebView` control. This enable a Blazor web app to be integrated with platform features and UI controls. Also, BlazorWebView can be added to any page of WinForms Blazor app, and pointed to the root of the Blazor app. The Blazor components run natively in the .NET process and render web UI to an embedded web view control. WinForms Blazor apps can run on all the platforms supported by WinForms. +A WinForms Blazor app hosts a Blazor web app inside a Windows Forms application by using the `BlazorWebView` control. This enables a Blazor web app to integrate with desktop platform features and UI controls. The `BlazorWebView` control can be added to any form in the WinForms app and pointed to the root of the Blazor app. The Blazor components run in the .NET process and render the web UI to an embedded web view control. WinForms Blazor apps run on platforms supported by WinForms (Windows). -Visual Studio provides **WinForms Application** template to create WinForms Blazor Apps. +Visual Studio provides the **WinForms Application** template to create WinForms Blazor Apps. ## Prerequisites * [Supported platforms (WinForms documentation)](https://learn.microsoft.com/en-us/dotnet/desktop/winforms/overview/?view=netdesktop-8.0) - * [Visual Studio 2022](https://visualstudio.microsoft.com/vs/) ## Create a new WinForms Blazor App in Visual Studio @@ -29,7 +28,7 @@ To create a **WinForms Blazor App** using Visual Studio, it is essential® Blazor Calendars and Themes NuGet in the App -Here's an example of how to add **Blazor Calendar** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor Calendar** component to the app, open NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search for and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -40,15 +39,15 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Ensure that the package `Microsoft.AspNetCore.Components.WebView.WindowsForms` updated to version `8.0.16`. +N> Ensure that the package `Microsoft.AspNetCore.Components.WebView.WindowsForms` is updated to version `8.0.16` or later. ![Winforms Blazor App NuGet package reference](images/winforms/winforms-blazor-package-reference.png) -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available package list and component mapping. ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. +Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. ```cshtml @@ -72,7 +71,7 @@ Now, register the Syncfusion® Blazor servic ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet and script in the `` of the **~wwwroot/index.html** file. +The theme stylesheet and script are provided by the NuGet packages via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet and script in the `` of the **~wwwroot/index.html** file. ```html @@ -85,7 +84,7 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor component -Now add Syncfusion® Blazor component in any razor file. Here, the Calendar component is added in `~/Counter.razor`. +Add a Syncfusion® Blazor component to any Razor file. The following example adds the Calendar component in `~/Counter.razor`. {% tabs %} {% highlight razor %} diff --git a/blazor/getting-started/wpf-blazor-app.md b/blazor/getting-started/wpf-blazor-app.md index 1839a7337d..8662e5781c 100644 --- a/blazor/getting-started/wpf-blazor-app.md +++ b/blazor/getting-started/wpf-blazor-app.md @@ -9,23 +9,22 @@ documentation: ug # Getting Started with WPF Blazor Application -This section explains how to create and run the first WPF Blazor App UI (.NET WPF Blazor) app with Syncfusion® Blazor components. +This section explains how to create and run a first WPF Blazor app (.NET WPF Blazor) that uses Syncfusion® Blazor components. -To get start quickly with Blazor WPF App, you can check on this video. +To get started quickly with a WPF Blazor app, watch the following video. {% youtube "youtube:https://www.youtube.com/watch?v=MxSGEbPUbMg" %} ## What is WPF Blazor App? -WPF Blazor App is an app where `Blazor web app` is hosted in WPF app using `BlazorWebView` control. This enable a Blazor web app to be integrated with platform features and UI controls. Also, BlazorWebView can be added to any page of WPF Blazor app, and pointed to the root of the Blazor app. The Blazor components run natively in the .NET process and render web UI to an embedded web view control. WPF Blazor apps can run on all the platforms supported by WPF. +A WPF Blazor app hosts a `Blazor web app` inside a WPF application by using the `BlazorWebView` control. This enables a Blazor web app to integrate with desktop platform features and WPF UI. The `BlazorWebView` control can be added to any page in the WPF Blazor app and pointed to the root of the Blazor app. The Blazor components run in the .NET process and render the web UI to an embedded web view control. WPF Blazor apps run on platforms supported by WPF. -Visual Studio provides **WPF Application** template to create WPF Blazor Apps. +Visual Studio provides the **WPF Application** template to create WPF Blazor Apps. ## Prerequisites * [Supported platforms (WPF documentation)](https://learn.microsoft.com/en-us/dotnet/desktop/wpf/overview/?view=netdesktop-8.0) - * [Visual Studio 2022](https://visualstudio.microsoft.com/vs/) with the .NET desktop development workload ## Create a new WPF Blazor App in Visual Studio @@ -34,7 +33,7 @@ To create a **WPF Blazor App** using Visual Studio, it is essential® Blazor Calendars and Themes NuGet in the App -Here's an example of how to add **Blazor Calendar** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor Calendar** component to the app, open NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search for and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, use the following Package Manager commands. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -45,15 +44,15 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Ensure that the package `Microsoft.AspNetCore.Components.WebView.Wpf` updated to version `8.0.16`. +N> Ensure that the package `Microsoft.AspNetCore.Components.WebView.Wpf` is updated to version `8.0.16` or later. For details, see the package page in NuGet. ![WPF Blazor App NuGet package reference](images/wpf/wpf-blazor-package-reference.png) -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available package list and component mapping. ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespace. +Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces. ```cshtml @@ -62,7 +61,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio ``` -Now, register the Syncfusion® Blazor service in the `MainWindow.xaml.cs` file of your WPF Blazor App. +Next, register the Syncfusion® Blazor service in the `MainWindow.xaml.cs` file of the WPF Blazor App. {% tabs %} {% highlight C# tabtitle="~/MainWindow.xaml.cs" hl_lines="1 3" %} @@ -77,7 +76,7 @@ Now, register the Syncfusion® Blazor servic ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet and script in the `` of the **~wwwroot/index.html** file. +Theme stylesheets and scripts are provided by the NuGet packages via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet and script in the `` of the **~wwwroot/index.html** file. ```html @@ -90,7 +89,7 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor component -Now add Syncfusion® Blazor component in any razor file. Here, the Calendar component is added in `~/Counter.razor`. +Add a Syncfusion® Blazor component to any Razor file in the Blazor project. The following example adds the Calendar component in `~/Counter.razor`. {% tabs %} {% highlight razor %} @@ -106,4 +105,4 @@ In the Visual Studio toolbar, select the start button to build and run the app. ![WPF Blazor App with Syncfusion Blazor Components](images/wpf/wpf-blazor-calendar.png) -N> Download demo from [GitHub](https://github.com/SyncfusionExamples/blazor-general-cross-platform-wpf) +N> Download the demo from [GitHub](https://github.com/SyncfusionExamples/blazor-general-cross-platform-wpf) diff --git a/blazor/smart-ai-solutions/ai-samples/treegrid/adaptive-structuring.md b/blazor/smart-ai-solutions/ai-samples/treegrid/adaptive-structuring.md index da9f429bf4..2dca167da5 100644 --- a/blazor/smart-ai-solutions/ai-samples/treegrid/adaptive-structuring.md +++ b/blazor/smart-ai-solutions/ai-samples/treegrid/adaptive-structuring.md @@ -1,33 +1,33 @@ --- layout: post -title: Data Restructuring with Blazor TreeGrid and AI Models | Syncfusion -description: Learn how to use Syncfusion Blazor TreeGrid with AI service to automatically organize hierarchical data. +title: Data restructuring with Blazor TreeGrid and AI models | Syncfusion +description: Learn how to use the Syncfusion Blazor TreeGrid with OpenAI, Azure OpenAI, or Ollama to automatically organize hierarchical data. Explore to more details. platform: Blazor control: AI Integration documentation: ug keywords: Blazor TreeGrid, AI data restructuring, Syncfusion Blazor AI --- -# Data Restructuring with Blazor TreeGrid and Ollama +# Data restructuring with Blazor TreeGrid and AI models -This guide demonstrates how to use the [**Syncfusion.Blazor.AI**](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package to automatically organize hierarchical data in a Syncfusion Blazor TreeGrid component. The [**Syncfusion.Blazor.AI**](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package enables integration with AI models to process and structure data, while Ollama provides self-hosted or cloud-based AI capabilities for analyzing relationships in datasets. In this example, the application assigns appropriate `ParentId` values based on `CategoryName` relationships, dynamically updating the TreeGrid to reflect the corrected hierarchical structure. +This guide demonstrates how to use the [Syncfusion.Blazor.AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package to automatically organize hierarchical data in a Syncfusion Blazor TreeGrid component. The [Syncfusion.Blazor.AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package enables integration with AI models to process and structure data, while Ollama provides self-hosted or cloud-based AI capabilities for analyzing relationships in datasets. In the example below, the application assigns appropriate `ParentId` values based on `CategoryName` relationships and dynamically updates the TreeGrid to reflect the corrected hierarchical structure. ## Prerequisites -Ensure the following NuGet packages are installed based on your chosen AI service: +Ensure the following NuGet packages are installed based on the selected AI service. ### For OpenAI -- **Microsoft.Extensions.AI** -- **Microsoft.Extensions.AI.OpenAI** +- Microsoft.Extensions.AI +- Microsoft.Extensions.AI.OpenAI ### For Azure OpenAI -- **Microsoft.Extensions.AI** -- **Microsoft.Extensions.AI.OpenAI** -- **Azure.AI.OpenAI** +- Microsoft.Extensions.AI +- Microsoft.Extensions.AI.OpenAI +- Azure.AI.OpenAI ### For Ollama -- **Microsoft.Extensions.AI** -- **OllamaSharp** +- Microsoft.Extensions.AI +- OllamaSharp {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -43,9 +43,9 @@ Install-Package OllamaSharp # For Ollama {% endhighlight %} {% endtabs %} -## Add Stylesheet and Script Resources +## Add stylesheet and script resources -Include the theme stylesheet and script from NuGet via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets) in the `` of your main page: +Include the theme stylesheet and script from NuGet via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets) in the `` of the main page: - For **.NET 6** Blazor Server apps, add to **~/Pages/_Layout.cshtml**. - For **.NET 8 or .NET 9** Blazor Server apps, add to **~/Components/App.razor**. @@ -61,18 +61,18 @@ Include the theme stylesheet and script from NuGet via [Static Web Assets](https N> Explore the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for methods to reference themes ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), or [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)). Refer to the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic for different approaches to adding script references in your Blazor application. -## Configure AI Service +## Configure AI service -Choose one of the following AI services (OpenAI, Azure OpenAI, or Ollama) based on your requirements: -- **OpenAI**: Best for cloud-based, general-purpose AI models with minimal setup. -- **Azure OpenAI**: Ideal for enterprise-grade deployments with enhanced security and scalability. -- **Ollama**: Suitable for self-hosted, privacy-focused AI models. +Choose one of the following AI services (OpenAI, Azure OpenAI, or Ollama) based on requirements: +- **OpenAI**: Cloud-based, general-purpose AI models with minimal setup. +- **Azure OpenAI**: Enterprise-grade deployment with enhanced security and scalability. +- **Ollama**: Self-hosted, privacy-focused AI models. -Follow the instructions for your selected service to register the AI model in your application. +Follow the instructions for the selected service to register the AI model in the application. ### OpenAI -Generate an API key from OpenAI and set `openAIApiKey`. Specify the desired model (e.g., `gpt-3.5-turbo`, `gpt-4`) in `openAIModel`. +Generate an API key from OpenAI and set `openAIApiKey`. Specify the desired model (for example, `gpt-3.5-turbo`, `gpt-4`) in `openAIModel`. - Install the required NuGet packages: @@ -85,7 +85,7 @@ Install-Package Microsoft.Extensions.AI.OpenAI {% endhighlight %} {% endtabs %} -- Add the following to the **~/Program.cs** file in your Blazor WebApp: +- Add the following to the **~/Program.cs** file in the Blazor Web App: {% tabs %} {% highlight C# tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %} @@ -110,7 +110,7 @@ var app = builder.Build(); ### Azure OpenAI -Deploy an Azure OpenAI Service resource and model as described in [Microsoft's documentation](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource). Obtain values for `azureOpenAIKey`, `azureOpenAIEndpoint`, and `azureOpenAIModel`. +Deploy an Azure OpenAI Service resource and model as described in [Microsoft’s documentation](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource). Obtain values for `azureOpenAIKey`, `azureOpenAIEndpoint`, and `azureOpenAIModel`. - Install the required NuGet packages: @@ -124,7 +124,7 @@ Install-Package Azure.AI.OpenAI {% endhighlight %} {% endtabs %} -- Add the following to the **~/Program.cs** file in your Blazor WebApp: +- Add the following to the **~/Program.cs** file in the Blazor Web App: {% tabs %} {% highlight C# tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %} @@ -156,9 +156,9 @@ var app = builder.Build(); To use Ollama for self-hosted AI models: -1. **Download and install Ollama**: Visit [Ollama's official website](https://ollama.com) and install the application for your operating system. -2. **Install a model**: Choose a model from the [Ollama Library](https://ollama.com/library) (e.g., `llama2:13b`, `mistral:7b`). -3. **Configure the application**: Provide the `Endpoint` URL (e.g., `http://localhost:11434`) and `ModelName` (e.g., `llama2:13b`). +1. **Download and install Ollama**: Visit [Ollama's official website](https://ollama.com) and install the application for the operating system. +2. **Install a model**: Choose a model from the [Ollama Library](https://ollama.com/library) (for example, `llama2:13b`, `mistral:7b`). +3. **Configure the application**: Provide the `Endpoint` URL (for example, `http://localhost:11434`) and `ModelName` (for example, `llama2:13b`). - Install the required NuGet packages: @@ -171,7 +171,7 @@ Install-Package OllamaSharp {% endhighlight %} {% endtabs %} -- Add the following to the **~/Program.cs** file in your Blazor WebApp: +- Add the following to the **~/Program.cs** file in the Blazor Web App: {% tabs %} {% highlight C# tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %} @@ -192,14 +192,14 @@ var app = builder.Build(); {% endhighlight %} {% endtabs %} -- **Verify connectivity**: Ensure the Ollama server is running and accessible at the specified endpoint (e.g., `http://localhost:11434`) before starting the application. +- **Verify connectivity**: Ensure the Ollama server is running and accessible at the specified endpoint (for example, `http://localhost:11434`) before starting the application. -## Register Syncfusion Blazor Service +## Register Syncfusion Blazor service -Add the Syncfusion Blazor service to your **~/Program.cs** file. The configuration depends on your app's **Interactive Render Mode**: +Add the Syncfusion Blazor service to the **~/Program.cs** file. The configuration depends on the app’s **Interactive Render Mode**: -- **Server Mode**: Register the service in the single **~/Program.cs** file. -- **WebAssembly or Auto Mode**: Register the service in both the server-side **~/Program.cs** and client-side **~/Program.cs** files. +- **Server mode**: Register the service in the single **~/Program.cs** file. +- **WebAssembly or Auto mode**: Register the service in both the server-side **~/Program.cs** and client-side **~/Program.cs** files. {% tabs %} {% highlight C# tabtitle="Server (~/_Program.cs)" hl_lines="3 11" %} @@ -228,9 +228,9 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -## Razor Component (`Home.razor`) +## Razor component (`Home.razor`) -This section implements the Syncfusion Blazor TreeGrid with AI-driven data restructuring using the AI model to assign `ParentId` values based on `CategoryName` relationships. +This section implements the Syncfusion Blazor TreeGrid with AI-driven data restructuring, using the AI model to assign `ParentId` values based on `CategoryName` relationships. ```csharp @page "/" @@ -362,20 +362,20 @@ namespace AISamples.Components.Pages } ``` -## Error Handling and Troubleshooting +## Error handling and troubleshooting -If the AI service fails to return a valid response, the TreeGrid will display an error message ("Oops! Please try again!"). Common issues include: +If the AI service fails to return a valid response, the TreeGrid displays an error message (“Oops! Please try again!”). Common issues include: -- **Invalid API Key or Endpoint**: Verify that the `openAIApiKey`, `azureOpenAIKey`, or Ollama `Endpoint` is correct and the service is accessible. -- **Model Unavailable**: Ensure the specified `openAIModel`, `azureOpenAIModel`, or `ModelName` is deployed and supported. -- **Network Issues**: Check connectivity to the AI service endpoint, especially for self-hosted Ollama instances. -- **Large Datasets**: Processing large datasets may cause timeouts. Consider batching data or optimizing the prompt for efficiency. +- **Invalid API key or endpoint**: Verify that `openAIApiKey`, `azureOpenAIKey`, or the Ollama `Endpoint` is correct and the service is accessible. +- **Model unavailable**: Ensure the specified `openAIModel`, `azureOpenAIModel`, or `ModelName` is deployed and supported. +- **Network issues**: Check connectivity to the AI service endpoint, especially for self-hosted Ollama instances. +- **Large datasets**: Processing large datasets may cause timeouts. Consider batching data or optimizing the prompt. -## Performance Considerations +## Performance considerations When handling large datasets, ensure the Ollama server has sufficient resources (CPU/GPU) to process requests efficiently. For datasets exceeding 10,000 records, consider splitting the data into smaller batches to avoid performance bottlenecks. Test the application with your specific dataset to determine optimal performance. -## Sample Code +## Sample code A complete working example is available in the [Syncfusion Blazor AI Samples GitHub repository](https://github.com/syncfusion/smart-ai-samples). diff --git a/blazor/smart-ai-solutions/ai/azure-openai.md b/blazor/smart-ai-solutions/ai/azure-openai.md index 81b886feb1..65c002cb39 100644 --- a/blazor/smart-ai-solutions/ai/azure-openai.md +++ b/blazor/smart-ai-solutions/ai/azure-openai.md @@ -1,7 +1,7 @@ --- layout: post title: Azure OpenAI Integration with Syncfusion Blazor AI | Syncfusion -description: Learn how to set up and use Syncfusion.Blazor.AI with Azure OpenAI for AI-powered features in your Blazor apps, including configuration and examples. +description: Learn here about how to set up and use Syncfusion.Blazor.AI with Azure OpenAI for AI-powered features in your Blazor apps, including configuration and examples. platform: Blazor control: AI Integration documentation: ug @@ -9,11 +9,11 @@ documentation: ug # Azure OpenAI Integration with Syncfusion® Blazor AI -The [Syncfusion Blazor AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) library enables seamless integration with [Azure OpenAI](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource) to add AI-driven features to Blazor applications. These features include natural language querying (converting plain English queries to structured data filters), data analysis (processing and summarizing datasets), and content processing (generating or refining text). +The [Syncfusion Blazor AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) library integrates with [Azure OpenAI](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource) to add AI-driven features to Blazor applications. These features include natural language querying (converting plain English queries to structured data filters), data analysis (processing and summarizing datasets), and content processing (generating or refining text). ## Prerequisites -To integrate Azure OpenAI with a Blazor WebApp Server, ensure the following: +To integrate Azure OpenAI with a Blazor Web App (Server), ensure the following: - The following NuGet packages are installed: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -28,13 +28,13 @@ Install-Package Azure.AI.OpenAI - An [Azure OpenAI Service resource and model](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource) is deployed to obtain `apiKey`, `deploymentName`, and `endpoint` values. - The [Syncfusion Blazor system requirements](https://blazor.syncfusion.com/documentation/system-requirements) are met. -- Credentials are stored securely using Azure Key Vault or environment variables (see [Microsoft’s guide on secure storage](https://learn.microsoft.com/en-us/aspnet/core/security/app-secrets)). +- Credentials are stored securely using Azure Key Vault or environment variables (see the [Microsoft guide on secure storage](https://learn.microsoft.com/en-us/aspnet/core/security/app-secrets)). ## Configuration Steps ### Register AI Services in Program.cs -To configure Azure OpenAI in a Blazor WebApp Server, update the `Program.cs` file as follows: +To configure Azure OpenAI in a Blazor Web App (Server), update the `Program.cs` file as follows: ```csharp // Add required namespaces @@ -370,8 +370,8 @@ This example illustrates how the Syncfusion Blazor AI library integrates with Az - **UI Components**: Syncfusion Tab, QueryBuilder, and Grid components integrate with the AI service for dynamic query processing. ## Error Handling -- **Invalid Credentials**: Ensure the API key, endpoint, and model are valid and correctly configured in environment variables or Azure Key Vault. -- **Rate Limits**: Azure OpenAI usage may be limited based on your subscription. Check [Azure OpenAI pricing documentation](https://azure.microsoft.com/en-us/pricing/details/cognitive-services/openai-service/) for details. +- **Invalid credentials**: Ensure the API key, endpoint, and model are valid and correctly configured in environment variables or Azure Key Vault. +- **Rate limits**: Azure OpenAI usage may be limited based on your subscription. See the [Azure OpenAI pricing documentation](https://azure.microsoft.com/en-us/pricing/details/cognitive-services/openai-service/) for details. ## See Also - [Syncfusion Blazor QueryBuilder Documentation](https://blazor.syncfusion.com/documentation/query-builder/getting-started-webapp) diff --git a/blazor/smart-ai-solutions/ai/custom-ai-service.md b/blazor/smart-ai-solutions/ai/custom-ai-service.md index 46d8081c53..20e490d034 100644 --- a/blazor/smart-ai-solutions/ai/custom-ai-service.md +++ b/blazor/smart-ai-solutions/ai/custom-ai-service.md @@ -95,16 +95,16 @@ builder.Services.AddSingleton(); This example illustrates how the Syncfusion Blazor AI library integrates with a custom AI service (DeepSeek): 1. **Setup**: Implement and register the custom AI service in `Program.cs` using secure credentials. -2. **Component Integration**: Inject `IChatInferenceService` to process AI requests within Syncfusion components like Smart TextArea. +2. **Component integration**: Inject `IChatInferenceService` into components (for example, Smart TextArea or other Syncfusion controls) to send AI prompts and receive responses. 3. **Request Formatting**: Convert Syncfusion AI parameters into the custom provider’s API format (e.g., DeepSeek’s JSON structure). 4. **Response Processing**: Parse the provider’s response and update the component (e.g., displaying text suggestions). ### Key Components -- **IChatInferenceService**: Interface for interacting with custom AI providers. -- **AIServiceCredentials**: Syncfusion class for managing API keys, endpoints, and model names. -- **GenerateResponseAsync**: Sends asynchronous requests to the custom AI provider and retrieves responses. +- `IChatInferenceService`: Interface used by Syncfusion Blazor AI to interact with custom AI providers through a unified contract. +- `AIServiceCredentials`: Class for managing API keys, endpoints, and model names through configuration. +- `GenerateResponseAsync`: Method that sends asynchronous requests to the custom AI provider and retrieves responses. ## Error Handling -- **Invalid API Key**: Ensure the API key is valid and stored securely in environment variables or a configuration service. -- **Rate Limits**: Check the custom AI provider’s documentation (e.g., [DeepSeek API docs](https://platform.deepseek.com)) for rate limit details. +- **Invalid API key**: Verify the API key and scope, and load it from configuration or a secure secret store. +- **Rate limits**: Review provider-specific rate limits and implement back off or retries where appropriate (see the provider’s documentation, such as the [DeepSeek API docs](https://platform.deepseek.com)). - **Network or Parsing Errors**: Handle HTTP or JSON errors gracefully, as shown in the `DeepSeekAIService` implementation. \ No newline at end of file diff --git a/blazor/smart-ai-solutions/ai/ollama.md b/blazor/smart-ai-solutions/ai/ollama.md index 83f8cecf19..ffc5972945 100644 --- a/blazor/smart-ai-solutions/ai/ollama.md +++ b/blazor/smart-ai-solutions/ai/ollama.md @@ -1,7 +1,7 @@ --- layout: post title: Ollama Integration with Syncfusion Blazor AI | Syncfusion -description: Learn how to configure and use Syncfusion Blazor AI with Ollama for AI-driven features like data restructuring in Blazor applications. +description: Learn how to configure and use Syncfusion Blazor AI with Ollama for AI-driven features like data restructuring in Blazor applications. Explore to more details. platform: Blazor control: AI Integration documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Ollama Integration with Syncfusion® Blazor AI -The [Syncfusion Blazor AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) library enables seamless integration with [Ollama](https://ollama.com/) to add AI-driven features to Blazor applications using locally hosted AI models. These features include data restructuring (organizing data into hierarchical formats), content analysis (evaluating text or data patterns), and hierarchical organization (assigning parent-child relationships). +The [Syncfusion Blazor AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) library enables integration with [Ollama](https://ollama.com/) to add AI-driven features to Blazor applications using locally hosted AI models. These features include data restructuring (organizing data into hierarchical formats), content analysis (evaluating text or data patterns), and hierarchical organization (assigning parent–child relationships). ## Prerequisites @@ -24,13 +24,13 @@ Install-Package OllamaSharp {% endhighlight %} {% endtabs %} -- [Ollama](https://ollama.com/docs) is installed on your local system (no virtual machines required). -- An Ollama model (e.g., `llama2`) is downloaded using the command: +- [Ollama](https://ollama.com/docs) is installed on the local system (no virtual machines required). +- An Ollama model (for example, `llama2`) is downloaded using the command: ```bash ollama run llama2 ``` - The [Syncfusion Blazor system requirements](https://blazor.syncfusion.com/documentation/system-requirements) are met. -- Sufficient hardware resources (e.g., CPU/GPU, memory) are available for local model performance. +- Sufficient hardware resources (for example, CPU/GPU and memory) are available for local model performance. ## Configuration Steps @@ -53,6 +53,10 @@ builder.Services.AddChatClient(chatClient); builder.Services.AddSingleton(); ``` +- The example targets the default Ollama endpoint at http://localhost:11434. If Ollama runs on a different host or port, update the base URL accordingly. +- Ensure the registered client implements or adapts to `Microsoft.Extensions.AI.IChatClient`. If using a third‑party client, provide an adapter that conforms to `IChatClient` so the dependency injection registration succeeds. +- `SyncfusionAIService` provides an implementation of `IChatInferenceService` that integrates with the configured chat client. + ## Smart Data Restructuring with Ollama and TreeGrid This example demonstrates using the Syncfusion Blazor AI library with Ollama to perform intelligent data restructuring in a Syncfusion Blazor TreeGrid component. The application organizes hierarchical data by leveraging Ollama to assign appropriate `ParentId` values based on `CategoryName` relationships, updating the TreeGrid to reflect the corrected hierarchical structure. @@ -125,7 +129,7 @@ await builder.Build().RunAsync(); {% endtabs %} **For Server Render Mode**: -If the **Interactive Render Mode** is set to `Server`, the project will contain a single **~/Program.cs** file. In this case, the Syncfusion® Blazor Service should be registered within that `~/Program.cs` file. +If the **Interactive Render Mode** is set to `Server`, the project will contain a single **~/Program.cs** file. In this case, the Syncfusion® Blazor service should be registered within that `~/Program.cs` file. {% tabs %} {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} @@ -285,22 +289,21 @@ namespace OllamaExample.Components.Pages This example illustrates how the Syncfusion Blazor AI library integrates with Ollama to reorganize hierarchical data in a TreeGrid: -1. **Setup**: Configure the Ollama service in `Program.cs` with a local endpoint and a downloaded model (e.g., `llama2`). -2. **Component Integration**: Inject `IChatInferenceService` to process TreeGrid data for restructuring. -3. **Prompt Engineering**: Craft a detailed prompt to instruct Ollama to analyze `CategoryName` relationships and assign appropriate `ParentId` values. -4. **Response Processing**: Parse the JSON response from Ollama and update the TreeGrid to reflect the corrected hierarchy. +1. **Setup**: Configure the Ollama service in `Program.cs` with a local endpoint and a downloaded model (for example, `llama2`). +2. **Component integration**: Inject `IChatInferenceService` to process TreeGrid data for restructuring. +3. **Prompt engineering**: Provide instructions for analyzing `CategoryName` relationships and assigning appropriate `ParentId` values. +4. **Response processing**: Parse the JSON response from Ollama and update the TreeGrid to reflect the corrected hierarchy. ### Key Components -- **IChatInferenceService**: Injected service for interacting with Ollama models. +- **IChatInferenceService**: Injected service for interacting with Ollama models via the configured chat client. - **ChatParameters**: Configures the AI request with prompts and user messages. - **GenerateResponseAsync**: Sends asynchronous requests to Ollama and retrieves responses. - **UI Components**: Syncfusion TreeGrid and Button components integrate with the AI service for dynamic updates. ## Error Handling -- **Model Not Found**: Ensure the specified Ollama model (e.g., `llama2`) is downloaded and available. -- **JSON Parsing Errors**: Handle invalid JSON responses by logging errors or displaying user-friendly messages, as shown in the `OpenAIHandler` method. -- **Resource Limitations**: Local models require sufficient hardware (e.g., 8GB RAM for `llama2`). Check [Ollama documentation](https://ollama.com/docs) for model-specific requirements. +- **Model not found**: Ensure the specified Ollama model (for example, `llama2`) is downloaded and available. +- **JSON parsing errors**: Handle invalid JSON responses by logging errors or displaying user-friendly messages, as shown in the `OpenAIHandler` method. +- **Resource limitations**: Local models require sufficient hardware (e.g., 8GB RAM for `llama2`). Check [Ollama documentation](https://ollama.com/docs) for model-specific requirements. ## See Also -- [Syncfusion Blazor TreeGrid Documentation](https://blazor.syncfusion.com/documentation/treegrid/getting-started-webapp) - +- [Syncfusion Blazor TreeGrid Documentation](https://blazor.syncfusion.com/documentation/treegrid/getting-started-webapp) \ No newline at end of file diff --git a/blazor/smart-ai-solutions/ai/openAI.md b/blazor/smart-ai-solutions/ai/openAI.md index b5ea39ba0a..6adb831850 100644 --- a/blazor/smart-ai-solutions/ai/openAI.md +++ b/blazor/smart-ai-solutions/ai/openAI.md @@ -1,7 +1,7 @@ --- layout: post title: OpenAI Integration with Syncfusion Blazor AI | Syncfusion -description: Learn how to configure and use the Syncfusion.Blazor.AI library with OpenAI, including setup, integration steps, and practical examples. +description: Learn how to configure and use the Syncfusion.Blazor.AI library with OpenAI, including setup, integration steps, practical examples. Explore to more details. platform: Blazor control: AI Integration documentation: ug @@ -9,12 +9,12 @@ documentation: ug # OpenAI Integration with Syncfusion® Blazor AI -The [Syncfusion Blazor AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) library enables seamless integration with [OpenAI](https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key) to add AI-driven features to Blazor applications. These features include anomaly detection (identifying irregular data patterns), data analysis (processing and summarizing data), and content generation (creating text based on user input). +The [Syncfusion Blazor AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) library integrates with [OpenAI](https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key) to add AI-driven features to Blazor applications. These features include anomaly detection (identifying irregular data patterns), data analysis (processing and summarizing data), and content generation (creating text based on user input). ## Prerequisites -To integrate OpenAI with a Blazor WebApp Server, ensure the following: -- The following NuGet packages are installed: +To integrate OpenAI with a Blazor Web App (Server), ensure the following: +- Install these NuGet packages: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -25,15 +25,15 @@ Install-Package Microsoft.Extensions.AI.OpenAI {% endhighlight %} {% endtabs %} -- An [OpenAI API key](https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key) is obtained from the OpenAI platform. -- The [Syncfusion Blazor system requirements](https://blazor.syncfusion.com/documentation/system-requirements) are met. -- The API key is stored securely using environment variables or user secrets (see [Microsoft’s guide on user secrets](https://learn.microsoft.com/en-us/aspnet/core/security/app-secrets)). +- Obtain an [OpenAI API key](https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key) from the OpenAI platform. +- Ensure the [Syncfusion Blazor system requirements](https://blazor.syncfusion.com/documentation/system-requirements) are met. +- Store the API key securely using environment variables or user secrets (see the [Microsoft guide on user secrets](https://learn.microsoft.com/en-us/aspnet/core/security/app-secrets)). ## Configuration Steps ### Register AI Services in Program.cs -To configure OpenAI in a Blazor WebApp Server, update the `Program.cs` file as follows: +To configure OpenAI in a Blazor Web App (Server), update the `Program.cs` file as follows: ```csharp // Add required namespaces @@ -54,7 +54,7 @@ builder.Services.AddSingleton(); ## Anomaly Detection with OpenAI and Syncfusion® Blazor Grid -This example demonstrates using the Syncfusion Blazor AI library with OpenAI to perform anomaly detection in a Syncfusion Blazor Grid. The grid displays machine data (MachineID, Temperature, Pressure, Voltage, MotorSpeed, ProductionRate), and OpenAI identifies rows with inconsistent production rates based on operational factors, updating the grid with anomaly descriptions and visual styling. +This example uses the Syncfusion Blazor AI library with OpenAI to perform anomaly detection in a Syncfusion Blazor Grid. The grid displays machine data (MachineID, Temperature, Pressure, Voltage, MotorSpeed, ProductionRate). OpenAI analyzes operational factors to identify rows with inconsistent production rates and updates the grid with anomaly descriptions and visual styling. ### Setup Prerequisites - Install the following NuGet packages: @@ -354,23 +354,23 @@ namespace OpenAIExample.Components.Pages ## How It Works -This example illustrates how the Syncfusion Blazor AI library integrates with OpenAI to analyze data in a Blazor Grid: +This example shows how the Syncfusion Blazor AI library integrates with OpenAI to analyze data in a Blazor Grid: -1. **Setup**: Configure the OpenAI service in `Program.cs` using a secure API key and a specified model (e.g., `gpt-4`). -2. **Component Integration**: Inject `IChatInferenceService` to process data from the Syncfusion Blazor Grid. -3. **Prompt Engineering**: Craft precise prompts to instruct OpenAI to identify anomalies based on data patterns (e.g., inconsistent ProductionRate relative to Temperature or MotorSpeed). -4. **Response Processing**: Parse OpenAI’s JSON response to update the Grid with anomaly descriptions and apply visual styling. +1. **Setup**: Configure the OpenAI service in `Program.cs` using a secure API key and a specified model (for example, `gpt-4`). +2. **Component integration**: Inject `IChatInferenceService` to process data from the Syncfusion Blazor Grid. +3. **Prompt engineering**: Craft precise prompts to instruct OpenAI to identify anomalies based on data patterns (for example, inconsistent `ProductionRate` relative to `Temperature` or `MotorSpeed`). +4. **Response processing**: Parse OpenAI’s JSON response to update the grid with anomaly descriptions and apply visual styling. ### Key Components - **IChatInferenceService**: Injected service for interacting with OpenAI models. - **ChatParameters**: Configures the AI request with prompts and user messages. - **GenerateResponseAsync**: Sends asynchronous requests to OpenAI and retrieves responses. -- **UI Components**: Syncfusion Grid and Button components integrate with the AI service for dynamic updates. +- **UI components**: Syncfusion Grid and Button components integrate with the AI service for dynamic updates. ## Error Handling -- **Invalid API Key**: Ensure the API key is valid and correctly configured in environment variables or user secrets. -- **Rate Limits**: OpenAI API usage may be limited based on your plan. -- **Network Issues**: Handle connectivity errors by implementing retry logic or displaying user-friendly messages. +- **Invalid API key**: Ensure the API key is valid and correctly configured in environment variables or user secrets. +- **Rate limits**: OpenAI API usage may be limited based on the plan. +- **Network issues**: Handle connectivity errors by implementing retry logic or displaying user-friendly messages. ## See Also - [Syncfusion Blazor Grid Documentation](https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app) \ No newline at end of file diff --git a/blazor/smart-ai-solutions/ai/overview.md b/blazor/smart-ai-solutions/ai/overview.md index fd184976d4..87a62f05f5 100644 --- a/blazor/smart-ai-solutions/ai/overview.md +++ b/blazor/smart-ai-solutions/ai/overview.md @@ -1,20 +1,20 @@ --- layout: post title: Syncfusion Blazor AI Library Overview | Syncfusion -description: Discover the Syncfusion Blazor AI library, its key features, supported AI providers, and how it powers AI-driven features in Blazor applications. +description: Learn her about discover the Syncfusion Blazor AI library, its key features, supported AI providers, how it powers AI-driven features in Blazor applications. platform: Blazor control: AI Integration documentation: ug --- # Syncfusion® Blazor AI Library Overview -The [Syncfusion Blazor AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) library provides robust AI integration for Blazor applications, enabling seamless connections to leading AI services such as [OpenAI](https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key), [Azure OpenAI](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource), [Ollama](https://ollama.com), and custom AI providers. This library forms the backbone for Syncfusion’s intelligent components, including the [Smart TextArea](https://blazor.syncfusion.com/documentation/smart-textarea/getting-started) and [Smart Paste Button](https://blazor.syncfusion.com/documentation/smart-paste/getting-started), empowering developers to build AI-enhanced applications. It offers text completion capabilities, delivering real-time suggestions, content generation, and intelligent text processing tailored to user input and application needs. +The [Syncfusion Blazor AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) library provides robust AI integration for Blazor applications, enabling connections to leading AI services such as [OpenAI](https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key), [Azure OpenAI](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource), [Ollama](https://ollama.com), and custom AI providers. The library powers Syncfusion intelligent components, including the [Smart TextArea](https://blazor.syncfusion.com/documentation/smart-textarea/getting-started) and [Smart Paste Button](https://blazor.syncfusion.com/documentation/smart-paste/getting-started), enabling AI‑enhanced applications. It offers text completion capabilities for real-time suggestions, content generation, and intelligent text processing tailored to user input and application needs. ## Prerequisites To use the Syncfusion Blazor AI library, ensure the following: -- Install the `Syncfusion.Blazor.AI` NuGet package. -- Obtain API keys for your chosen AI provider (e.g., OpenAI or Azure OpenAI). -- Configure the Blazor application to support HTTP requests for cloud-based AI services or local setup for Ollama. +- Install the `Syncfusion.Blazor.AI` NuGet package +- Obtain API keys for the chosen AI provider (for example, OpenAI, Azure OpenAI, or Ollama) +- Configure HTTP access for cloud-based providers or local setup for Ollama ## Key Features - **Multi-Provider AI Support**: @@ -36,6 +36,6 @@ To use the Syncfusion Blazor AI library, ensure the following: - Cloud-based AI services may have rate limits or require stable internet connectivity. - Local models like Ollama demand sufficient hardware resources for optimal performance. -## See Also -- [Smart TextArea Documentation](https://blazor.syncfusion.com/documentation/smart-paste/getting-started-webapp) -- [Smart Paste Button Documentation](https://blazor.syncfusion.com/documentation/smart-textarea/getting-started-webapp) \ No newline at end of file +## See also +- [Smart TextArea documentation](https://blazor.syncfusion.com/documentation/smart-textarea/getting-started-webapp) +- [Smart Paste Button documentation](https://blazor.syncfusion.com/documentation/smart-paste/getting-started-webapp) \ No newline at end of file diff --git a/blazor/visual-studio-code-integration/upgrade-project.md b/blazor/visual-studio-code-integration/upgrade-project.md index 70af54c052..60bb491d4b 100644 --- a/blazor/visual-studio-code-integration/upgrade-project.md +++ b/blazor/visual-studio-code-integration/upgrade-project.md @@ -1,36 +1,36 @@ --- layout: post -title: Upgrade Project to Latest Version in Blazor | Syncfusion -description: Learn here about how to upgrade the project to the latest version using the Syncfusion Blazor extension for Visual Studio Code. Explore to more details. +title: Upgrade a project to the latest version | Syncfusion +description: Learn here about how to upgrade a project to the latest version using the Syncfusion Blazor extension for Visual Studio Code. Explore to more details. platform: Blazor -component: Common +control: Common documentation: ug --- -# Upgrading Syncfusion® Blazor application to updated version +# Upgrading Syncfusion® Blazor application to new version -The Syncfusion® Blazor Migration is an add-in for Visual Studio Code allows you to migrate an existing Syncfusion® Blazor Web Application from one Essential Studio® version to another. +The Syncfusion® Blazor migration add-in for Visual Studio Code enables upgrading an existing Syncfusion® Blazor web application from one Essential Studio® version to another. - N> The Syncfusion® Blazor Web Application Project Migration utility is available from `v17.4.0.39`. +N> The Syncfusion Blazor Web Application project migration utility is available from version `v17.4.0.39`. -The steps below assist you to migrating existing Syncfusion® Blazor Web Application. +Use the following steps to migrate an existing Syncfusion® Blazor Web Application. -1. Open an existing Syncfusion® Blazor Web Application or create a new Syncfusion® Blazor Web Application in Visual Studio Code. +1. In Visual Studio Code, open an existing Syncfusion® Blazor Web Application or create a new one. -2. Select **Migrate Syncfusion® Blazor Application to another version...** from the context menu when you right-click on the **Project file** from Explorer (Workspace). Refer to the screenshot below. +2. In Explorer (Workspace), right-click the project file and select **Migrate Syncfusion® Blazor Application to another version...** from the context menu. Refer to the screenshot below. - ![Migration add-in](images/Migration.PNG) + ![Context menu showing Migrate Syncfusion Blazor Application command](images/Migration.PNG) - N> If you have a Syncfusion® Blazor reference in your application, the Migration option will be enabled. + N> The Migration option is available only when the application already references Syncfusion® Blazor packages. -3. **Select Blazor Version** (which published in `nuget.org`) from the palette appears. +3. From the Command Palette, choose **Select Blazor Version** and pick the required Syncfusion® Blazor package version published on `nuget.org`. - ![Select Blazor Version](images/VersionSelection.PNG) + ![Palette showing selection of Syncfusion Blazor version](images/VersionSelection.PNG) -4. The Syncfusion® NuGet packages references and themes are updated to the selected version in the application. +4. The Syncfusion® Blazor NuGet package references and theme links are updated to the selected version in the application. - ![NuGetPackage](images/NuGetPackage.png) + ![Project file updated with new Syncfusion NuGet package versions](images/NuGetPackage.png) - ![CDNLink](images/CDNLink.png) + ![Theme link updated to the selected version](images/CDNLink.png) 5. If you installed the trial setup or NuGet packages from nuget.org you must register the Syncfusion® license key to your application since Syncfusion® introduced the licensing system from 2018 Volume 2 (v16.2.0.41) Essential Studio® release. Navigate to the [help topic](https://help.syncfusion.com/common/essential-studio/licensing/overview#how-to-generate-syncfusion-license-key) to generate and register the Syncfusion® license key to your application. Refer to this [UG](https://blazor.syncfusion.com/documentation/getting-started/license-key/overview) topic for understanding the licensing details in Essential Studio® for Blazor. \ No newline at end of file diff --git a/blazor/visual-studio-integration/Syncfusion-Notifications.md b/blazor/visual-studio-integration/Syncfusion-Notifications.md index 01a74c23c9..e0d7d386d9 100644 --- a/blazor/visual-studio-integration/Syncfusion-Notifications.md +++ b/blazor/visual-studio-integration/Syncfusion-Notifications.md @@ -1,51 +1,51 @@ --- layout: post -title: Notifications | Blazor | Syncfusion -description: For displaying the notifications about trial and newer version update information for Syncfusion applications. +title: Syncfusion notifications in Blazor | Syncfusion +description: Configure and understand Syncfusion notifications in Blazor applications, including trial license alerts, newer NuGet package updates, ES build notifications. platform: Blazor control: Syncfusion Extensions documentation: ug --- -# Syncfusion® Notifications +# Syncfusion® notifications Syncfusion® enhances the user experience in Blazor applications through notification messages. These notifications cover various aspects, including alerts for trial applications when using Syncfusion® trial assemblies, updates about the availability of the latest Syncfusion® NuGet package, and notifications about newer releases of Essential Studio®. By keeping users informed, Syncfusion® ensures that developers stay up to date with the latest features and enhancements. -N> The Syncfusion® Notification feature is available from Essential Studio® v22.1.34. +N> The Syncfusion® notifications feature is available starting with Essential Studio® v22.1.34. -## Notification Configuration +## Notification configuration -The Syncfusion® Options page allows you to configure notification settings. Customise trial and newer version notifications with a simple true or false toggle. +Notification behavior is configured in Visual Studio on the Syncfusion® Options page. Use the toggles to true or false trial and newer version notifications. -It can be accessed by clicking **Tools -> Options -> Syncfusion -> Blazor** +To access the settings, go to **Tools -> Options -> Syncfusion -> Blazor**. - ![Option Page](images/blazor_optionPage.png) + ![Visual Studio Options page for Syncfusion Blazor notifications](images/blazor_optionPage.png) -## Notification Types +## Notification types -**1. Syncfusion® Trial Application Notification** +**1. Syncfusion® trial application notification** -When you utilize Syncfusion® trial assemblies in your Blazor application, you will receive a notification stating, **This application uses a trial Syncfusion® license.** This notification encourages you to obtain a valid license key, enabling you to fully explore and experience the extensive features and capabilities offered by Syncfusion®. +When trial licensing is detected in a Blazor application, a message is shown: **This application uses a trial Syncfusion® license.** This notification encourages you to obtain a valid license key, enabling you to fully explore and experience the extensive features and capabilities offered by Syncfusion®. - ![Trial Notification](images/blazor_trial.png) + ![In-app banner indicating the application uses a trial Syncfusion license](images/blazor_trial.png) -**2. Newer Syncfusion® NuGet Package Notification** +**2. Newer Syncfusion® NuGet package notification** -If you have installed lower versions of Syncfusion® NuGet packages in your application, you will be notified about the availability of higher versions of Syncfusion® NuGet packages on nuget.org. This empowers you to easily identify opportunities to upgrade and gain access to new features, performance enhancements, and bug fixes. +If older Syncfusion® NuGet packages are referenced, a notification indicates that newer versions are available on NuGet.org. Upgrading provides access to new features, performance improvements, and bug fixes. - ![NuGet Notification](images/blazor_nuget.png) + ![Notification indicating newer Syncfusion NuGet packages are available](images/blazor_nuget.png) -**3. Newer Essential Studio® Build Notification** +**3. Newer Essential Studio® build notification** -If you use older versions of Syncfusion® assemblies or NuGet packages from **Essential Studio® Blazor,** Syncfusion® will notify you about new releases for the latest Essential Studio® build. Updating to the newest version ensures access to recent features, enhancements, and important updates, maximizing the capabilities of Syncfusion® in your Blazor development projects. +When using older Essential Studio® assemblies or NuGet packages, a notification announces the availability of a newer Essential Studio® build for Blazor. Updating to the newest version ensures access to recent features, enhancements, and important updates, maximizing the capabilities of Syncfusion® in your Blazor development projects. - ![Build Notification](images/blazor_build.png) + ![Notification announcing a newer Essential Studio build is available](images/blazor_build.png) -**4. Invalid License Key Notification** +**4. Invalid license key notification** If you have mistakenly used an incorrect license key or a license from another version or platform in your Blazor application, Syncfusion® will display a notification message stating, **The provided Syncfusion® license key is invalid**. This message serves as a reminder to obtain a valid license key and ensure proper licensing for Syncfusion® components. - ![Invalid Notification](images/blazor_invalid.png) + ![Notification indicating the provided Syncfusion license key is invalid](images/blazor_invalid.png) diff --git a/blazor/visual-studio-integration/convert-project.md b/blazor/visual-studio-integration/convert-project.md index 146307ea28..1ef92b4d70 100644 --- a/blazor/visual-studio-integration/convert-project.md +++ b/blazor/visual-studio-integration/convert-project.md @@ -1,52 +1,52 @@ --- layout: post -title: Convert Project in Blazor | Syncfusion -description: Learn here about how to convert the blazor application to Syncfusion Blazor application using Syncfusion Blazor Extension for Visual Studio. +title: Convert a Blazor project to Syncfusion Blazor | Syncfusion +description: Learn how to convert an existing Blazor application to a Blazor application using the Blazor Extension for VS 2022, including NuGet package installation. platform: Blazor -component: Common +control: Common documentation: ug --- # Converting Blazor application to Syncfusion® Blazor application -The Syncfusion® Blazor conversion is a Visual Studio add-in that transforms an existing Blazor application into a Syncfusion® Blazor application by adding the necessary assemblies and theme files. +The Syncfusion® Blazor conversion is a Visual Studio add-in that transforms an existing Blazor application into a Syncfusion® Blazor application by installing the required NuGet packages and adding the corresponding theme styles to the layout. -The steps below help you to convert the **Blazor application** to the **Syncfusion® Blazor application** via the **Visual Studio 2022**: +The steps below describe how to convert a Blazor application to a Syncfusion® Blazor application using Visual Studio 2022. -N> Before use the Syncfusion® Blazor Project Conversion, check whether the Syncfusion® Blazor Template Studio Extension installed or not in Visual Studio Extension Manager by clicking on the Extensions -> Manage Extensions -> Installed. If this extension not installed, install the extension by follow the steps from the [download and installation](download-and-installation) help topic. +N> Before using the Syncfusion® Blazor Project Conversion, verify that the Syncfusion® Blazor Template Studio extension is installed in Visual Studio (Extensions -> Manage Extensions -> Installed). If the extension is not installed, install it by following the instructions in the [download and installation](download-and-installation) help topic. -1. Open your existing Blazor application or create a new Blazor application in Visual Studio 2022. +1. Open the existing Blazor application or create a new Blazor application in Visual Studio 2022. -2. To open the Syncfusion® Project Conversion Wizard, follow either one of the options below: +2. Open the Syncfusion® Project Conversion wizard using one of the following options: **Option 1:** - Choose **Extensions -> Syncfusion® -> Essential Studio® for Blazor -> Convert Project...** in the Visual Studio menu. + Choose **Extensions -> Syncfusion® -> Essential Studio® for Blazor -> Convert Project...** from the Visual Studio menu. - ![ConversionMenu](images/ConversionMenu.png) + ![Open Convert Project from the Extensions menu in Visual Studio](images/ConversionMenu.png) **Option 2:** - Right-click the application from the **Solution Explorer** and select the **Syncfusion® Blazor** and choose the **Convert to Syncfusion® Blazor application...** + In **Solution Explorer**, right-click the project, select **Syncfusion® Blazor**, and then choose **Convert to Syncfusion® Blazor application...** - ![ConversionAddin](images/ConversionAddin.png) + ![Open Convert Project from the Solution Explorer context menu](images/ConversionAddin.png) -3. The Syncfusion® Blazor Project Conversion window will appear. You can choose the required version of Syncfusion® Blazor and Themes to convert the application. +3. In the Syncfusion® Blazor Project Conversion window, select the required Syncfusion® Blazor version and theme to apply to the application. - ![ConversionWizard](images/Conversion.png) + ![Syncfusion Blazor Project Conversion wizard with version and theme selection](images/Conversion.png) - N> The versions are loaded from the Syncfusion® Blazor NuGet packages published in [`NuGet.org`](https://www.nuget.org/packages?q=Tags%3A%22blazor%22syncfusion) and it requires internet connectivity. + N> Versions are loaded from the Syncfusion® Blazor NuGet packages available on [`NuGet.org`](https://www.nuget.org/packages?q=Tags%3A%22blazor%22syncfusion) and require an active internet connection. -4. Check the **“Enable a backup before converting”** checkbox if you want to take the project backup and choose the location. +4. Select the **Enable a backup before converting** checkbox to create a project backup, and then choose the backup location. -5. Once the conversion process has been completed, you will get a successful message window. +5. After the conversion completes, a confirmation message is displayed. - ![ConversionSuccessMessage](images/ConversionSuccess.png) + ![Conversion succeeded message after completing the conversion](images/ConversionSuccess.png) - If you enabled project backup before converting, the old application was saved in the specified backup path location, as shown below once the conversion process completed. + If a backup was enabled, the original project is saved to the specified backup path after conversion, as shown below. - ![ConversionBackupLocation](images/Backuplocation.png) + ![Backup location for the original project created during conversion](images/Backuplocation.png) -6. The selected Blazor application is converted into a Syncfusion® Blazor application by installing the appropriate Syncfusion® Blazor NuGet packages with the selected version and adding the chosen styles to the corresponding layout file. +6. The selected Blazor application is converted to a Syncfusion® Blazor application by installing the appropriate Syncfusion® Blazor NuGet packages for the chosen version and adding the selected theme styles to the project’s layout file. -7. If you installed the trial setup or NuGet packages from nuget.org you must register the Syncfusion® license key to your application since Syncfusion® introduced the licensing system from 2018 Volume 2 (v16.2.0.41) Essential Studio® release. Navigate to the [help topic](https://help.syncfusion.com/common/essential-studio/licensing/overview#how-to-generate-syncfusion-license-key) to generate and register the Syncfusion® license key to your application. Refer to this [blog](https://www.syncfusion.com/blogs/post/whats-new-in-2018-volume-2) post for understanding the licensing changes introduced in Essential Studio®. \ No newline at end of file +7. If using a trial setup or packages from NuGet.org, a Syncfusion® license key must be registered with the application. Syncfusion® introduced license registration starting with the 2018 Volume 2 (v16.2.0.41) Essential Studio® release. Refer to the [licensing overview and key generation guide](https://help.syncfusion.com/common/essential-studio/licensing/overview#how-to-generate-syncfusion-license-key) to generate and register the Syncfusion® license key. For details about the licensing changes introduced in Essential Studio®, see the [2018 Volume 2 announcement](https://www.syncfusion.com/blogs/post/whats-new-in-2018-volume-2). \ No newline at end of file diff --git a/blazor/visual-studio-integration/images/MigrationAddin.png b/blazor/visual-studio-integration/images/MigrationAddin.png index 0ec7ac0395..9d729cf93d 100644 Binary files a/blazor/visual-studio-integration/images/MigrationAddin.png and b/blazor/visual-studio-integration/images/MigrationAddin.png differ diff --git a/blazor/visual-studio-integration/upgrade-project.md b/blazor/visual-studio-integration/upgrade-project.md index e90bf2fe4c..b63265eff4 100644 --- a/blazor/visual-studio-integration/upgrade-project.md +++ b/blazor/visual-studio-integration/upgrade-project.md @@ -1,52 +1,52 @@ --- layout: post -title: Upgrade Project in Blazor - Syncfusion -description: Learn here about how to upgrade the project in the Syncfusion Essential Blazor application to latest version. +title: Upgrade a Syncfusion Blazor project to the latest version | Syncfusion +description: Learn how to upgrade a Blazor application to latest version using Blazor Project Migration wizard in VS 2022, including NuGet package updates and backup option. platform: Blazor -component: Common +control: Common documentation: ug --- # Upgrading Syncfusion® Blazor application to latest version -The Syncfusion® Blazor migration add-in for Visual Studio allows you to migrate an existing Syncfusion® Blazor application from one version of Essential Studio® to another. This reduces the amount of manual work required during the migration process. +The Syncfusion® Blazor project migration wizard for Visual Studio updates an existing Syncfusion® Blazor application from one Essential Studio® version to another by upgrading the corresponding Syncfusion® Blazor NuGet packages. This reduces manual effort and helps keep projects current. -The steps below will assist you to upgrade the Syncfusion® version in the Syncfusion® Blazor application via Visual Studio 2022: +The steps below describe how to upgrade the Syncfusion® version in a Syncfusion® Blazor application using Visual Studio 2022. -N> Before use the Syncfusion® Blazor Project Migration, check whether the Syncfusion® Blazor Template Studio Extension installed or not in Visual Studio Extension Manager by clicking on the Extensions -> Manage Extensions -> Installed. If this extension not installed, install the extension by follow the steps from the [download and installation](download-and-installation) help topic. +N> Before using the Syncfusion® Blazor Project Migration, verify that the Syncfusion® Blazor Template Studio extension is installed in Visual Studio (Extensions -> Manage Extensions -> Installed). If the extension is not installed, install it by following the instructions in the [download and installation](download-and-installation) help topic. -1. Open the Syncfusion® Blazor application that uses the Syncfusion® component in the Visual Studio 2022. +1. Open the Syncfusion® Blazor application that uses Syncfusion® components in Visual Studio 2022. -2. To open the Migration Wizard, either one of the following options should be followed: +2. Open the Migration Wizard using one of the following options: **Option 1** - Choose **Extensions -> Syncfusion® -> Essential Studio® for Blazor -> Migrate Project…** from Visual Studio 2022 menu. + Choose **Extensions -> Syncfusion® -> Essential Studio® for Blazor -> Migrate Project…** from the Visual Studio 2022 menu. - ![MigrationMenu](images/MigrationMenu.PNG) + ![Open the Migrate Project wizard from the Extensions menu in Visual Studio](images/MigrationMenu.PNG) **Option 2** - Right-click the application from the **Solution Explorer** and select the **Syncfusion® Blazor** and choose the **Migrate Syncfusion® Blazor project from another version...** + In **Solution Explorer**, right-click the project, select **Syncfusion® Blazor**, and then choose **Migrate Syncfusion® Blazor project from another version...** - ![MigrationAddin](images/MigrationAddin.png) + ![Open the Migrate Project wizard from the Solution Explorer context menu](images/MigrationAddin.png) -3. The Syncfusion® Project Migration window will appear. You can choose the required version of Syncfusion® Blazor to migrate. +3. In the Syncfusion® Project Migration window, select the required Syncfusion® Blazor version to migrate to. - N> The versions are loaded from the Syncfusion® Blazor NuGet packages published in [`NuGet.org`](https://www.nuget.org/packages?q=Tags%3A%22blazor%22syncfusion) and it requires internet connectivity. + N> Versions are loaded from the Syncfusion® Blazor NuGet packages published on [NuGet.org](https://www.nuget.org/packages?q=Tags%3A%22blazor%22syncfusion) and require an active internet connection. - ![MigrationWizard](images/Migration.png) + ![Syncfusion Blazor Project Migration wizard with version selection](images/Migration.png) -4. Check the **“Enable a backup before migrating”** checkbox if you want to take the project backup and choose the location. +4. Select the **Enable a backup before migrating** checkbox to create a project backup, and then choose the backup location. -5. Once the migration process is completed, you will get a successful message window +5. After the migration completes, a confirmation message is displayed. - ![MigrationSuccessMessage](images/MigrationSuccess.png) + ![Migration succeeded message after completing the project migration](images/MigrationSuccess.png) - If you enabled project backup before migrating, the old application was saved in the specified backup path location, as shown below once the migration process completed. + If a backup was enabled, the original project is saved to the specified backup path after migration, as shown below. - ![MigrationBackupLocation](images/Backuplocation.png) + ![Backup location of the original project created during migration](images/Backuplocation.png) -6. The Syncfusion® Blazor NuGet packages are updated to the respective selected version in the Syncfusion® Blazor application. +6. The Syncfusion® Blazor NuGet packages are updated to the selected version in the Syncfusion® Blazor application. -7. If you installed the trial setup or NuGet packages from nuget.org you must register the Syncfusion® license key to your application since Syncfusion® introduced the licensing system from 2018 Volume 2 (v16.2.0.41) Essential Studio® release. Navigate to the [help topic](https://help.syncfusion.com/common/essential-studio/licensing/overview#how-to-generate-syncfusion-license-key) to generate and register the Syncfusion® license key to your application. Refer to this [blog](https://www.syncfusion.com/blogs/post/whats-new-in-2018-volume-2.aspx) post for understanding the licensing changes introduced in Essential Studio®. \ No newline at end of file +7. If using a trial setup or packages from NuGet.org, a Syncfusion® license key must be registered with the application. Syncfusion® introduced license registration starting with the 2018 Volume 2 (v16.2.0.41) Essential Studio® release. Refer to the [licensing overview and key generation guide](https://help.syncfusion.com/common/essential-studio/licensing/overview#how-to-generate-syncfusion-license-key) to generate and register the Syncfusion® license key. For details about the licensing changes introduced in Essential Studio®, see the [2018 Volume 2 announcement](https://www.syncfusion.com/blogs/post/whats-new-in-2018-volume-2.aspx). \ No newline at end of file