3 different ways to bind textbox with label in ASP.NET

Sourav.Kayal
Posted by in ASP.NET category on for Beginner level | Points: 250 | Views : 7742 red flag

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 

Page copy protected against web site content infringement by Copyscape

About the Author

Sourav.Kayal
Full Name: Sourav Kayal
Member Level: Silver
Member Status: Member,MVP
Member Since: 6/20/2013 2:09:01 AM
Country: India
Read my blog here http://ctrlcvprogrammer.blogspot.in/
http://www.dotnetfunda.com
I am .NET developer working for HelixDNA Technologies,Bangalore in healthcare domain. Like to learn new technology and programming language. Currently working in ASP.NET ,C# and other microsoft technologies.

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)