In this article I will explain with an example, how to display (copy) TextBox value to Label using jQuery in ASP.Net Core (.Net Core) Razor Pages.
Note: For beginners in ASP.Net Core (.Net Core 7) Razor Pages, please refer my article ASP.Net Core 7 Razor Pages: Hello World Tutorial with Sample Program example.
 
 

Model

The Model class consists of following property.
public class PersonModel
{
    public string Name { get; set; }
}
 
 

Index PageModel (Code-Behind)

Inside the PageModel, first the public property of PersonModel created.
The PageModel consists of following Handler method.

Handler method for handling GET operation

This Handler method left empty as it is not required.
public class IndexModel : PageModel
{
    public PersonModel Person { get; set; }
 
    public void OnGet()
    {
    }
}
 
 

Razor Page (HTML)

HTML Markup

Inside the Razor Page, the ASP.Net TagHelpers is inherited.
HTML of Razor Page consists of an HTML INPUT TextBox, a Label and an HTML INPUT Button.
The TextBox has been assigned with a TagHelpers attribute asp-for which is set with the Name property of Person Model.
 
Inside the HTML Markup, the following script file is inherited:
1. jquery.min.js
Inside the jQuery document ready event handler, the Copy To Label Button has been assigned with a jQuery click event handler.
When the Button is clicked, first the TextBox and Label controls are referenced and the TextBox value is set to the Label control.
@page
@model Copy_TextBox_Label_jQuery_Core_Razor.Pages.IndexModel
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
     Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <input id="txtName" type="text" asp-for="Person.Name" />
    <input id="btnCopyToLabel" type="button" value="Copy To Label" />
    <hr />
    <label id="lblName"></label>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnCopyToLabel").click(function () {
                //Reference the TextBox.
                var txtName = $("#txtName");
 
                //Reference the Label.ss
                var lblName = $("#lblName");
 
                //Copy the TextBox value to Label.
                lblName.html(txtName.val());
            });
        });
    </script>
</body>
</html>
 
 

Screenshot

ASP.Net Core Razor Pages: Display (Copy) TextBox value to Label using jQuery
 
 

Browser Compatibility

The above code has been tested in the following browsers.
Microsoft Edge   FireFox  Chrome  Safari  Opera
* All browser logos displayed above are property of their respective owners.
 
 

Demo

View Demo
 
 

Downloads

Download Code