Getting Started with ASP.NET Core Smart Paste Button Control

16 Dec 20258 minutes to read

This section briefly explains about how to include ASP.NET Core Smart Paste Button control in your ASP.NET Core application using Visual Studio.

Prerequisites

System requirements for ASP.NET Core controls

Create ASP.NET Core web application with Razor pages

Install ASP.NET Core package in the application

To add ASP.NET Core controls in the application, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for Syncfusion.EJ2.AspNet.Core and then install it. Alternatively, you can utilize the following package manager command to achieve the same.

Package Manager
Install-Package Syncfusion.EJ2.AspNet.Core -Version 32.1.19

NOTE

Syncfusion^® ASP.NET Core controls are available in nuget.org. Refer to NuGet packages topic to learn more about installing NuGet packages in various OS environments. The Syncfusion.EJ2.AspNet.Core NuGet package has dependencies, Newtonsoft.Json for JSON serialization and Syncfusion.Licensing for validating Syncfusion^® license key.

Add Syncfusion^® ASP.NET Core Tag Helper

Open ~/Pages/_ViewImports.cshtml file and import the Syncfusion.EJ2 TagHelper.

~/_ViewImports.cshtml
@addTagHelper *, Syncfusion.EJ2

Add stylesheet and script resources

Here, the theme and script is referred using CDN inside the <head> of ~/Pages/Shared/_Layout.cshtml file as follows,

~/_Layout.cshtml
<head>
    ...
    <!-- Syncfusion ASP.NET Core controls styles -->
    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/32.1.19/fluent.css" />
    <!-- Syncfusion ASP.NET Core controls scripts -->
    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js"></script>
</head>

NOTE

Checkout the Themes topic to learn different ways (CDN, NPM package, and CRG) to refer styles in ASP.NET Core application, and to have the expected appearance for Syncfusion^® ASP.NET Core controls.

NOTE

Checkout the Adding Script Reference topic to learn different approaches for adding script references in your ASP.NET Core application.

Register Syncfusion^® Script Manager

Also, register the script manager <ejs-script> at the end of <body> in the ASP.NET Core application as follows.

~/_Layout.cshtml
<body>
    ...
    <!-- Syncfusion ASP.NET Core Script Manager -->
    <ejs-scripts></ejs-scripts>
</body>

Configure AI Service

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

Install the following NuGet packages based on your chosen AI provider:

Package Manager
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

OpenAI Configuration

For OpenAI, obtain an API key from OpenAI 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:

CSHTML

using Microsoft.Extensions.AI;
using OpenAI;
using Syncfusion.EJ2;


builder.Services.AddRazorPages();

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

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

Azure OpenAI Configuration

For Azure OpenAI, deploy a resource and model as described in Azure OpenAI documentation. Obtain the API key, endpoint, and model name from your Azure portal.

Add the following to the ~/Program.cs file:

CSHTML

using Syncfusion.EJ2;
using Microsoft.Extensions.AI;
using Azure.AI.OpenAI;
using System.ClientModel;

builder.Services.AddRazorPages();

string azureOpenAIKey = "AZURE_OPENAI_KEY";
string azureOpenAIEndpoint = "AZURE_OPENAI_ENDPOINT";
string azureOpenAIModel = "AZURE_OPENAI_MODEL";
AzureOpenAIClient azureOpenAIClient = new AzureOpenAIClient(
     new Uri(azureOpenAIEndpoint),
     new ApiKeyCredential(azureOpenAIKey)
);
IChatClient azureOpenAIChatClient = azureOpenAIClient.GetChatClient(azureOpenAIModel).AsIChatClient();
builder.Services.AddChatClient(azureOpenAIChatClient);

builder.Services.AddSyncfusionSmartComponents()
    .InjectOpenAIInference();

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

Ollama Configuration

To use Ollama for self-hosted models:

