-
@@ -4946,7 +4962,7 @@
- 2025 Volume 3 - 31.*
- Weekly Nuget Release
-
- 31.2.5
- 31.2.4 +
- 31.2.10
- 31.2.5
- 31.2.4
- 31.2.3
- 31.1.23
- 31.1.22 diff --git a/blazor/Release-Notes/31.2.10.md b/blazor/Release-Notes/31.2.10.md new file mode 100644 index 0000000000..b660fb57ea --- /dev/null +++ b/blazor/Release-Notes/31.2.10.md @@ -0,0 +1,94 @@ +--- +title: Essential Studio for Blazor Release Notes - v31.2.10 +description: Learn here about the controls in the Essential Studio for Blazor Weekly Release - Release Notes - v31.2.10 +platform: blazor +documentation: ug +--- + +# Essential Studio for Blazor - v31.2.10 Release Notes + +{% include release-info.html date="November 12, 2025" version="v31.2.10" passed="74461" failed="0" %} + +{% directory path: _includes/release-notes/v31.2.10 %} + +{% include {{file.url}} %} + +{% enddirectory %} + +## Test Results + +| Component Name | Test Cases | Passed | Failed | Remarks | +|---------------|------------|--------|--------|---------| +| 3DChart | 198 | 198 | 0 | All Passed | +| Accordion | 232 | 232 | 0 | All Passed | +| AiAssistView | 297 | 297 | 0 | All Passed | +| Appbar | 102 | 102 | 0 | All Passed | +| Autocomplete | 444 | 444 | 0 | All Passed | +| BarcodeGenerator | 440 | 440 | 0 | All Passed | +| Breadcrumb | 137 | 137 | 0 | All Passed | +| Bulletchart | 237 | 237 | 0 | All Passed | +| Button | 255 | 255 | 0 | All Passed | +| Calendar | 146 | 146 | 0 | All Passed | +| Carousel | 174 | 174 | 0 | All Passed | +| Charts | 4172 | 4172 | 0 | All Passed | +| ChatUI | 102 | 102 | 0 | All Passed | +| Chips | 196 | 196 | 0 | All Passed | +| CircularGauge | 928 | 928 | 0 | All Passed | +| ColorPicker | 113 | 113 | 0 | All Passed | +| ComboBox | 248 | 248 | 0 | All Passed | +| DashboardLayout | 253 | 253 | 0 | All Passed | +| DataForm | 547 | 547 | 0 | All Passed | +| DataGrid | 5936 | 5936 | 0 | All Passed | +| DatePicker | 576 | 576 | 0 | All Passed | +| DateRangePicker | 366 | 366 | 0 | All Passed | +| DateTimePicker | 474 | 474 | 0 | All Passed | +| Diagram | 15310 | 15310 | 0 | All Passed | +| Dialog | 481 | 481 | 0 | All Passed | +| DropdownList | 584 | 584 | 0 | All Passed | +| Dropdowntree | 164 | 164 | 0 | All Passed | +| FileManager | 3108 | 3108 | 0 | All Passed | +| FileUpload | 330 | 330 | 0 | All Passed | +| FloatingActionButton | 128 | 128 | 0 | All Passed | +| Gantt | 4800 | 4800 | 0 | All Passed | +| HeatMap | 339 | 339 | 0 | All Passed | +| ImageEditor | 3561 | 3561 | 0 | All Passed | +| InPlaceEditor | 764 | 764 | 0 | All Passed | +| InputMask | 168 | 168 | 0 | All Passed | +| Kanban | 380 | 380 | 0 | All Passed | +| LinearGauge | 799 | 799 | 0 | All Passed | +| ListBox | 138 | 138 | 0 | All Passed | +| ListView | 441 | 441 | 0 | All Passed | +| Maps | 1570 | 1570 | 0 | All Passed | +| Mention | 152 | 152 | 0 | All Passed | +| Menu | 398 | 398 | 0 | All Passed | +| Message | 211 | 211 | 0 | All Passed | +| MultiselectDropdown | 386 | 386 | 0 | All Passed | +| NumericTextbox | 442 | 442 | 0 | All Passed | +| OtpInput | 123 | 123 | 0 | All Passed | +| PivotTable | 1378 | 1378 | 0 | All Passed | +| ProgressBar | 199 | 199 | 0 | All Passed | +| progressbutton | 101 | 101 | 0 | All Passed | +| QueryBuilder | 584 | 584 | 0 | All Passed | +| RangeNavigator | 196 | 196 | 0 | All Passed | +| Rating | 106 | 106 | 0 | All Passed | +| Ribbon | 451 | 451 | 0 | All Passed | +| RichTextEditor | 2768 | 2768 | 0 | All Passed | +| Scheduler | 5623 | 5623 | 0 | All Passed | +| Sidebar | 144 | 144 | 0 | All Passed | +| Slider | 271 | 271 | 0 | All Passed | +| SmithChart | 259 | 259 | 0 | All Passed | +| SparklineChart | 150 | 150 | 0 | All Passed | +| SpeedDial | 353 | 353 | 0 | All Passed | +| Splitter | 190 | 190 | 0 | All Passed | +| Stepper | 218 | 218 | 0 | All Passed | +| StockChart | 335 | 335 | 0 | All Passed | +| Tabs | 936 | 936 | 0 | All Passed | +| TextArea | 126 | 126 | 0 | All Passed | +| Textbox | 653 | 653 | 0 | All Passed | +| Timeline | 182 | 182 | 0 | All Passed | +| TimePicker | 419 | 419 | 0 | All Passed | +| Toast | 233 | 233 | 0 | All Passed | +| Toolbar | 230 | 230 | 0 | All Passed | +| TreeGrid | 4941 | 4941 | 0 | All Passed | +| TreeMap | 704 | 704 | 0 | All Passed | +| TreeView | 1361 | 1361 | 0 | All Passed | \ No newline at end of file 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 ``` - + 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 ``` - + 4.Run the below command to configure Electron.NET manifest tool and update the launch profile of the application. ``` dotnet electronize init ``` - + 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 ``` - + -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).  -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.  ### 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**.  ## 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.  ## 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.  ## 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.  ## 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.  ## 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.  -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.  -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. - + 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).  @@ -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 [  -* 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.  -## 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.  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.  -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.  -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).  @@ -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).  ## 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.  -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.  -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. -  +  -* 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. -  +  ## 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. -  +  3. Configure the project with required project name, select the location to save the application and click on Create. -  +  4. Select the type of Microsoft 365 Agent application to create. In this example, **Microsoft application with Tab** is selected. - + 5. Wait for the project to be created, and its dependencies to be restored, then the project structure looks like below. -  +  ## 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. -  -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. +  +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. -  -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 - -5. On clicking on "Open" the new Microsoft application with personal Tab is created. - +  +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. + +5. Click Open to create the new Microsoft application with a personal tab. + ## 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 %} - + -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  - 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.  -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.  -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.  -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/image-editor/how-to/render-dialog.md b/blazor/image-editor/how-to/render-dialog.md index 45e1db9d6a..0eb0ac9f2b 100644 --- a/blazor/image-editor/how-to/render-dialog.md +++ b/blazor/image-editor/how-to/render-dialog.md @@ -1,7 +1,7 @@ --- layout: post -title: Clear an Image with Blazor Image Editor Component | Syncfusion -description: Learn here all about Clear an Image in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App. +title: Render Image Editor in a Dialog Component | Syncfusion +description: Render the Blazor Image Editor in a modal dialog for a focused, space-saving editing experience in Blazor Server and WebAssembly applications. platform: Blazor control: Image Editor documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Render Image Editor in Dialog Component -Rendering the Image Editor in a dialog involves displaying the image editor component within a modal dialog window, allowing users to edit images in a pop-up interface. This can be useful for maintaining a clean layout and providing a focused editing experience without navigating away from the current page. +Rendering the Image Editor in a dialog displays the component within a modal window, enabling image editing in a pop-up interface. This approach helps maintain a clean layout and provides a focused editing experience without navigating away from the current page. ```cshtml @using Syncfusion.Blazor.ImageEditor @@ -18,49 +18,52 @@ Rendering the Image Editor in a dialog involves displaying the image editor comp @using Syncfusion.Blazor.Inputs - @if (this.ShowButton) - { --Open Image - } +Edit Image - +- -- ---- -- +@code { - private bool Visibility { get; set; } = false; - private bool ShowButton { get; set; } = true; - SfImageEditor ImageEditor; + private bool IsDialogVisible { get; set; } = false; + private bool IsImageEditorOpened { get; set; } = false; + private SfImageEditor ImageEditor; - private async void OpenDialogAsync() - { - this.Visibility = true; + private void OpenDialog() + { + IsDialogVisible = true; } - private async void OpenAsync() - { - await ImageEditor.OpenAsync("https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png"); + private void OnDialogOpened() + { + IsImageEditorOpened = true; } - private void BeforeDialogOpen(BeforeOpenEventArgs args) + private void OnDialogClosed() { - this.ShowButton = false; + IsImageEditorOpened = false; } - private void DialogClosed(CloseEventArgs args) + private async void OnImageEditorCreated() { - this.ShowButton = true; + await ImageEditor.OpenAsync("https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png"); } } ``` - \ No newline at end of file + \ No newline at end of file diff --git a/blazor/image-editor/images/blazor-image-editor-dialog.jpg b/blazor/image-editor/images/blazor-image-editor-dialog.jpg index d6c2ee7f1b..9a3a9b3546 100644 Binary files a/blazor/image-editor/images/blazor-image-editor-dialog.jpg and b/blazor/image-editor/images/blazor-image-editor-dialog.jpg differ diff --git a/blazor/smart-ai-solutions/ai-samples/kanban/sentiment-analysis.md b/blazor/smart-ai-solutions/ai-samples/kanban/sentiment-analysis.md new file mode 100644 index 0000000000..d66c1982d1 --- /dev/null +++ b/blazor/smart-ai-solutions/ai-samples/kanban/sentiment-analysis.md @@ -0,0 +1,531 @@ +--- +layout: post +title: Sentiment Analysis in Blazor Kanban | Syncfusion +description: Learn how to use Syncfusion Blazor Kanban with AI to analyze the emotional tone of tasks using sentiment analysis. +platform: Blazor +control: AI Integration +documentation: ug +keywords: Blazor Kanban, AI sentiment analysis, Syncfusion Blazor AI +--- + +# Sentiment Analysis in Blazor Kanban Component + +This guide demonstrates how to use the [**Syncfusion.Blazor.AI**](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package to perform sentiment analysis in the Syncfusion Blazor Kanban component. The AI integration enables automatic detection of emotional tone in task descriptions, helping teams prioritize and respond to tasks more effectively. These capabilities are powered by AI models hosted via services like OpenAI, Azure OpenAI, or Ollama. + +## Prerequisites + +Ensure the following NuGet packages are installed based on your chosen AI service: + +### For OpenAI +- **Microsoft.Extensions.AI** +- **Microsoft.Extensions.AI.OpenAI** + +### For Azure OpenAI +- **Microsoft.Extensions.AI** +- **Microsoft.Extensions.AI.OpenAI** +- **Azure.AI.OpenAI** + +### For Ollama +- **Microsoft.Extensions.AI** +- **OllamaSharp** + +{% tabs %} +{% highlight C# tabtitle="Package Manager" %} + +Install-Package Syncfusion.Blazor.Kanban -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.AI -Version {{ site.releaseversion }} +Install-Package Microsoft.Extensions.AI +Install-Package Microsoft.Extensions.AI.OpenAI # For OpenAI or Azure OpenAI +Install-Package Azure.AI.OpenAI # For Azure OpenAI +Install-Package OllamaSharp # For Ollama + +{% endhighlight %} +{% endtabs %} + +## 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: + +- 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**. + +```html + + + + + + +``` + +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 + +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. + +Follow the instructions for your selected service to register the AI model in your 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`. + +- Install the required NuGet packages: + +{% tabs %} +{% highlight C# tabtitle="Package Manager" %} + +Install-Package Microsoft.Extensions.AI +Install-Package Microsoft.Extensions.AI.OpenAI + +{% endhighlight %} +{% endtabs %} + +- Add the following to the **~/Program.cs** file in your Blazor WebApp: + +{% tabs %} +{% highlight C# tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %} + +using Syncfusion.Blazor.AI; +using Microsoft.Extensions.AI; +using OpenAI; + +var builder = WebApplication.CreateBuilder(args); + +string openAIApiKey = "API-KEY"; +string openAIModel = "OPENAI_MODEL"; +OpenAIClient openAIClient = new OpenAIClient(openAIApiKey); +IChatClient openAIChatClient = openAIClient.GetChatClient(openAIModel).AsIChatClient(); +builder.Services.AddChatClient(openAIChatClient); +builder.Services.AddSingleton+ ++ + ++ ++ @if (IsImageEditorOpened) + { +++ + } ++ ++ +``` + +`Home.razor.cs` + +```csharp + +using System.Text.Json; +using AISamples.Components.Models; +using Syncfusion.Blazor.DropDowns; +using Syncfusion.Blazor.Inputs; +using Syncfusion.Blazor.Kanban; + +namespace AISamples.Components.Pages +{ + public partial class Home + { + SfDropDownList+++ ++ @foreach (ColumnModel item in columnData) + { + ++ } + + + @{ + PizzaDataModel card = (PizzaDataModel)context; + +++ } + ++++
++ + ++ + + ++ ++
+ +++++++@card.Title++++ +
++ @if (card.Category == "Menu" || card.Category == "Order" || card.Category == "Ready to Serve") + { + ++ + } + else + { +@(card.Category == "Menu" ? card.Description : card.OrderID)++ + } ++
++ ++ ++ + @card.Date?.ToString("MM/dd/yyyy") + ++ @if (card.Category != "Menu") + { + if (card.Category == "Order") + { + + ++ + } + if (card.Category == "Ready to Serve") + { ++ ++15 mins++ + } + if (card.Category == "Delivered" || card.Category == "Served") + { ++ ++5 mins++ + } + } + } + else + { ++ + +++ + @{ + PizzaDataModel data = (PizzaDataModel)context; + ++ +
+ } + ++ +ID ++ ++ + +Category ++ ++ ++ + +Title ++ ++ + +Size ++ ++ + +Description ++ ++ + + @if (data.Category == "Delivered") + { +Deliver ++ ++ + + } + +Feedback ++ ++ Pizza = new PizzaDataModel().GetPizzaData(); + public string Content = "Check Customer Sentiments"; + private async Task GetScore() + { + this.IsSpinner = true; + string result = ""; + string json = JsonSerializer.Serialize(Pizza, new JsonSerializerOptions { WriteIndented = true }); + var description = "Provide a SentimentScore out of 5 (whole numbers only) based on the Feedback. If the feedback is null, do not give a SentimentScore. Use the dataset provided below to make recommendations. NOTE: Return the data in JSON format with all fields included, and return only JSON data, no explanatory text." + json; + result = await OpenAIService.GetCompletionAsync(description); + string data = result.Replace("```json", "").Replace("```", "").Replace("\r", "").Replace("\n", "").Replace("\t", "").Trim(); + this.Pizza = JsonSerializer.Deserialize CategoryData = new List () + { + new DropDownModel { Id = 0, Value = "Menu" }, + new DropDownModel { Id = 1, Value = "Order" }, + new DropDownModel { Id = 2, Value = "Ready to Serve" }, + new DropDownModel { Id = 3, Value = "Delivered"}, + new DropDownModel { Id = 3, Value = "Served"}, + }; + private class DropDownModel + { + public int Id { get; set; } + public string Value { get; set; } + } + private List columnData = new List () { + new ColumnModel(){ HeaderText= "Menu", KeyField= new List () { "Menu" } }, + new ColumnModel(){ HeaderText= "Order", KeyField= new List () { "Order" } }, + new ColumnModel(){ HeaderText= "Ready to Serve", KeyField= new List () { "Ready to Serve"} }, + new ColumnModel(){ HeaderText= "Delivered", KeyField=new List () { "Delivered", "Served" } } + }; + public void Begin(Syncfusion.Blazor.SplitButtons.ProgressEventArgs args) + { + Content = "Analyzing..."; + } + public async Task End(Syncfusion.Blazor.SplitButtons.ProgressEventArgs args) + { + while (this.IsSpinner) + { + await Task.Delay(1000); + } + Content = "Check Cusotomer Sentiments"; + } + } +} +``` + +## Error Handling and Troubleshooting + +If the AI service fails to return a valid response, the Kanban will display 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 Prompts**: Processing large text inputs may cause timeouts. Consider reducing the prompt size or optimizing the request for efficiency. + +## Performance Considerations + +When handling large text content, ensure the Ollama server has sufficient resources (CPU/GPU) to process requests efficiently. For long-form content or batch operations, consider splitting the input into smaller segments to avoid performance bottlenecks. Test the application with your specific use case to determine optimal performance. + +## Sample Code + +A complete working example is available in the [Syncfusion Blazor AI Samples GitHub repository](https://github.com/syncfusion/smart-ai-samples). + + \ No newline at end of file diff --git a/blazor/smart-ai-solutions/ai-samples/kanban/smart-task-suggestion.md b/blazor/smart-ai-solutions/ai-samples/kanban/smart-task-suggestion.md new file mode 100644 index 0000000000..a8034ddae5 --- /dev/null +++ b/blazor/smart-ai-solutions/ai-samples/kanban/smart-task-suggestion.md @@ -0,0 +1,584 @@ +--- +layout: post +title: Smart Task Suggestion in Blazor Kanban with AI Models| Syncfusion +description: Learn how to use Syncfusion Blazor Kanban with AI to automatically generate and assign tasks based on project descriptions. +platform: Blazor +control: AI Integration +documentation: ug +keywords: Blazor Kanban, AI task suggestion, Syncfusion Blazor AI +--- + +# Smart Task Suggestion in Blazor Kanban Component + +This guide demonstrates how to use the [**Syncfusion.Blazor.AI**](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package to enhance task planning in the Syncfusion Blazor Kanban component. The AI integration enables intelligent task generation based on project descriptions, sprint planning, and backlog management. These capabilities are powered by AI models hosted via services like OpenAI, Azure OpenAI, or Ollama. + +## Prerequisites + +Ensure the following NuGet packages are installed based on your chosen AI service: + +### For OpenAI +- **Microsoft.Extensions.AI** +- **Microsoft.Extensions.AI.OpenAI** + +### For Azure OpenAI +- **Microsoft.Extensions.AI** +- **Microsoft.Extensions.AI.OpenAI** +- **Azure.AI.OpenAI** + +### For Ollama +- **Microsoft.Extensions.AI** +- **OllamaSharp** + +{% tabs %} +{% highlight C# tabtitle="Package Manager" %} + +Install-Package Syncfusion.Blazor.Kanban -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.AI -Version {{ site.releaseversion }} +Install-Package Microsoft.Extensions.AI +Install-Package Microsoft.Extensions.AI.OpenAI # For OpenAI or Azure OpenAI +Install-Package Azure.AI.OpenAI # For Azure OpenAI +Install-Package OllamaSharp # For Ollama + +{% endhighlight %} +{% endtabs %} + +## 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: + +- 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**. + +```html + + + + + + +``` + +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 + +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. + +Follow the instructions for your selected service to register the AI model in your 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`. + +- Install the required NuGet packages: + +{% tabs %} +{% highlight C# tabtitle="Package Manager" %} + +Install-Package Microsoft.Extensions.AI +Install-Package Microsoft.Extensions.AI.OpenAI + +{% endhighlight %} +{% endtabs %} + +- Add the following to the **~/Program.cs** file in your Blazor WebApp: + +{% tabs %} +{% highlight C# tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %} + +using Syncfusion.Blazor.AI; +using Microsoft.Extensions.AI; +using OpenAI; + +var builder = WebApplication.CreateBuilder(args); + +string openAIApiKey = "API-KEY"; +string openAIModel = "OPENAI_MODEL"; +OpenAIClient openAIClient = new OpenAIClient(openAIApiKey); +IChatClient openAIChatClient = openAIClient.GetChatClient(openAIModel).AsIChatClient(); +builder.Services.AddChatClient(openAIChatClient); +builder.Services.AddSingleton ++} +else +{ +++++++AI Smart Task Suggestion
++++++++++ +++++ + +++++ +++ ++ ++} ++++ @if (showBacklogs) + { ++++ if (!showBacklogBoard) + { +Kanban Board
+++Add New Projects ++++ ++ } + else if (showBacklogBoard) + { ++ ++ + + @{ + var AISuggestion = (context as SmartSuggestionDataModel); + } + +++ ++++ +++ +++ +++ +++ + ++ + + + + ++ } + } ++ ++ ++ + + + + + @{ + SmartSuggestionDataModel card = (SmartSuggestionDataModel)context; + +++ } + +++++@card.Title+++ +@card.Description++ ++ + + +``` + +`Home.razor.cs` + +```csharp +using System.Text.Json; +using AISamples.Components.Models; +using Microsoft.AspNetCore.Components; +using Syncfusion.Blazor.Grids; +using Syncfusion.Blazor.Kanban; +using Syncfusion.Blazor.Notifications; + +namespace AISamples.Components.Pages +{ + public partial class Home + { + SfToast ToastObj; + public string[] SelectedAssignees { get; set; } = new string[] { }; + private string ToastTarget { get; set; } = "#toast-kanban-observable"; + SfKanban+ +AI Smart Task Suggestion ++ ++++++++ +++++ + +++++ + ++++++++ ++ + kanbanObj; + public string ContentGenerateTask = "Generate Tasks"; + public string BacklogButtonViewContent = "View as Backlog"; + private string TextBoxValue = string.Empty; + private string TasksValue = string.Empty; + private bool enableProjectDetailsDialog = false; + private bool isGeneratedProjectTasks = false; + private bool enableTaskEditing = false; + private bool isHomapage = true; + private bool showSprintBoard = false; + private bool showBacklogs = false; + private bool showBacklogBoard = true; + private List smartSuggestion = new List (); + private DialogSettings DialogParams = new DialogSettings { MinHeight = "400px", Width = "450px" }; + private string waringText = "Click \"Generate Tasks\" to preview"; + private void GoToBacklogBoardView() + { + if (BacklogButtonViewContent == "View as Board") + { + BacklogButtonViewContent = "View as Backlog"; + showBacklogBoard = true; + } + else + { + showBacklogBoard = false; + BacklogButtonViewContent = "View as Board"; + } + showSprintBoard = false; + } + private RenderFragment GetTemplate() => builder => + { + builder.OpenElement(0, "div"); + builder.AddContent(1, "An error occurred during the AI process, Please try again."); + builder.CloseElement(); + }; + public void BeginGenerateTasks(Syncfusion.Blazor.SplitButtons.ProgressEventArgs args) + { + ContentGenerateTask = "Generating..."; + } + public async Task EndGenerateTasks(Syncfusion.Blazor.SplitButtons.ProgressEventArgs args) + { + while (!isGeneratedProjectTasks) + { + await Task.Delay(1000); + } + this.isHomapage = false; + this.CloseDialog(); + showBacklogs = true; + } + private async Task GenerateProjectTasks() + { + try + { + if (!string.IsNullOrEmpty(TextBoxValue) && !string.IsNullOrEmpty(TasksValue)) + { + string result = ""; + var description = $"Generate {TasksValue} task recommendations for {TextBoxValue}. Each task should include the following fields: Id (like example: ID should be in project name simple 4char word - 1), Title, Status, Description, Assignee, StoryPoints, Color and Due Date, formatted according to the dataset. Assign each task to the Assignee: empty string, set the Status to 'Open', and use black for the Color. Use the dataset provided below to create your recommendations. IMPORTANT: Return the data strictly in JSON format with all the required fields. Only the JSON data is needed, no additional text.Return only the JSON array format without any explanations."; + result = await OpenAIService.GetCompletionAsync(description); + if (result != null) + { + string data = result.Replace("```json", "").Replace("```", "").Replace("\r", "").Replace("\n", "").Replace("\t", "").Trim(); + List modifiedData; + modifiedData = JsonSerializer.Deserialize args) + { + if (args.RequestType.ToString() == "Add") + { + enableTaskEditing = true; + } + else + { + enableTaskEditing = false; + } + } + public void RowCreatedHandler(RowCreatedEventArgs args) + { + args.Data.Status = "Open"; + args.Data.Color = "#000000"; + } + } +} + +``` + +## Error Handling and Troubleshooting + +If the AI service fails to return a valid response, the Kanban will display 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 Prompts**: Processing large text inputs may cause timeouts. Consider reducing the prompt size or optimizing the request for efficiency. + +## Performance Considerations + +When handling large text content, ensure the Ollama server has sufficient resources (CPU/GPU) to process requests efficiently. For long-form content or batch operations, consider splitting the input into smaller segments to avoid performance bottlenecks. Test the application with your specific use case to determine optimal performance. + +## Sample Code + +A complete working example is available in the [Syncfusion Blazor AI Samples GitHub repository](https://github.com/syncfusion/smart-ai-samples). + + \ No newline at end of file diff --git a/blazor/smart-ai-solutions/ai-samples/rich-text-editor/writting-assistance.md b/blazor/smart-ai-solutions/ai-samples/rich-text-editor/writting-assistance.md new file mode 100644 index 0000000000..3074d17360 --- /dev/null +++ b/blazor/smart-ai-solutions/ai-samples/rich-text-editor/writting-assistance.md @@ -0,0 +1,707 @@ +--- +layout: post +title: AI-Powered Content Assistance in Blazor Rich Text Editor | Syncfusion +description: Enhance content creation in Blazor Rich Text Editor using AI for grammar correction, summarization, translation, and more. +platform: Blazor +control: AI Integration +documentation: ug +keywords: Blazor Rich Text Editor, AI content enhancement, Syncfusion Blazor AI +--- + +# AI-Powered Content Assistance in Blazor Rich Text Editor + +This guide demonstrates how to use the [**Syncfusion.Blazor.AI**](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package to enhance content creation in the Syncfusion Blazor Rich Text Editor. The AI integration enables intelligent features such as grammar correction, summarization, elaboration, translation, and rephrasing. These capabilities are powered by AI models hosted via services like OpenAI, Azure OpenAI, or Ollama. + +## Prerequisites + +Ensure the following NuGet packages are installed based on your chosen AI service: + +### For OpenAI +- **Microsoft.Extensions.AI** +- **Microsoft.Extensions.AI.OpenAI** + +### For Azure OpenAI +- **Microsoft.Extensions.AI** +- **Microsoft.Extensions.AI.OpenAI** +- **Azure.AI.OpenAI** + +### For Ollama +- **Microsoft.Extensions.AI** +- **OllamaSharp** + +{% tabs %} +{% highlight C# tabtitle="Package Manager" %} + +Install-Package Syncfusion.Blazor.RichTextEditor -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.AI -Version {{ site.releaseversion }} +Install-Package Microsoft.Extensions.AI +Install-Package Microsoft.Extensions.AI.OpenAI # For OpenAI or Azure OpenAI +Install-Package Azure.AI.OpenAI # For Azure OpenAI +Install-Package OllamaSharp # For Ollama + +{% endhighlight %} +{% endtabs %} + +## 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: + +- 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**. + +```html + + + + + + +``` + +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 + +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. + +Follow the instructions for your selected service to register the AI model in your 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`. + +- Install the required NuGet packages: + +{% tabs %} +{% highlight C# tabtitle="Package Manager" %} + +Install-Package Microsoft.Extensions.AI +Install-Package Microsoft.Extensions.AI.OpenAI + +{% endhighlight %} +{% endtabs %} + +- Add the following to the **~/Program.cs** file in your Blazor WebApp: + +{% tabs %} +{% highlight C# tabtitle="Blazor WebApp" hl_lines="7 8 9 11 12 13" %} + +using Syncfusion.Blazor.AI; +using Microsoft.Extensions.AI; +using OpenAI; + +var builder = WebApplication.CreateBuilder(args); + +string openAIApiKey = "API-KEY"; +string openAIModel = "OPENAI_MODEL"; +OpenAIClient openAIClient = new OpenAIClient(openAIApiKey); +IChatClient openAIChatClient = openAIClient.GetChatClient(openAIModel).AsIChatClient(); +builder.Services.AddChatClient(openAIChatClient); +builder.Services.AddSingleton +++ ++ ++ ++ + ++ + ++ + ++ + + + + + + ++ + + ++ +++ ++ +AI Assistant ++ ++++++++ ++ + + + @if (this.enableRephraseChips) + { +++ + } + else if (this.enableLanguageList) + { ++ ++ + + + + Target Language ++++ } ++ ++ + ++++ @if (!isContentGenerating) + { + @if (noResultsFound) + { ++++ ++ ++ } + else { ++++ ++No results found+++ } + } else { ++++ ++ ++ } +++++
+
+
+
+
++ + +++++++Regenerate ++ @if (!string.IsNullOrEmpty(sentiment)) { + + } ++Copy +Replace ++ + + +``` + +`Home.razor.cs` + +```csharp +using Markdig; +using Microsoft.AspNetCore.Components; +using Microsoft.JSInterop; +using Syncfusion.Blazor.DropDowns; +using Syncfusion.Blazor.Inputs; +using Syncfusion.Blazor.Notifications; +using Syncfusion.Blazor.RichTextEditor; +using Syncfusion.Blazor.SplitButtons; + +namespace AISamples.Components.Pages +{ + public partial class Home + { + SfToast ToastObj; + private string ToastTarget { get; set; } = "#scroll-restricted"; + SfRichTextEditor rteObj; + SfRichTextEditor leftRteChildObj; + SfRichTextEditor rightRteChildObj; + private string Value { get; set; } = "+ Integrate AI with the Editor
Integrate the AI assistant into the rich text editor by capturing the content from the editor, sending it to the AI service, and displaying the results or suggestions back in the editor.
Summarize
This function condenses the selected content into a brief summary, capturing the main points succinctly.
Elaborate
This function expands the selected content, adding additional details and context.
Rephrase
This function rewrites the selected content to convey the same meaning using different words or structures. It also enables rephrase options and disables language selection.
Correct Grammar
This function reviews and corrects the grammar of the selected content, ensuring it adheres to standard grammatical rules.
Translate
This function translates the selected content into the specified language, enabling language selection and disabling rephrase options.
"; + private bool dialogVisible { get; set; } + private bool enabelAIAssitantButton { get; set; } = false; + private bool enabelRegenerateContentButton { get; set; } = false; + private bool enabelContentButton { get; set; } = true; + private string promptQuery = string.Empty; + private string subQuery = string.Empty; + private string[] chipValue = new[] { "Standard" }; + private string translatelanguage = "EN"; + private string dropVal { get; set; } = "Rephrase"; + private bool enableRephraseChips { get; set; } = true; + private bool enableLanguageList { get; set; } = false; + private bool noResultsFound { get; set; } = false; + public bool isContentGenerating { get; set; } = true; + private string AIResult { get; set; } = string.Empty; + private bool isSentimentCheck { get; set; } = false; + private MarkdownPipeline pipeline { get; set; } = new MarkdownPipelineBuilder().UseAdvancedExtensions().Build(); + private string sentiment = ""; + private string apiResultData = ""; + private string ButtonClass = "e-tbar-btn"; + private void UpdateStatus(Syncfusion.Blazor.RichTextEditor.ChangeEventArgs args) + { + Value = args.Value; + enabelAIAssitantButton = string.IsNullOrWhiteSpace(Value); + } + private void OnActionCompleteHandler(Syncfusion.Blazor.RichTextEditor.ActionCompleteEventArgs args) + { + if (args.RequestType == "SourceCode") + { + this.ButtonClass = "e-tbar-btn e-overlay"; + } + if (args.RequestType == "Preview") + { + this.ButtonClass = "e-tbar-btn"; + } + } + private void UpdateTextAreaStatus(InputEventArgs args) + { + Value = args.Value; + enabelRegenerateContentButton = string.IsNullOrWhiteSpace(Value); + } + private async Task AIQuerySelectedMenu(MenuEventArgs args) + { + await DialogueOpen(args.Item.Text); + } + private async Task Rephrase() + { + await DialogueOpen("Rephrase"); + } + private async Task DialogueOpen(string selectedQuery) + { + var selectionText = await rteObj.GetSelectedHtmlAsync(); + if (!string.IsNullOrEmpty(selectionText)) + { + dialogVisible = true; + dropVal = QueryList.FirstOrDefault(q => q.Text.Equals(selectedQuery, StringComparison.OrdinalIgnoreCase))?.ID; + promptQuery = selectionText; + await this.rteObj.SaveSelectionAsync(); + await this.leftRteChildObj.RefreshUIAsync(); + await UpdateAISuggestionsData(selectedQuery); + } + else + { + await this.ToastObj.ShowAsync(new ToastModel { ContentTemplate = @GetTemplate(true), ShowCloseButton = true, Timeout = 0 }); + } + } + private async Task SelectedChipsChanged(Syncfusion.Blazor.Buttons.SelectionChangedEventArgs args) + { + if (chipValue.Length == 0 && args != null && args.RemovedItems.Length > 0) + { + chipValue = new [] { args.RemovedItems[0] }; + } + await UpdateAISuggestionsData("Rephrase"); + } + private async Task AITranslateDropdownList(ChangeEventArgsQueryList = new List + { + new SubQuery { ID = "Rephrase", Text = "Rephrase" }, + new SubQuery { ID = "Grammar", Text = "Correct Grammar" }, + new SubQuery { ID = "Summarize", Text = "Summarize" }, + new SubQuery { ID = "Elaborate", Text = "Elaborate" }, + new SubQuery { ID = "Translate", Text = "Translate" } + }; + public List LanguageList = new List + { + new Languages { ID = "EN", Text = "English" }, + new Languages { ID = "ZH", Text = "Chinese (Simplified)" }, + new Languages { ID = "ZHT", Text = "Chinese (Traditional)" }, + new Languages { ID = "ES", Text = "Spanish" }, + new Languages { ID = "HI", Text = "Hindi" }, + new Languages { ID = "AR", Text = "Arabic" }, + new Languages { ID = "BN", Text = "Bengali" }, + new Languages { ID = "PT", Text = "Portuguese" }, + new Languages { ID = "RU", Text = "Russian" }, + new Languages { ID = "JA", Text = "Japanese" }, + new Languages { ID = "DE", Text = "German" }, + new Languages { ID = "KO", Text = "Korean" }, + new Languages { ID = "FR", Text = "French" }, + new Languages { ID = "IT", Text = "Italian" }, + new Languages { ID = "TR", Text = "Turkish" } + }; + private List Tools = new List () + { + new ToolbarItemModel() { Name = "AIAssistant", TooltipText = "AI Assistant" }, + new ToolbarItemModel() { Name = "Rephrase", TooltipText = "Rephrase" }, + new ToolbarItemModel() { Command = ToolbarCommand.Bold }, + new ToolbarItemModel() { Command = ToolbarCommand.Italic }, + new ToolbarItemModel() { Command = ToolbarCommand.Underline }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.FontName }, + new ToolbarItemModel() { Command = ToolbarCommand.FontSize }, + new ToolbarItemModel() { Command = ToolbarCommand.FontColor }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.BackgroundColor }, + new ToolbarItemModel() { Command = ToolbarCommand.Formats }, + new ToolbarItemModel() { Command = ToolbarCommand.Alignments }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.NumberFormatList }, + new ToolbarItemModel() { Command = ToolbarCommand.BulletFormatList }, + new ToolbarItemModel() { Command = ToolbarCommand.CreateLink }, + new ToolbarItemModel() { Command = ToolbarCommand.Image }, + new ToolbarItemModel() { Command = ToolbarCommand.Separator }, + new ToolbarItemModel() { Command = ToolbarCommand.CreateTable }, + new ToolbarItemModel() { Command = ToolbarCommand.SourceCode }, + new ToolbarItemModel() { Command = ToolbarCommand.Undo }, + new ToolbarItemModel() { Command = ToolbarCommand.Redo }, + }; + } +} + + +``` + +## Error Handling and Troubleshooting + +If the AI service fails to return a valid response, the Rich Text Editor will display 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 Prompts**: Processing large text inputs may cause timeouts. Consider reducing the prompt size or optimizing the request for efficiency. + +## Performance Considerations + +When handling large text content, ensure the Ollama server has sufficient resources (CPU/GPU) to process requests efficiently. For long-form content or batch operations, consider splitting the input into smaller segments to avoid performance bottlenecks. Test the application with your specific use case to determine optimal performance. + +## Sample Code + +A complete working example is available in the [Syncfusion Blazor AI Samples GitHub repository](https://github.com/syncfusion/smart-ai-samples). + + \ No newline at end of file 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
- Weekly Nuget Release
-