ASP.NET Label | How ASP.NET Labels works with Example?

Introduction to ASP.NET Label

Label control is used to display the text on the web page. This Label control is used along with other controls like textboxes. it’s very common where the label is used with a textbox. Labels usually help the user to provide the data in the text boxes by the written indications. Labels are server-side controls. We can display the text in label control via setting the text through text property. By changing its label control properties, we can change the label controls style or look and feel. So we can customize it as per our requirement.

Syntax

< asp:LabelID="Label1" runat="server" Text="Label" ></asp:Label>

How does ASP.NET Label work?

Let us see how exactly ASP.NET label works.

Open a visual studio and create a new empty web application.
Now add a new web form, which is there in the solution explorer.
From the toolbox, select the label control to drag it and drop it on the web form.

Set its Text and ID property from the label control.
We need to assign the text in label control so as to use its text property. by setting the text value in a label text property, the text will be displayed on the label control.
We can change the text of the label using its text property programmatically via writing code in asp.cs page.
Text= “EduCba”;

Default.aspx.cs Code

Using System; Using System.Collections.Generic; Using System.Linq; Using System.web; Using System.Web.UI; Using System.Web.UI.WebControls; Public partial class _Default : System.Web.UI.Page { Protected void page_Load(object sender, EventArgs e) { Label1.Test=” Welcome to EduCba”; } }

Properties

Label Control has its own properties, which will be used to make it more enhanced.

AccessKey: To add the keyboard shortcut for the label, Accesskey is used.
TabIndex: It determines the index of tab control for the webserver.
BackColor: To enhance the look and make it with different colors, we can use this property so that it will help to change the background color of the label.
BorderColor: If we want to set the color for the label border, we can use this property.
BorderWidth: This property will allow us to set a particular width for the label border.
Font: We need to set the font for the text of the label then we can use this property.
Forecolor: It is used to set the color for the label text.
Text: Text, which needs to be displayed for the label, is used by this property.
ToolTip: It provides the text to be displayed when we try to put the mouse over a label.
Visible: It will allow us to set the visibility of the control on the web form.
Height: It provides us to set the height of the label control.
AutoSize: If we need to resize the label control automatically, it will allow us to set the value for it.
BorderStyle: We can design the border of the label control as per the application requirement.
FlatStyle: It deals with the flat style appearance for the label control.
Font: It will determine the font for the text of label control. It will set the value for it.
TabStop: If the user can use the tab to the label control, then this property determines the value for it.
TextAlign: It will provide the alignment for the text in the label control.

Example of ASP.NET Label

Below are the examples of ASP.NET Label:

Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebControls.aspx.cs" Inherits="WebFormsControlls.WebControls" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> .auto-style1 { width: 150%; } .auto-style2 { margin-left: 0px; } .auto-style3 { width: 102px; } </style> </head> <body> <form id="form1" runat="server"> <div> <h4>Fill the Employee ID in below text box:</h4> <table class="auto-style1"> <tr> <td class="auto-style3"> <asp:Label ID="Label1" runat="server" Text="Employee ID"></asp:Label></td> <td> <asp:TextBox ID="TextBox1" runat="server" CssClass="auto-style2"></asp:TextBox></td> </tr> <tr> <td class="auto-style3"> <asp:Label ID="Label2" runat="server" Text="Upload a File"></asp:Label></td> <td> <asp:FileUpload ID="FileUpload1" runat="server" /></td> </tr> </table> </div> </form> </body> </html>

Explanation to the above code: We can see in the above code that asp gives its own tag to use it as label.<asp:Label ID =Label1> determines its id. Run at is always set to be “Server” as this is server-side control. We have added 2 labels here having the text as Employee ID and upload file. We can use this Label Control Method.

GetPreferredSize: It is used to retrieve the rectangular area’s size into which a control can be fitted.
Refresh: It will immediately redraw itself and any dependent control if any. Also, force to control to invalidate its client area.
Select: It activates the control.
Show: It will display the control to the user.
ToString: It will return the string, which is having the name of the control.

There is some Label control given below:

AutoSizeChanged: When the value of AutoSize Property changes this occurs.
Click: When we clicked the Label Control, this is used.
DoublClick: When label control is double-clicked this occurs.
GotFocus: When label control receives focus this occurs.
Leave: When input controls leaves, the focus of the control label it comes under the picture.

Output:

Therefore, you have seen how label control is used to display the text content on the web page. Also, it can be styled as color, font, size, etc all these can be changed easily. Label control is easily accessed by the jQuery and JavaScript. Label control is by default present as HTML <span> tag that the text is present inside the enclosed HTML tag. If we used AssociatrControlID property then the content will be enclosed in <label> tag.

Conclusion

We have learned how exactly the labels work in asp.net framework. With the help of an example, it is more clear that how it has been used to display the text in the boxes. We also go through the properties of Labels by which it can be enhanced more.

Popular Course in this category