New to Telerik UI for ASP.NET MVC? Start a free 30-day trial
Getting Started with the SmartPasteButton
Updated on Feb 11, 2026
This guide demonstrates how to set up the Telerik UI for ASP.NET MVC SmartPasteButton and use it to populate form fields based on clipboard text.
For a complete example, refer to the SmartPasteButton demo.
1. Add the Target Editors
The following example shows the editors that will receive the extracted values.
Razor
<form id="form-getting-started">
@(Html.Kendo().TextBox()
.Name("fullName")
.Label(l => l.Content("Full Name"))
.Placeholder("Full Name")
)
@(Html.Kendo().TextBox()
.Name("city")
.Label(l => l.Content("City"))
.Placeholder("City")
)
@(Html.Kendo().MaskedTextBox()
.Name("phone_number")
.Label(l => l.Content("Phone Number"))
.HtmlAttributes(new { placeholder = "e.g. XXXXXXXX" })
.Mask("(000) 000-00-00")
)
</form>2. Add the SmartPasteButton
Use the Service() configuration to point the component to your AI SmartPaste service.
Razor
@(Html.Kendo().SmartPasteButton()
.Name("smartPaste")
.Service("https://demos.telerik.com/service/v2/ai/smartpaste/smartpaste")
.Text("Smart Paste")
.Events(e => e.RequestStart("onRequestStart").RequestEnd("onRequestEnd"))
)3. Handle the Request Lifecycle
In the demo, the RequestStart and RequestEnd handlers show and hide a Loader.
JS
<script>
function onRequestStart() {
var loader = $("#loader").data("kendoLoader");
loader.show();
$("#copyButton").find(".k-button-text").text("Copy Text");
clearSelection();
}
function onRequestEnd() {
var loader = $("#loader").data("kendoLoader");
loader.hide();
$("input").addClass("k-valid");
}
function clearSelection(){
var selection = window.getSelection();
if (selection && selection.rangeCount > 0) {
selection.removeAllRanges();
}
}
</script>