In this article I will explain with an example, how to display (copy) TextBox value to Label using
JavaScript in ASP.Net Core (.Net Core) Razor Pages.
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.
The Button has been assigned with a
JavaScript onclick event handler.
When the
Button is clicked, the
CopyToLabel JavaScript function is called.
Inside this function, first the TextBox and Label elements are referenced and the TextBox value is set to the Label element.
@page
@model Copy_TextBox_Label_JavaScript_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 type="button" value="Copy To Label" onclick="CopyToLabel()" />
<hr />
<label id="lblName"></label>
<script type="text/javascript">
function CopyToLabel() {
//Reference the TextBox.
var txtName = document.getElementById("txtName");
//Reference the Label.
var lblName = document.getElementById("lblName");
//Copy the TextBox value to Label.
lblName.innerHTML = txtName.value;
}
</script>
</body>
</html>
Screenshot
![ASP.Net Core Razor Pages: Display (Copy) TextBox value to Label using JavaScript]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
