How to Get Set Read Write Asp.Net Label Text or Value using Javascript in C# VB.Net

Almost in every cases we need to deal with Asp.Net Label Control. And the usage or accessing Label control from client side is a most common task. Here in this article I will explain “How we can Get Set Asp.Net Label Text Using Javascript“. To do the example I will first set some Text value into a Asp.Net Label Control & after that Get the Text value from that Label Control using Javascript. To Get Set Label Control Text or Value we can use two Javascript method innerText() & innerHTML(). I will explain both & also show the difference between these two methods.

Related Article:
How to Get Set Read Write Asp.Net Label Text or Value using JQuery in C# VB.Net

Objective/Outcome:
How to Get Set Read Write Asp.Net Label Text or Value using Javascript in Csharp VB.Net

HTML code to test the Example:

Using .innerText:<br /><hr />
    <asp:Label ID="Label1" runat="server" Text="It's a Label Control" Font-Bold="true"></asp:Label><br />
    <hr />
    <asp:Button ID="Button1" runat="server" Text="Set 'Some Text<br/>New Line' to Label" OnClientClick="return setText();" /><asp:Button ID="Button2" runat="server" Text="Read Text from Label" OnClientClick="return getText();"/>
    <br /><br />
Using .innerHTML:<br /><hr />
    <asp:Label ID="Label2" runat="server" Text="It's a Label Control" Font-Bold="true"></asp:Label><br />
    <hr />
    <asp:Button ID="Button3" runat="server" Text="Set 'Some Text<br/>New Line' to Label" OnClientClick="return setTextwithHTML();"/><asp:Button ID="Button4" runat="server" Text="Read Text from Label" OnClientClick="return getTextwithHTML();"/>

Javascript innerText() Method to Set Label Text:

<script type="text/javascript">
    function setText() {
        document.getElementById("<%=Label1.ClientID %>").innerText = 'Some Text<br/>New Line';
        return false;
    }
</script>

Note: Here i am trying to inject HTML break to the Label. But can’t.

Javascript innerText() Method to Get Label Text:

<script type="text/javascript">
    function getText() {
        alert(document.getElementById("<%=Label1.ClientID %>").innerText);
        return false;
    }
</script>

Javascript innerHTML Method to Set Label Text:

<script type="text/javascript">
    function setTextwithHTML() {
        document.getElementById("<%=Label2.ClientID %>").innerHTML = 'Some Text<br/>New Line';
        return false;
    }
</script>

Note: Now I have successfully injected HTML break into the Label Text. Basically this is the difference between innerText() & innerHTML() method. So if you need to inject HTML elements into the Label Control then use innerHTML() method otherwise innerText() method.

Javascript innerHTML Method to Get Label Text:

<script type="text/javascript">
    function getTextwithHTML() {
        alert(document.getElementById("<%=Label2.ClientID %>").innerHTML);
        return false;
    }
</script>

Now run the example hope you can get Label Text by using both Javascript innerText() & innerHTML() method as well as can set also Values or Text using Javascript same methods.

Download Code Example C#        Download Code Example VB.Net

Posted in .Net, Asp.net, C#, Client, Javascript, VB.Net

Leave a Reply

Your email address will not be published. Required fields are marked *

     

*