From 67dd797a1e0eef71ec41a833310ba0d3828531ab Mon Sep 17 00:00:00 2001 From: Pugazhenthi-Murugan Date: Fri, 12 Jun 2026 12:15:39 +0530 Subject: [PATCH 1/3] Committing Blazor getting started content for web and server was updated. --- blazor/smart-paste/getting-started-webapp.md | 384 ++++++++++++++----- blazor/smart-paste/getting-started.md | 358 ++++++++++++----- 2 files changed, 567 insertions(+), 175 deletions(-) diff --git a/blazor/smart-paste/getting-started-webapp.md b/blazor/smart-paste/getting-started-webapp.md index 0821bd5b69..80160e0eed 100644 --- a/blazor/smart-paste/getting-started-webapp.md +++ b/blazor/smart-paste/getting-started-webapp.md @@ -1,114 +1,127 @@ --- layout: post -title: Get Started with Blazor Smart Paste Button | Syncfusion -description: Learn how to integrate the Syncfusion Blazor Smart Paste Button in a Blazor Web App Server with step-by-step instructions. +title: Getting Started Blazor Smart Paste Button Blazor Web App | Syncfusion +description: Learn how to integrate the Syncfusion Blazor Smart Paste Button in a Blazor Web App with step-by-step instructions. platform: Blazor control: Smart Paste Button documentation: ug --- -# Getting Started with Smart Paste Button +# Getting Started with Smart Paste Button in Blazor Web App -This section explains how to integrate the [Blazor Smart Paste Button](https://www.syncfusion.com/blazor-components/blazor-smartpaste-button) component in a Blazor Web App Server using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code. The Smart Paste Button leverages AI to intelligently populate form fields from copied text, streamlining user input workflows. +This section explains how to integrate the [Blazor Smart Paste Button](https://www.syncfusion.com/blazor-components/blazor-smartpaste-button) component in a Blazor Web App 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/). The Smart Paste Button leverages AI to intelligently populate form fields from copied text, streamlining user input workflows. To get started quickly with the Blazor Smart Paste Button component, watch this video: {% youtube "youtube:https://www.youtube.com/watch?v=Q97iTZcZHB0" %} +## Create a new Blazor Web App + {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites +Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. -- .NET SDK 8.0 or later -- Visual Studio 2022 (version 17.0 or later) -- OpenAI or Azure OpenAI account -- [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +{% endtabcontent %} -N> Syncfusion Blazor Smart Components support both OpenAI and Azure OpenAI and are compatible with Blazor Server Interactivity mode. +{% tabcontent Visual Studio Code %} -## Create a New Blazor Web App Server in Visual Studio +Run the following command to create a new Blazor Web App. -Create a **Blazor Web App** using Visual Studio 2022 with [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 app with the Server interactive render mode. +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -## Install Syncfusion Blazor SmartComponents and Themes NuGet Packages +dotnet new blazor -o BlazorWebApp --interactivity Auto -To add the **Blazor Smart Paste Button** component, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search for, and install the following packages: -- [Syncfusion.Blazor.SmartComponents](https://www.nuget.org/packages?q=Syncfusion.Blazor.SmartComponents) -- [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) +{% endhighlight %} +{% endtabs %} -Alternatively, use the Package Manager Console: +Alternatively, create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc), the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Run the following command to create a new Blazor Web App. {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Command Prompt" %} -Install-Package Syncfusion.Blazor.SmartComponents -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet new blazor -o BlazorWebApp --interactivity Auto {% endhighlight %} {% endtabs %} -N> Syncfusion Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) for a complete list of available packages and component details. - {% endtabcontent %} -{% tabcontent Visual Studio Code %} +{% endtabcontents %} -## Prerequisites +N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -- .NET SDK 8.0 or later -- Visual Studio Code (version 1.60 or later) -- OpenAI or Azure OpenAI account -- [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +## Install the required Blazor packages -N> Syncfusion Blazor Smart Components support both OpenAI and Azure OpenAI and are compatible with Blazor Server Interactivity mode. +Install the [Syncfusion.Blazor.SmartComponents](https://www.nuget.org/packages?q=Syncfusion.Blazor.SmartComponents) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages.All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install these packages in the `.Client` project. -## Create a New Blazor Web App Server in Visual Studio Code +{% tabcontents %} -Create a **Blazor Web App** using Visual Studio Code with [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 app with the Server interactive render mode using the following commands: +{% tabcontent Visual Studio %} + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.SmartComponents` and `Syncfusion.Blazor.Themes`) and install them. + +Alternatively, you can install the same packages using the Package Manager Console with the following commands. {% tabs %} -{% highlight c# tabtitle="Blazor Web App Server" %} +{% highlight razor tabtitle="Package Manager Console" %} -dotnet new blazor -o BlazorWebApp -int Server -cd BlazorWebApp -dotnet restore +Install-Package Syncfusion.Blazor.SmartComponents -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> For details on creating a Blazor Web App with various interactive render modes, refer to [Blazor Web App Render Modes](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). +{% endtabcontent %} -## Install Syncfusion Blazor SmartComponents and Themes NuGet Packages +{% tabcontent Visual Studio Code %} -1. Open the integrated terminal in Visual Studio Code (Ctrl+`). -2. Ensure you are in the project root directory where the `.csproj` file is located. -3. Run the following commands to install the required NuGet packages for the Server render mode: +Open the terminal and run the following commands. {% tabs %} -{% highlight c# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Terminal" %} dotnet add package Syncfusion.Blazor.SmartComponents -v {{ site.releaseversion }} dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} -dotnet restore {% endhighlight %} {% endtabs %} -N> Syncfusion Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) for a complete list of available packages and component details. +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following commands. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet add package Syncfusion.Blazor.SmartComponents -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} + +{% endhighlight %} +{% endtabs %} {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion Blazor Service +## Add import namespaces -For Server interactive render mode, open the **~/Components/_Imports.razor** file and add the following namespaces: +After the packages are installed, open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SmartComponents` namespaces. {% tabs %} -{% highlight razor tabtitle="~/Components/_Imports.razor" %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.SmartComponents @@ -116,23 +129,17 @@ For Server interactive render mode, open the **~/Components/_Imports.razor** fil {% endhighlight %} {% endtabs %} -Register the Syncfusion Blazor service in the **~/Program.cs** file: +## Register the Blazor service + +Open the **Program.cs** file in Blazor Web App and register the Blazor service. If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App. {% tabs %} -{% highlight C# tabtitle="Blazor Web App Server" hl_lines="3 10" %} +{% highlight c# tabtitle="Program.cs" %} -using Microsoft.AspNetCore.Components; -using Microsoft.AspNetCore.Components.Web; +.... using Syncfusion.Blazor; - -var builder = WebApplication.CreateBuilder(args); .... - -// Add services to the container. - builder.Services.AddSyncfusionBlazor(); - -var app = builder.Build(); .... {% endhighlight %} @@ -142,31 +149,73 @@ var app = builder.Build(); The Smart Paste Button requires an AI service (OpenAI, Azure OpenAI, or Ollama) to analyze and map copied text to form fields. Follow the instructions below to configure an AI model in your application. -### Install AI Service NuGet Packages +### OpenAI Configuration + +Install the following NuGet packages to your project: + +* [Microsoft.Extensions.AI](https://www.nuget.org/packages/Microsoft.Extensions.AI) +* [Microsoft.Extensions.AI.OpenAI](https://www.nuget.org/packages/Microsoft.Extensions.AI.OpenAI) + +You can install these packages using different methods as shown below: + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Microsoft.Extensions.AI` and `Microsoft.Extensions.AI.OpenAI`) and install them. -Install the following NuGet packages based on your chosen AI provider: +Alternatively, you can install the same packages using the Package Manager Console with the following commands. {% tabs %} -{% highlight c# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Package Manager Console" %} Install-Package Microsoft.Extensions.AI Install-Package Microsoft.Extensions.AI.OpenAI -@* For Azure OpenAI only *@ -Install-Package Azure.AI.OpenAI -@* For Ollama only *@ -Install-Package OllamaSharp {% endhighlight %} {% endtabs %} -### OpenAI Configuration +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following commands. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet add package Microsoft.Extensions.AI +dotnet add package Microsoft.Extensions.AI.OpenAI + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following commands. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet add package Microsoft.Extensions.AI +dotnet add package Microsoft.Extensions.AI.OpenAI + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} For OpenAI, obtain an API key from [OpenAI](https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key) and specify the desired model (e.g., `gpt-3.5-turbo`, `gpt-4`). Store the API key securely in a configuration file or environment variable. Add the following to the **~/Program.cs** file: {% tabs %} -{% highlight C# tabtitle="Blazor Web App Server" hl_lines="7 8 9 11 12 13" %} +{% highlight C# tabtitle="Program.cs" hl_lines="7 8 9 11 12 13" %} using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components.Web; @@ -198,12 +247,75 @@ var app = builder.Build(); ### Azure OpenAI Configuration +Install the following NuGet packages to your project: + +* [Microsoft.Extensions.AI](https://www.nuget.org/packages/Microsoft.Extensions.AI) +* [Microsoft.Extensions.AI.OpenAI](https://www.nuget.org/packages/Microsoft.Extensions.AI.OpenAI) +* [Azure.AI.OpenAI](https://www.nuget.org/packages/Azure.AI.OpenAI) + +You can install these packages using different methods as shown below: + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Microsoft.Extensions.AI`, `Microsoft.Extensions.AI.OpenAI` and `Azure.AI.OpenAI`) and install them. + +Alternatively, you can install the same packages using the Package Manager Console with the following commands. + +{% tabs %} +{% highlight razor tabtitle="Package Manager Console" %} + +Install-Package Microsoft.Extensions.AI +Install-Package Microsoft.Extensions.AI.OpenAI +Install-Package Azure.AI.OpenAI + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following commands. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet add package Microsoft.Extensions.AI +dotnet add package Microsoft.Extensions.AI.OpenAI +dotnet add package Azure.AI.OpenAI + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following commands. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet add package Microsoft.Extensions.AI +dotnet add package Microsoft.Extensions.AI.OpenAI +dotnet add package Azure.AI.OpenAI + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} + For Azure OpenAI, deploy a resource and model as described in [Azure OpenAI documentation](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource). Obtain the API key, endpoint, and model name from your Azure portal. Add the following to the **~/Program.cs** file: {% tabs %} -{% highlight C# tabtitle="Blazor Web App Server" hl_lines="7 8 9 11 12 13" %} +{% highlight C# tabtitle="Program.cs" hl_lines="7 8 9 11 12 13" %} using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components.Web; @@ -248,10 +360,64 @@ To use Ollama for self-hosted models: 2. Install a model from the [Ollama Library](https://ollama.com/library) (e.g., `llama2:13b`, `mistral:7b`). 3. Configure the endpoint URL (e.g., `http://localhost:11434`) and model name. +* Install the following NuGet packages to your project: + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Microsoft.Extensions.AI` and `OllamaSharp`) and install them. + +Alternatively, you can install the same packages using the Package Manager Console with the following commands. + +{% tabs %} +{% highlight razor tabtitle="Package Manager Console" %} + +Install-Package Microsoft.Extensions.AI +Install-Package OllamaSharp + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following commands. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet add package Microsoft.Extensions.AI +dotnet add package OllamaSharp + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following commands. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet add package Microsoft.Extensions.AI +dotnet add package OllamaSharp + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} + Add the following to the **~/Program.cs** file: {% tabs %} -{% highlight C# tabtitle="Blazor Web App" hl_lines="7 8 9 11 12 13" %} +{% highlight C# tabtitle="Program.cs hl_lines="7 8 9 11 12 13" %} using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components.Web; @@ -279,30 +445,33 @@ var app = builder.Build(); {% 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). Add the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file, as shown below: - -```html - - .... - - +## 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](https://blazor.syncfusion.com/documentation/appearance/themes) and [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) in the **App.razor** file. + +{% tabs %} +{% highlight html tabtitle="App.razor" %} + +... + +... + + +{% endhighlight %} +{% endtabs %} > **Note**: Explore the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic for 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)) to reference themes in your Blazor application. Refer to the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic for different approaches to adding script references. -## Add Syncfusion® Blazor Smart Paste Button Component +## Add Blazor Smart Paste Button Component + +Open a Razor file located in the **~/Pages/*.razor** (for example, **Index.razor**) and add the [Blazor Smart Paste Button](https://www.syncfusion.com/blazor-components/blazor-smartpaste-button) component inside the razor file. This example uses the [Syncfusion® Blazor DataForm](https://blazor.syncfusion.com/documentation/data-form/getting-started-with-web-app) component to manage form input fields. Install the [Syncfusion.Blazor.DataForm](https://www.nuget.org/packages/Syncfusion.Blazor.DataForm) package. -Add the Syncfusion® **Blazor Smart Paste Button** component with form components in the **~Pages/Index.razor** file. This example uses the [Syncfusion® Blazor DataForm](https://blazor.syncfusion.com/documentation/data-form/getting-started-with-web-app) component to manage form input fields. Install the [Syncfusion.Blazor.DataForm](https://www.nuget.org/packages/Syncfusion.Blazor.DataForm) package. +N> If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the razor file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). If the **Interactivity** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} -{% highlight razor tabtitle="~/Index.razor" %} +{% highlight razor tabtitle="Index.razor" %} + +@rendermode InteractiveAuto @using Syncfusion.Blazor.DataForm @using System.ComponentModel.DataAnnotations @@ -357,8 +526,49 @@ Add the Syncfusion® **Blazor Smart Paste Button** component with form component {% endhighlight %} {% endtabs %} -1. Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application, rendering the Syncfusion® Blazor Smart Paste Button component in your default web browser. -2. Copy the `Sample Content` and click the `Smart Paste` button to see the form fields automatically populated. +**Run the application** + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Smart Paste Button component will render in your default web browser. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and navigate to the main project folder (for example, `BlazorWebApp`) and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +cd BlazorWebApp +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and navigate to the main project folder (for example, `BlazorWebApp`) and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +cd BlazorWebApp +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} + +Copy the `Sample Content` and click the `Smart Paste` button to see the form fields automatically populated. ![Syncfusion Smart Paste Button filling a form in a Blazor Web App](images/smart-paste.webp) diff --git a/blazor/smart-paste/getting-started.md b/blazor/smart-paste/getting-started.md index aa988097df..bd72b36fd7 100644 --- a/blazor/smart-paste/getting-started.md +++ b/blazor/smart-paste/getting-started.md @@ -1,104 +1,122 @@ --- layout: post -title: Getting Started with Blazor Smart Paste Button | Syncfusion +title: Getting Started Blazor Smart Paste Button Server App | Syncfusion description: Checkout and learn about getting started with Blazor Smart Paste Button component in Blazor Server App. platform: Blazor control: Smart Paste Button documentation: ug --- -# Getting Started with Smart Paste Button Component +# Getting Started with Smart Paste Button in Blazor Server App -This section briefly explains about how to include [Blazor Smart Paste Button](https://www.syncfusion.com/blazor-components/blazor-smartpaste-button) component in your Blazor Server App using Visual Studio. +This section briefly explains about how to include [Blazor Smart Paste Button](https://www.syncfusion.com/blazor-components/blazor-smartpaste-button) component in your Blazor Server App 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/). + +## Create a new Blazor Server App {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites +Create a **Blazor Server App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Run the following command to create a new Blazor Server App. -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -* OpenAI or Azure OpenAI Account +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet new blazor -o BlazorServerApp --interactivity Server -N> Syncfusion® Blazor Smart Components are compatible with both `OpenAI` and `Azure OpenAI`, and fully support Server Interactivity mode apps. +{% endhighlight %} +{% endtabs %} -## Create a new Blazor App in Visual Studio +Alternatively, create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc), the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. -You can create a **Blazor Server App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +{% endtabcontent %} -## Install Syncfusion® Blazor SmartComponents and Themes NuGet in the App +{% tabcontent .NET CLI %} -To add **Blazor Smart Paste Button** 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.SmartComponents](https://www.nuget.org/packages?q=Syncfusion.Blazor.SmartComponents) 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. +Run the following command to create a new Blazor Server App. {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Command Prompt" %} -Install-Package Syncfusion.Blazor.SmartComponents -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet new blazor -o BlazorApp --interactivity Server {% 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. - {% endtabcontent %} -{% tabcontent Visual Studio Code %} +{% endtabcontents %} + +N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -## Prerequisites +## Install the required Blazor packages -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -* OpenAI or Azure OpenAI Account +Install the [Syncfusion.Blazor.SmartComponents](https://www.nuget.org/packages?q=Syncfusion.Blazor.SmartComponents) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages.All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. -N> Syncfusion® Blazor Smart Components are compatible with both `OpenAI` and `Azure OpenAI`, and fully support Server Interactivity mode apps. +{% tabcontents %} -## Create a new Blazor App in Visual Studio Code +{% tabcontent Visual Studio %} -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-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.SmartComponents` and `Syncfusion.Blazor.Themes`) and install them. -Alternatively, you can create a Server application using the following command in the terminal(Ctrl+`). +Alternatively, you can install the same packages using the Package Manager Console with the following commands. {% tabs %} +{% highlight razor tabtitle="Package Manager Console" %} -{% highlight c# tabtitle="Blazor Server App" %} - -dotnet new blazorserver -o BlazorApp -cd BlazorApp +Install-Package Syncfusion.Blazor.SmartComponents -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} - {% endtabs %} -## Install Syncfusion® Blazor SmartComponents and Themes NuGet in the App +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} -* 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.SmartComponents](https://www.nuget.org/packages?q=Syncfusion.Blazor.SmartComponents) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +Open the terminal and run the following commands. {% tabs %} - -{% highlight c# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Terminal" %} dotnet add package Syncfusion.Blazor.SmartComponents -v {{ site.releaseversion }} dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} -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. +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following commands. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet add package Syncfusion.Blazor.SmartComponents -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} + +{% endhighlight %} +{% endtabs %} {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor Service +## Add import namespaces -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SmartComponents` namespace. +After the packages are installed, open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SmartComponents` namespaces. {% tabs %} -{% highlight razor tabtitle="~/_Imports.razor" %} +{% highlight C# tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.SmartComponents @@ -106,23 +124,17 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Server App. +## Register the Blazor service + +Open the **Program.cs** file in Blazor Server App and register the Blazor service. {% tabs %} -{% highlight C# tabtitle="Blazor Server App" hl_lines="3 10" %} +{% highlight c# tabtitle="Program.cs" %} -using Microsoft.AspNetCore.Components; -using Microsoft.AspNetCore.Components.Web; +.... using Syncfusion.Blazor; - -var builder = WebApplication.CreateBuilder(args); - -// Add services to the container. -builder.Services.AddRazorPages(); -builder.Services.AddServerSideBlazor(); +.... builder.Services.AddSyncfusionBlazor(); - -var app = builder.Build(); .... {% endhighlight %} @@ -134,25 +146,71 @@ Follow the instructions below to register an AI model in your application. ### OpenAI -For **OpenAI**, create an API key and place it at `openAIApiKey`. The value for `openAIModel` is the model you wish to use (e.g., `gpt-3.5-turbo`, `gpt-4`, etc.). +Install the following NuGet packages to your project: -* Install the following NuGet packages to your project: +* [Microsoft.Extensions.AI](https://www.nuget.org/packages/Microsoft.Extensions.AI) +* [Microsoft.Extensions.AI.OpenAI](https://www.nuget.org/packages/Microsoft.Extensions.AI.OpenAI) -{% tabs %} +You can install these packages using different methods as shown below: + +{% tabcontents %} + +{% tabcontent Visual Studio %} -{% highlight c# tabtitle="Package Manager" %} +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Microsoft.Extensions.AI` and `Microsoft.Extensions.AI.OpenAI`) and install them. + +Alternatively, you can install the same packages using the Package Manager Console with the following commands. + +{% tabs %} +{% highlight razor tabtitle="Package Manager Console" %} Install-Package Microsoft.Extensions.AI Install-Package Microsoft.Extensions.AI.OpenAI {% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following commands. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet add package Microsoft.Extensions.AI +dotnet add package Microsoft.Extensions.AI.OpenAI + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} +Open the command prompt and run the following commands. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet add package Microsoft.Extensions.AI +dotnet add package Microsoft.Extensions.AI.OpenAI + +{% endhighlight %} {% endtabs %} +{% endtabcontent %} + +{% endtabcontents %} + +For **OpenAI**, create an API key and place it at `openAIApiKey`. The value for `openAIModel` is the model you wish to use (e.g., `gpt-3.5-turbo`, `gpt-4`, etc.). + * To configure the AI service, add the following settings to the **~/Program.cs** file in your Blazor Server app. {% tabs %} -{% highlight C# tabtitle="Blazor Server App" hl_lines="7 8 9 11 12 13" %} +{% highlight C# tabtitle="Program.cs" hl_lines="7 8 9 11 12 13" %} using Syncfusion.Blazor.SmartComponents; using Syncfusion.Blazor.AI; @@ -181,26 +239,75 @@ var app = builder.Build(); ### Azure OpenAI -For **Azure OpenAI**, first [deploy an Azure OpenAI Service resource and model](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource), then values for `azureOpenAIKey`, `azureOpenAIEndpoint` and `azureOpenAIModel` will all be provided to you. +Install the following NuGet packages to your project: -* Install the following NuGet packages to your project: +* [Microsoft.Extensions.AI](https://www.nuget.org/packages/Microsoft.Extensions.AI) +* [Microsoft.Extensions.AI.OpenAI](https://www.nuget.org/packages/Microsoft.Extensions.AI.OpenAI) +* [Azure.AI.OpenAI](https://www.nuget.org/packages/Azure.AI.OpenAI) -{% tabs %} +You can install these packages using different methods as shown below: + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Microsoft.Extensions.AI`, `Microsoft.Extensions.AI.OpenAI` and `Azure.AI.OpenAI`) and install them. + +Alternatively, you can install the same packages using the Package Manager Console with the following commands. -{% highlight c# tabtitle="Package Manager" %} +{% tabs %} +{% highlight razor tabtitle="Package Manager Console" %} Install-Package Microsoft.Extensions.AI Install-Package Microsoft.Extensions.AI.OpenAI Install-Package Azure.AI.OpenAI {% endhighlight %} +{% endtabs %} +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following commands. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet add package Microsoft.Extensions.AI +dotnet add package Microsoft.Extensions.AI.OpenAI +dotnet add package Azure.AI.OpenAI + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following commands. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet add package Microsoft.Extensions.AI +dotnet add package Microsoft.Extensions.AI.OpenAI +dotnet add package Azure.AI.OpenAI + +{% endhighlight %} {% endtabs %} +{% endtabcontent %} + +{% endtabcontents %} + +For **Azure OpenAI**, first [deploy an Azure OpenAI Service resource and model](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource), then values for `azureOpenAIKey`, `azureOpenAIEndpoint` and `azureOpenAIModel` will all be provided to you. + * To configure the AI service, add the following settings to the **~/Program.cs** file in your Blazor Server app. {% tabs %} -{% highlight C# tabtitle="Blazor Server App" hl_lines="7 8 9 11 12 13" %} +{% highlight C# tabtitle="Program.cs" hl_lines="7 8 9 11 12 13" %} using Syncfusion.Blazor.SmartComponents; using Syncfusion.Blazor.AI; @@ -233,7 +340,6 @@ var app = builder.Build(); {% endhighlight %} {% endtabs %} - N> From version 28.2.33 to 30.2.6, the Azure.AI.OpenAI package has been removed from the SmartComponents dependency. To use Azure OpenAI, please install the [Azure.AI.OpenAI](https://www.nuget.org/packages/Azure.AI.OpenAI) package separately in your Blazor application. ### Ollama @@ -253,17 +359,58 @@ To use Ollama for running self-hosted models: * Install the following NuGet packages to your project: -{% tabs %} +{% tabcontents %} + +{% tabcontent Visual Studio %} -{% highlight c# tabtitle="Package Manager" %} +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Microsoft.Extensions.AI` and `OllamaSharp`) and install them. + +Alternatively, you can install the same packages using the Package Manager Console with the following commands. + +{% tabs %} +{% highlight razor tabtitle="Package Manager Console" %} Install-Package Microsoft.Extensions.AI -Install-Package OllamaSharp +Install-Package OllamaSharp {% endhighlight %} +{% endtabs %} + +{% endtabcontent %} +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following commands. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet add package Microsoft.Extensions.AI +dotnet add package OllamaSharp + +{% endhighlight %} {% endtabs %} +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following commands. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet add package Microsoft.Extensions.AI +dotnet add package OllamaSharp + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} + * Add the following settings to the **~/Program.cs** file in your Blazor Server app. {% tabs %} @@ -295,34 +442,31 @@ var app = builder.Build(); ## 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 main page as follows: - -* For **.NET 6** Blazor Server app, include it in **~/Pages/_Layout.cshtml** file. - -* For **.NET 10, .NET 9 and .NET 8** Blazor Server app, include it in the **~/Components/App.razor** file. - -```html - - .... - - - - - .... - - -``` +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](https://blazor.syncfusion.com/documentation/appearance/themes) and [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) in the **App.razor** file. + +{% tabs %} +{% highlight html tabtitle="App.razor" %} + +... + +... + + +{% endhighlight %} +{% endtabs %} 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 Smart Paste Button component +## Add Blazor Smart Paste Button component -Add the Syncfusion® **Blazor Smart Paste Button** component with form components in the **~/Pages/Index.razor** file. +Open a Razor file located in the **~/Pages/*.razor** (for example, **Index.razor**) and add the [Blazor Smart Paste Button](https://www.syncfusion.com/blazor-components/blazor-smartpaste-button) component inside the razor file. N> In this example, [Syncfusion® Blazor DataForm](https://blazor.syncfusion.com/documentation/data-form/getting-started-with-web-app) component is used to manage form input fields. To get started, install the [Syncfusion.Blazor.DataForm](https://www.nuget.org/packages/Syncfusion.Blazor.DataForm) package. {% tabs %} -{% highlight razor tabtitle="~/Index.razor" %} +{% highlight razor tabtitle="Index.razor" %} + +@rendermode InteractiveServer @using Syncfusion.Blazor.DataForm @using System.ComponentModel.DataAnnotations @@ -377,7 +521,45 @@ N> In this example, [Syncfusion® Blazor Dat {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Smart Paste Button component in your default web browser. +**Run the application** + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Smart Paste Button component will render in your default web browser. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} * Copy the `Sample Content` and click on `Smart Paste` to see how the form is instantly filled. From e91a5d49e985b026c8b26a7507f29ce9a661ad1d Mon Sep 17 00:00:00 2001 From: Pugazhenthi-Murugan Date: Fri, 12 Jun 2026 12:22:14 +0530 Subject: [PATCH 2/3] Fix errors --- blazor/smart-paste/getting-started-webapp.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/smart-paste/getting-started-webapp.md b/blazor/smart-paste/getting-started-webapp.md index 80160e0eed..ceda65c6f8 100644 --- a/blazor/smart-paste/getting-started-webapp.md +++ b/blazor/smart-paste/getting-started-webapp.md @@ -417,7 +417,7 @@ dotnet add package OllamaSharp Add the following to the **~/Program.cs** file: {% tabs %} -{% highlight C# tabtitle="Program.cs hl_lines="7 8 9 11 12 13" %} +{% highlight C# tabtitle="Program.cs" hl_lines="7 8 9 11 12 13" %} using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components.Web; From 0a2faff3202a3196ccecac4b1d19fff23b51cb16 Mon Sep 17 00:00:00 2001 From: Pugazhenthi-Murugan Date: Fri, 12 Jun 2026 12:38:59 +0530 Subject: [PATCH 3/3] Remove Server App content --- blazor/smart-paste/getting-started.md | 358 +++++++------------------- 1 file changed, 88 insertions(+), 270 deletions(-) diff --git a/blazor/smart-paste/getting-started.md b/blazor/smart-paste/getting-started.md index bd72b36fd7..aa988097df 100644 --- a/blazor/smart-paste/getting-started.md +++ b/blazor/smart-paste/getting-started.md @@ -1,122 +1,104 @@ --- layout: post -title: Getting Started Blazor Smart Paste Button Server App | Syncfusion +title: Getting Started with Blazor Smart Paste Button | Syncfusion description: Checkout and learn about getting started with Blazor Smart Paste Button component in Blazor Server App. platform: Blazor control: Smart Paste Button documentation: ug --- -# Getting Started with Smart Paste Button in Blazor Server App +# Getting Started with Smart Paste Button Component -This section briefly explains about how to include [Blazor Smart Paste Button](https://www.syncfusion.com/blazor-components/blazor-smartpaste-button) component in your Blazor Server App 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/). - -## Create a new Blazor Server App +This section briefly explains about how to include [Blazor Smart Paste Button](https://www.syncfusion.com/blazor-components/blazor-smartpaste-button) component in your Blazor Server App using Visual Studio. {% tabcontents %} {% tabcontent Visual Studio %} -Create a **Blazor Server App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. - -{% endtabcontent %} - -{% tabcontent Visual Studio Code %} - -Run the following command to create a new Blazor Server App. +## Prerequisites -{% tabs %} -{% highlight razor tabtitle="Terminal" %} - -dotnet new blazor -o BlazorServerApp --interactivity Server +* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +* OpenAI or Azure OpenAI Account -{% endhighlight %} -{% endtabs %} +N> Syncfusion® Blazor Smart Components are compatible with both `OpenAI` and `Azure OpenAI`, and fully support Server Interactivity mode apps. -Alternatively, create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc), the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. +## Create a new Blazor App in Visual Studio -{% endtabcontent %} +You can create a **Blazor Server App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -{% tabcontent .NET CLI %} +## Install Syncfusion® Blazor SmartComponents and Themes NuGet in the App -Run the following command to create a new Blazor Server App. +To add **Blazor Smart Paste Button** 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.SmartComponents](https://www.nuget.org/packages?q=Syncfusion.Blazor.SmartComponents) 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. {% tabs %} -{% highlight razor tabtitle="Command Prompt" %} +{% highlight C# tabtitle="Package Manager" %} -dotnet new blazor -o BlazorApp --interactivity Server +Install-Package Syncfusion.Blazor.SmartComponents -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -{% endtabcontent %} +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. -{% endtabcontents %} +{% endtabcontent %} -N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). +{% tabcontent Visual Studio Code %} -## Install the required Blazor packages +## Prerequisites -Install the [Syncfusion.Blazor.SmartComponents](https://www.nuget.org/packages?q=Syncfusion.Blazor.SmartComponents) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages.All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. +* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +* OpenAI or Azure OpenAI Account -{% tabcontents %} +N> Syncfusion® Blazor Smart Components are compatible with both `OpenAI` and `Azure OpenAI`, and fully support Server Interactivity mode apps. -{% tabcontent Visual Studio %} +## Create a new Blazor App in Visual Studio Code -1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. -2. Search the required NuGet packages (`Syncfusion.Blazor.SmartComponents` and `Syncfusion.Blazor.Themes`) and install them. +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-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can install the same packages using the Package Manager Console with the following commands. +Alternatively, you can create a Server application using the following command in the terminal(Ctrl+`). {% tabs %} -{% highlight razor tabtitle="Package Manager Console" %} - -Install-Package Syncfusion.Blazor.SmartComponents -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} - -{% endhighlight %} -{% endtabs %} - -{% endtabcontent %} - -{% tabcontent Visual Studio Code %} - -Open the terminal and run the following commands. -{% tabs %} -{% highlight razor tabtitle="Terminal" %} +{% highlight c# tabtitle="Blazor Server App" %} -dotnet add package Syncfusion.Blazor.SmartComponents -v {{ site.releaseversion }} -dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} +dotnet new blazorserver -o BlazorApp +cd BlazorApp {% endhighlight %} -{% endtabs %} -{% endtabcontent %} +{% endtabs %} -{% tabcontent .NET CLI %} +## Install Syncfusion® Blazor SmartComponents and Themes NuGet in the App -Open the command prompt and run the following commands. +* 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.SmartComponents](https://www.nuget.org/packages?q=Syncfusion.Blazor.SmartComponents) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. {% tabs %} -{% highlight razor tabtitle="Command Prompt" %} + +{% highlight c# tabtitle="Package Manager" %} dotnet add package Syncfusion.Blazor.SmartComponents -v {{ site.releaseversion }} dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} +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. + {% endtabcontent %} {% endtabcontents %} -## Add import namespaces +## Register Syncfusion® Blazor Service -After the packages are installed, open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SmartComponents` namespaces. +Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.SmartComponents` namespace. {% tabs %} -{% highlight C# tabtitle="~/_Imports.razor" %} +{% highlight razor tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.SmartComponents @@ -124,17 +106,23 @@ After the packages are installed, open the **~/_Imports.razor** file in the clie {% endhighlight %} {% endtabs %} -## Register the Blazor service - -Open the **Program.cs** file in Blazor Server App and register the Blazor service. +Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Server App. {% tabs %} -{% highlight c# tabtitle="Program.cs" %} +{% highlight C# tabtitle="Blazor Server App" hl_lines="3 10" %} -.... +using Microsoft.AspNetCore.Components; +using Microsoft.AspNetCore.Components.Web; using Syncfusion.Blazor; -.... + +var builder = WebApplication.CreateBuilder(args); + +// Add services to the container. +builder.Services.AddRazorPages(); +builder.Services.AddServerSideBlazor(); builder.Services.AddSyncfusionBlazor(); + +var app = builder.Build(); .... {% endhighlight %} @@ -146,71 +134,25 @@ Follow the instructions below to register an AI model in your application. ### OpenAI -Install the following NuGet packages to your project: - -* [Microsoft.Extensions.AI](https://www.nuget.org/packages/Microsoft.Extensions.AI) -* [Microsoft.Extensions.AI.OpenAI](https://www.nuget.org/packages/Microsoft.Extensions.AI.OpenAI) - -You can install these packages using different methods as shown below: - -{% tabcontents %} - -{% tabcontent Visual Studio %} - -1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. -2. Search the required NuGet packages (`Microsoft.Extensions.AI` and `Microsoft.Extensions.AI.OpenAI`) and install them. +For **OpenAI**, create an API key and place it at `openAIApiKey`. The value for `openAIModel` is the model you wish to use (e.g., `gpt-3.5-turbo`, `gpt-4`, etc.). -Alternatively, you can install the same packages using the Package Manager Console with the following commands. +* Install the following NuGet packages to your project: {% tabs %} -{% highlight razor tabtitle="Package Manager Console" %} + +{% highlight c# tabtitle="Package Manager" %} Install-Package Microsoft.Extensions.AI Install-Package Microsoft.Extensions.AI.OpenAI {% endhighlight %} -{% endtabs %} - -{% endtabcontent %} - -{% tabcontent Visual Studio Code %} - -Open the terminal and run the following commands. - -{% tabs %} -{% highlight razor tabtitle="Terminal" %} - -dotnet add package Microsoft.Extensions.AI -dotnet add package Microsoft.Extensions.AI.OpenAI - -{% endhighlight %} -{% endtabs %} - -{% endtabcontent %} - -{% tabcontent .NET CLI %} -Open the command prompt and run the following commands. - -{% tabs %} -{% highlight razor tabtitle="Command Prompt" %} - -dotnet add package Microsoft.Extensions.AI -dotnet add package Microsoft.Extensions.AI.OpenAI - -{% endhighlight %} {% endtabs %} -{% endtabcontent %} - -{% endtabcontents %} - -For **OpenAI**, create an API key and place it at `openAIApiKey`. The value for `openAIModel` is the model you wish to use (e.g., `gpt-3.5-turbo`, `gpt-4`, etc.). - * To configure the AI service, add the following settings to the **~/Program.cs** file in your Blazor Server app. {% tabs %} -{% highlight C# tabtitle="Program.cs" hl_lines="7 8 9 11 12 13" %} +{% highlight C# tabtitle="Blazor Server App" hl_lines="7 8 9 11 12 13" %} using Syncfusion.Blazor.SmartComponents; using Syncfusion.Blazor.AI; @@ -239,75 +181,26 @@ var app = builder.Build(); ### Azure OpenAI -Install the following NuGet packages to your project: - -* [Microsoft.Extensions.AI](https://www.nuget.org/packages/Microsoft.Extensions.AI) -* [Microsoft.Extensions.AI.OpenAI](https://www.nuget.org/packages/Microsoft.Extensions.AI.OpenAI) -* [Azure.AI.OpenAI](https://www.nuget.org/packages/Azure.AI.OpenAI) - -You can install these packages using different methods as shown below: - -{% tabcontents %} - -{% tabcontent Visual Studio %} - -1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. -2. Search the required NuGet packages (`Microsoft.Extensions.AI`, `Microsoft.Extensions.AI.OpenAI` and `Azure.AI.OpenAI`) and install them. +For **Azure OpenAI**, first [deploy an Azure OpenAI Service resource and model](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource), then values for `azureOpenAIKey`, `azureOpenAIEndpoint` and `azureOpenAIModel` will all be provided to you. -Alternatively, you can install the same packages using the Package Manager Console with the following commands. +* Install the following NuGet packages to your project: {% tabs %} -{% highlight razor tabtitle="Package Manager Console" %} + +{% highlight c# tabtitle="Package Manager" %} Install-Package Microsoft.Extensions.AI Install-Package Microsoft.Extensions.AI.OpenAI Install-Package Azure.AI.OpenAI {% endhighlight %} -{% endtabs %} -{% endtabcontent %} - -{% tabcontent Visual Studio Code %} - -Open the terminal and run the following commands. - -{% tabs %} -{% highlight razor tabtitle="Terminal" %} - -dotnet add package Microsoft.Extensions.AI -dotnet add package Microsoft.Extensions.AI.OpenAI -dotnet add package Azure.AI.OpenAI - -{% endhighlight %} -{% endtabs %} - -{% endtabcontent %} - -{% tabcontent .NET CLI %} - -Open the command prompt and run the following commands. - -{% tabs %} -{% highlight razor tabtitle="Command Prompt" %} - -dotnet add package Microsoft.Extensions.AI -dotnet add package Microsoft.Extensions.AI.OpenAI -dotnet add package Azure.AI.OpenAI - -{% endhighlight %} {% endtabs %} -{% endtabcontent %} - -{% endtabcontents %} - -For **Azure OpenAI**, first [deploy an Azure OpenAI Service resource and model](https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource), then values for `azureOpenAIKey`, `azureOpenAIEndpoint` and `azureOpenAIModel` will all be provided to you. - * To configure the AI service, add the following settings to the **~/Program.cs** file in your Blazor Server app. {% tabs %} -{% highlight C# tabtitle="Program.cs" hl_lines="7 8 9 11 12 13" %} +{% highlight C# tabtitle="Blazor Server App" hl_lines="7 8 9 11 12 13" %} using Syncfusion.Blazor.SmartComponents; using Syncfusion.Blazor.AI; @@ -340,6 +233,7 @@ var app = builder.Build(); {% endhighlight %} {% endtabs %} + N> From version 28.2.33 to 30.2.6, the Azure.AI.OpenAI package has been removed from the SmartComponents dependency. To use Azure OpenAI, please install the [Azure.AI.OpenAI](https://www.nuget.org/packages/Azure.AI.OpenAI) package separately in your Blazor application. ### Ollama @@ -359,58 +253,17 @@ To use Ollama for running self-hosted models: * Install the following NuGet packages to your project: -{% tabcontents %} - -{% tabcontent Visual Studio %} - -1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. -2. Search the required NuGet packages (`Microsoft.Extensions.AI` and `OllamaSharp`) and install them. - -Alternatively, you can install the same packages using the Package Manager Console with the following commands. - {% tabs %} -{% highlight razor tabtitle="Package Manager Console" %} + +{% highlight c# tabtitle="Package Manager" %} Install-Package Microsoft.Extensions.AI -Install-Package OllamaSharp +Install-Package OllamaSharp {% endhighlight %} -{% endtabs %} - -{% endtabcontent %} -{% tabcontent Visual Studio Code %} - -Open the terminal and run the following commands. - -{% tabs %} -{% highlight razor tabtitle="Terminal" %} - -dotnet add package Microsoft.Extensions.AI -dotnet add package OllamaSharp - -{% endhighlight %} {% endtabs %} -{% endtabcontent %} - -{% tabcontent .NET CLI %} - -Open the command prompt and run the following commands. - -{% tabs %} -{% highlight razor tabtitle="Command Prompt" %} - -dotnet add package Microsoft.Extensions.AI -dotnet add package OllamaSharp - -{% endhighlight %} -{% endtabs %} - -{% endtabcontent %} - -{% endtabcontents %} - * Add the following settings to the **~/Program.cs** file in your Blazor Server app. {% tabs %} @@ -442,31 +295,34 @@ var app = builder.Build(); ## 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](https://blazor.syncfusion.com/documentation/appearance/themes) and [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) in the **App.razor** file. - -{% tabs %} -{% highlight html tabtitle="App.razor" %} - -... - -... - - -{% endhighlight %} -{% endtabs %} +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 main page as follows: + +* For **.NET 6** Blazor Server app, include it in **~/Pages/_Layout.cshtml** file. + +* For **.NET 10, .NET 9 and .NET 8** Blazor Server app, include it in the **~/Components/App.razor** file. + +```html + + .... + + + + + .... + + +``` 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 Blazor Smart Paste Button component +## Add Syncfusion® Blazor Smart Paste Button component -Open a Razor file located in the **~/Pages/*.razor** (for example, **Index.razor**) and add the [Blazor Smart Paste Button](https://www.syncfusion.com/blazor-components/blazor-smartpaste-button) component inside the razor file. +Add the Syncfusion® **Blazor Smart Paste Button** component with form components in the **~/Pages/Index.razor** file. N> In this example, [Syncfusion® Blazor DataForm](https://blazor.syncfusion.com/documentation/data-form/getting-started-with-web-app) component is used to manage form input fields. To get started, install the [Syncfusion.Blazor.DataForm](https://www.nuget.org/packages/Syncfusion.Blazor.DataForm) package. {% tabs %} -{% highlight razor tabtitle="Index.razor" %} - -@rendermode InteractiveServer +{% highlight razor tabtitle="~/Index.razor" %} @using Syncfusion.Blazor.DataForm @using System.ComponentModel.DataAnnotations @@ -521,45 +377,7 @@ N> In this example, [Syncfusion® Blazor Dat {% endhighlight %} {% endtabs %} -**Run the application** - -{% tabcontents %} - -{% tabcontent Visual Studio %} - -Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Smart Paste Button component will render in your default web browser. - -{% endtabcontent %} - -{% tabcontent Visual Studio Code %} - -Open the terminal and run the following command. - -{% tabs %} -{% highlight razor tabtitle="Terminal" %} - -dotnet run - -{% endhighlight %} -{% endtabs %} - -{% endtabcontent %} - -{% tabcontent .NET CLI %} - -Open the command prompt and run the following command. - -{% tabs %} -{% highlight razor tabtitle="Command Prompt" %} - -dotnet run - -{% endhighlight %} -{% endtabs %} - -{% endtabcontent %} - -{% endtabcontents %} +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Smart Paste Button component in your default web browser. * Copy the `Sample Content` and click on `Smart Paste` to see how the form is instantly filled.