Download and install Ollama from Ollama’s official website.
Install a model from the Ollama Library (e.g., llama2:13b, mistral:7b).
Configure the endpoint URL (e.g., http://localhost:11434) and model name.

Add the following to the ~/Program.cs file:

CSHTML

using Syncfusion.EJ2;
using Microsoft.Extensions.AI;
using OllamaSharp;

builder.Services.AddRazorPages();

string ModelName = "MODEL_NAME";
IChatClient chatClient = new OllamaApiClient("http://localhost:11434", ModelName);
builder.Services.AddChatClient(chatClient);

builder.Services.AddSyncfusionSmartComponents()
    .InjectOpenAIInference();

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

Add ASP.NET Core Smart Paste Button Control

Now, add the Syncfusion^® ASP.NET Core Smart Paste Button tag helper in ~/Pages/Index.cshtml page.

CSHTML
<h1>Contact Form</h1>
<form action="/submit" method="post">
    <div class="mb-2">
        <label for="name" class="form-label">Full Name</label>
        <input type="text" class="form-control" id="name" name="name" required>
    </div>
    <div class="mb-2">
        <label for="email" class="form-label">Email</label>
        <input type="email" class="form-control" id="email" name="email" required>
    </div>
    <div class="mb-2">
        <label for="phone" class="form-label">Phone Number</label>
        <input type="tel" class="form-control" id="phone" name="phone">
    </div>
    <div class="mb-2">
        <label for="message" class="form-label">Message</label>
        <textarea class="form-control" id="message" name="message" rows="4"></textarea>
    </div>
    <div class="mb-2 form-check">
        <input type="checkbox" class="form-check-input" id="newsletter" name="newsletter" checked>
        <label class="form-check-label" for="newsletter">Subscribe to newsletter</label>
    </div>
    <div class="mb-2">
        <label class="form-label">Preferred Contact Method</label>
        <div class="form-check">
            <input type="radio" class="form-check-input" id="email-contact" name="contact" value="email">
            <label class="form-check-label" for="email-contact">Email</label>
        </div>
        <div class="form-check">
            <input type="radio" class="form-check-input" id="phone-contact" name="contact" value="phone">
            <label class="form-check-label" for="phone-contact">Phone</label>
        </div>
    </div>
    <div class="mb-2">
        <label for="country" class="form-label">Country</label>
        <select class="form-select" id="country" name="country">
            <option value="">Select Country</option>
            <option value="United States">United States</option>
            <option value="Canada">Canada</option>
            <option value="United Kingdom">United Kingdom</option>
        </select>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
    <button type="reset" class="btn btn-secondary">Reset</button>
    <ejs-smartpaste id="smartPasteBtn" content="Smart Paste" cssClass="e-primary" iconCss="e-icons e-paste"></ejs-smartpaste>
</form>

<br />
<div>
    I am John Doe from the United States. My email is [email protected], and my phone number is 555-123-4567. I’d like to inquire about your services and have a detailed discussion regarding your product offerings. Please contact me via email. I’m happy to subscribe to your newsletter for updates. Thank you!
</div>

Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to run the app. Then, the Syncfusion^® ASP.NET Core
Smart Paste Button control will be rendered in the default web browser.

ASP.NET Core Smart Paste Button Control

Performance Considerations

For optimal performance with the Smart Paste Button:

Use lightweight AI models (e.g., gpt-3.5-turbo or mistral:7b) for faster processing.
Limit form complexity to reduce AI parsing time, especially for large datasets.
Cache AI model responses where possible to minimize repeated API calls.

Troubleshooting Common Issues

AI Service Configuration Errors: Verify the API key, endpoint, and model name in Program.cs. Check for typos or incorrect values.
Network Failures: Ensure a stable internet connection for OpenAI or Azure OpenAI. For Ollama, confirm the local server is running at the specified endpoint (e.g., http://localhost:11434).
Form Not Populating: Confirm that the copied text matches the form field structure and that the AI model is correctly configured.

Search docs

Ask HelpBot

Search docs

Ask HelpBot

Getting Started with ASP.NET Core Smart Paste Button Control

Prerequisites

Create ASP.NET Core web application with Razor pages

Install ASP.NET Core package in the application

Add Syncfusion^® ASP.NET Core Tag Helper

Add stylesheet and script resources

Register Syncfusion^® Script Manager

Configure AI Service

Install AI Service NuGet Packages

OpenAI Configuration

Azure OpenAI Configuration

Ollama Configuration

Add ASP.NET Core Smart Paste Button Control

Performance Considerations

Troubleshooting Common Issues

Getting Started with ASP.NET Core Smart Paste Button Control

Prerequisites

Create ASP.NET Core web application with Razor pages

Install ASP.NET Core package in the application

Add Syncfusion® ASP.NET Core Tag Helper

Add stylesheet and script resources

Register Syncfusion® Script Manager

Configure AI Service

Install AI Service NuGet Packages

OpenAI Configuration

Azure OpenAI Configuration

Ollama Configuration

Add ASP.NET Core Smart Paste Button Control

Performance Considerations

Troubleshooting Common Issues

Add Syncfusion^® ASP.NET Core Tag Helper

Register Syncfusion^® Script Manager