How to Get Set Read Write Asp.Net Label Text or Value using JQuery 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 JQuery“. 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 JQuery. To Get Set Label Control Text or Value we can use two JQuery method text() & html(). 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 Javascript in C# VB.Net

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

HTML code to test the Example:

Using .text:<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" /><asp:Button ID="Button2" runat="server" Text="Read Text from Label" />
    <br /><br />
Using .html:<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" /><asp:Button ID="Button4" runat="server" Text="Read Text from Label" />

JQuery .text() Method to Set Label Text:

<script type="text/javascript">
    $(document).ready(function () {
        $('#<%=Button1.ClientID %>').click(function () {
            $('#<%= Label1.ClientID %>').text('Some Text<br/>New Line');
            return false;
        });
    });  
</script>

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

JQuery .text() Method to Get Label Text:

<script type="text/javascript">
    $(document).ready(function () {
        $('#<%=Button2.ClientID %>').click(function () {
            alert($('#<%= Label1.ClientID %>').text());
            return false;
        });
    });  
</script>

JQuery .html() Method to Set Label Text:

<script type="text/javascript">
    $(document).ready(function () {
        $('#<%=Button3.ClientID %>').click(function () {
            $('#<%= Label2.ClientID %>').html('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 text() & html() method. So if you need to inject HTML elements into the Label Control then use html() method otherwise text() method.

JQuery .html() Method to Get Label Text:

<script type="text/javascript">
    $(document).ready(function () {
        $('#<%=Button4.ClientID %>').click(function () {
            alert($('#<%= Label2.ClientID %>').html());
            return false;
        });
    });  
</script>

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

Download Code Example C#        Download Code Example VB.Net

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

Leave a Reply

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

     

*