How to bind Textbox with label control in ASP.NET
3 different ways to
bind textbox with label in ASP.NET
Here we will look into three different ways to bind
textbox with label control in asp.net. Basically, we will use JQuery and
JavaScript function to do same. Let’s see how to do it one by one.
1) Bind using JQuery
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Binding.aspx.cs" Inherits="ASP.NET.Binding"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" lang="js">
$(function () {
$("input[type=text]").keypress(function () {
var lbl = document.getElementById("LAbel1");
var Value = document.getElementById('<%=
TB1.ClientID %>').value;
lbl.innerHTML = Value;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TB1" runat="server"
style="top: 54px; left: 354px; position: absolute; height: 22px; width: 128px"></asp:TextBox>
<asp:Label ID="LAbel1" runat="server"
style="top: 91px; left: 359px; position: absolute; height: 19px; width: 213px"></asp:Label>
<asp:Label ID="Label1" runat="server"
ForeColor="#FF6600"
style="top: 53px; left: 107px; position: absolute; height: 19px; width: 223px"
Text="Enter text
here"></asp:Label>
<asp:Label ID="Label2" runat="server"
ForeColor="#3333CC"
style="top: 90px; left: 110px; position: absolute; height: 19px; width: 186px"
Text="Same text from
textbox"></asp:Label>
</div>
</form>
</body>
</html>
Here you can see we have defined JQuery function in
<head> section of HTML page.
Step 2) By OnChange
event of JavaScript
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Binding.aspx.cs" Inherits="ASP.NET.Binding"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function Changed(textControl) {
alert(textControl.value);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1"
runat="server"
onchange="javascript:
Changed( this );"></asp:TextBox>
<asp:Label ID="Label1" runat="server"
Text="Label"></asp:Label>
</div>
</form>
</body>
</html>
We can call JavaScript function from onchange event of
TextBox.
Step 3 ) Bind event
from Server side to client side element
Below is the content of aspx page.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Binding.aspx.cs" Inherits="ASP.NET.Binding"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function change() {
document.getElementById("Label1").innerHTML = document.getElementById('<%=TextBox1.ClientID%>').value
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1"
runat="server"></asp:TextBox>
<asp:Label ID="Label1" runat="server"
Text="Label"></asp:Label>
</div>
</form>
</body>
</html>
Here is the content of Page_Load event . We can see
in client side we did not bind any method with any control. We are attaching
function from C# code. When page will get load the function will bind with
textbox element.
protected void Page_Load(object sender, EventArgs e)
{
TextBox1.Attributes.Add("onchange", "javascript:change()");
}
Conclusion:
Those are three different ways to bind TextBox with Label control in asp.net