Getting Started with Smart Paste Button Component

22 Oct 20246 minutes to read

This section briefly explains about how to include Blazor Smart Paste Button component in your Blazor Server App using Visual Studio.

Prerequisites

NOTE

Syncfusion Blazor Smart Components are compatible with both OpenAI and Azure OpenAI, and fully support Server Interactivity mode apps.

Create a new Blazor App in Visual Studio

You can create a Blazor Server App using Visual Studio via Microsoft Templates or the Syncfusion Blazor Extension.

Install Syncfusion Blazor SmartComponents and Themes NuGet in the 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 and Syncfusion.Blazor.Themes. Alternatively, you can utilize the following package manager command to achieve the same.

Install-Package Syncfusion.Blazor.SmartComponents -Version 27.1.48
Install-Package Syncfusion.Blazor.Themes -Version 27.1.48

NOTE

Syncfusion Blazor components are available in nuget.org. Refer to NuGet packages topic for available NuGet packages list with component details.

Register Syncfusion Blazor Service

Open ~/_Imports.razor file and import the Syncfusion.Blazor and Syncfusion.Blazor.SmartComponents namespace.

@using Syncfusion.Blazor
@using Syncfusion.Blazor.SmartComponents

Now, register the Syncfusion Blazor Service in the ~/Program.cs file of your Blazor Server App.

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();
....

Configure AI Service

To configure the AI service, add the following settings to the ~/Program.cs file in your Blazor Server app.

using Syncfusion.Blazor.SmartComponents;
var builder = WebApplication.CreateBuilder(args);

....

builder.Services.AddSyncfusionBlazor();

string apiKey = "api-key";
string deploymentName = "deployment-name";
string endpoint = "end point url";

builder.Services.AddSyncfusionSmartComponents()
.ConfigureCredentials(new AIServiceCredentials(apiKey, deploymentName, endpoint))
.InjectOpenAIInference();

var app = builder.Build();
....

Here,

  • apiKey: “OpenAI or Azure OpenAI API Key”;
  • deploymentName: “Azure OpenAI deployment name”;
  • endpoint: “Azure OpenAI deployment end point URL”;

For Azure OpenAI, first deploy an Azure OpenAI Service resource and model, then values for apiKey, deploymentName and endpoint will all be provided to you.

If you are using OpenAI, create an API key and place it at apiKey, leave the endpoint as "". The value for deploymentName is the model you wish to use (e.g., gpt-3.5-turbo, gpt-4, etc.).

Add stylesheet and script resources

The theme stylesheet and script can be accessed from NuGet through Static Web Assets. Reference the stylesheet and script in the <head> of the main page as follows:

  • For .NET 6 Blazor Server app, include it in ~/Pages/_Layout.cshtml file.

  • For .NET 8 Blazor Server app, include it in the ~/Components/App.razor file.

<head>
    ....
    <link href="_content/Syncfusion.Blazor.Themes/tailwind.css" rel="stylesheet" />
</head>

<body>
    ....
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
</body>

NOTE

Check out the Blazor Themes topic to discover various methods (Static Web Assets, CDN, and CRG) for referencing themes in your Blazor application. Also, check out the Adding Script Reference topic to learn different approaches for adding script references in your Blazor application.

Add Syncfusion Blazor Smart Paste Button component

Add the Syncfusion Blazor Smart Paste Button component with form components in the ~/Pages/Index.razor file.

NOTE

In this example, Syncfusion Blazor DataForm component is used to manage form input fields. To get started, install the Syncfusion.Blazor.DataForm package.

@using Syncfusion.Blazor.DataForm
@using System.ComponentModel.DataAnnotations
@using Syncfusion.Blazor.SmartComponents

<SfDataForm ID="MyForm"
            Model="@EventRegistrationModel">
    <FormValidator>
        <DataAnnotationsValidator></DataAnnotationsValidator>
    </FormValidator>
    <FormItems>
        <FormItem Field="@nameof(EventRegistration.Name)" ID="firstname"></FormItem>
        <FormItem Field="@nameof(EventRegistration.Email)" ID="email"></FormItem>
        <FormItem Field="@nameof(EventRegistration.Phone)" ID="phonenumber"></FormItem>
        <FormItem Field="@nameof(EventRegistration.Address)" ID="address"></FormItem>
    </FormItems>
    <FormButtons>
        <SfSmartPasteButton IsPrimary="true" Content="Smart Paste" IconCss="e-icons e-paste">
        </SfSmartPasteButton>
    </FormButtons>
</SfDataForm>

<br>
<h4 style="text-align:center;">Sample content</h4>
<div>
    Hi, my name is Jane Smith. You can reach me at janesmith@domain.com or call me at +1-555-987-6543. I live at 789 Pine Avenue, Suite 12, Los Angeles, CA 90001.
</div>

@code {
    private EventRegistration EventRegistrationModel = new EventRegistration();

    public class EventRegistration
    {
        [Required(ErrorMessage = "Please enter your name.")]
        [Display(Name = "Name")]
        public string Name { get; set; }

        [Required(ErrorMessage = "Please enter your email address.")]
        [Display(Name = "Email ID")]
        public string Email { get; set; }

        [Required(ErrorMessage = "Please enter your mobile number.")]
        [Display(Name = "Phone Number")]
        public string Phone { get; set; }

        [Required(ErrorMessage = "Please enter your address.")]
        [Display(Name = "Address")]
        public string Address { get; set; }
    }
}

  • 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.

Syncfusion Smart Paste Button - Output

NOTE

View Sample in GitHub.

See also