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) MVC.
Model
The Model class consists of following property.
public class PersonModel
{
public string Name { get; set; }
}
Controller
The Controller consists of following Action method.
Action method for handling GET operation
Inside this Action method, simply the View is returned.
public class HomeController : Controller
{
// GET: Home
public IActionResult Index()
{
return View();
}
}
View
HTML Markup
Inside the View, in the very first line the PersonModel class is declared as Model for the View.
The View 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 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.
@model Copy_TextBox_Label_JavaScript_Core.Models.PersonModel
@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="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: Display (Copy) TextBox value to Label using JavaScript]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
