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

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 ActionResult 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 a TextBox and Label created using HTML.TextBoxFor and HTML.LabelFor Helper methods respectively and an HTML INPUT Button.
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 elements are referenced and the TextBox value is set to the Label element.
@model Copy_TextBox_Label_jQuery_MVC.Models.PersonModel
@{
     Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    @Html.TextBoxFor(m => m.Name, new { id = "txtName" })
    <input id="btnCopy" type="button" value="CopyTo Label" /> 
    <hr />
    @Html.LabelFor(m => m.Name, " ", new { id = "lblName" })
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnCopy").click(function () {
                //Reference the TextBox.
                var txtName = $("#txtName");
 
                //Reference the Label.
                var lblName = $("#lblName");
 
                //Copy the TextBox value to Label.
                lblName.html(txtName.val());
            });
        });
    </script>
</body>
</html>
 
 

Screenshot

ASP.Net MVC: 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