New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

WebForms SmartPasteButton Overview

Title
Ashley Johnson is a UX Designer with 8 years of experience in Portland, Oregon. She is reliable, and great at making complex ideas simple. Her approach ensures smooth teamwork and great results. Reach her at (555) 248-9173.

The WebForms SmartPasteButton component provides AI-powered form filling functionality. It allows users to automatically populate form fields with contextually relevant data from their clipboard through an intelligent paste operation.

The current example displays how you can initialize a basic SmartPasteButton with form fields.

Telerik WebForms SmartPasteButton is part of Telerik UI for ASP.NET AJAX, which is a comprehensive toolset containing over 120 controls and taking care of the common functionalities, allowing you more time to focus mainly on the business-specific logic of your application.

For more information about the Telerik WebForms SmartPasteButton Control, please refer to the documentation.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • script.js
  • style.css
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb"  Inherits="SmartPasteButton_Overview_DefaultVB" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="../SmartPasteStyles.css" rel="stylesheet" />
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container no-bg flex-center" runat="server">
        <div class="smartpaste-container" id="smartPasteContainer">
            <telerik:RadCard runat="server">
                <telerik:CardBodyComponent runat="server">
                    <div class="editor-column">
                        <div class="editor">
                            <div class="editor-toolbar">
                                <div class="schematic-toolbar">
                                    <div class="button-group">
                                        <div class="skeleton-btn skeleton-btn-left"><span class="label"></span></div>
                                        <div class="skeleton-btn skeleton-btn-right"><span class="label"></span></div>
                                    </div>
                                    <div class="commands">
                                        <div class="split-button">
                                            <div class="skeleton-btn skeleton-btn-split-main"><span class="label wide"></span></div>
                                            <div class="skeleton-btn skeleton-btn-split-arrow">
                                                <svg width="12" height="8" viewBox="0 0 12 8">
                                                    <path fill="#ffffff" d="M6 8L0 0h12L6 8z"></path>
                                                </svg>
                                            </div>
                                        </div>
                                        <div class="skeleton-btn skeleton-btn-icon">
                                            <svg width="4" height="16" viewBox="0 0 4 16">
                                                <circle cx="2" cy="2" r="2" fill="#ffffff"></circle>
                                                <circle cx="2" cy="8" r="2" fill="#ffffff"></circle>
                                                <circle cx="2" cy="14" r="2" fill="#ffffff"></circle>
                                            </svg>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="editor-text-area">
                                <div class="content">
                                    <div class="editor-body">
                                        <div class="editor-body-title">Title</div>
                                        <div class="editor-body-text" id="editorContent">
                                            Ashley Johnson is a UX Designer with 8 years of experience in Portland, Oregon.
                                            She is reliable, and great at making complex ideas simple.
                                            Her approach ensures smooth teamwork and great results.
                                            Reach her at (555) 248-9173.
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="editor-actions">
                            <telerik:RadButton runat="server" ID="CopyButton1" Text="Copy Text" AutoPostBack="false" OnClientClicked="onCopyClick" />
                        </div>
                    </div>
                </telerik:CardBodyComponent>
            </telerik:RadCard>
            <telerik:RadCard runat="server">
                <telerik:CardBodyComponent runat="server">
                    <div class="form-wrapper">
                        <div class="control-container">
                            <label for="RadtextBox1">Full Name</label>
                            <telerik:RadTextBox runat="server" ID="RadtextBox1" EmptyMessage="Full Name" Width="250" SmartPasteDescription="Name" />
                        </div>
                        <div class="control-container">
                            <label for="RadtextBox1">City</label>
                            <telerik:RadTextBox runat="server" ID="TextBox2" EmptyMessage="City" Width="250" SmartPasteDescription="City" />
                        </div>
                        <div class="control-container">
                            <label for="RadtextBox1">Phone Number</label>
                            <telerik:RadMaskedTextBox runat="server" ID="RadNumericTextBox1" Width="250" Mask="(###) ###-####" SmartPasteDescription="Phone Number must be only digits eg. 5552489173 and must be of type Number" />
                        </div>
                        <div class="buttonDiv">
                            <telerik:RadButton RenderMode="Lightweight" ID="RadButton13" runat="server" AutoPostBack="false" ToolTip="Clear Selction" OnClientClicked="onClearClick">
                                <Icon PrimaryIconCssClass="rbCancel"></Icon>
                            </telerik:RadButton>
                            <telerik:RadSmartPasteButton runat="server" ID="SmartPasteButton1" Text="Smart Paste" ServiceUrl="https://demos.telerik.com/service/v2/ai/smartpaste/smartpaste">
                                <ClientEvents OnRequestStart="onRequestStart" />
                            </telerik:RadSmartPasteButton>
                        </div>
                    </div>
                </telerik:CardBodyComponent>
            </telerik:RadCard>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance