About ASP.Net Label Control

In ASP.Net, Label Controls display static text. A normal html text is light-weight and suitable to display static text. Means, the text will not change during the lifecycle of the webpage. One can use Label control if its text changes at runtime. The Text property of the Label Control will change the display text. In this Step-by-Step, we will see how to use Label control to display text in it.

1: Switch to Design View

In our previous hands-on, we learnt how to create a webpage. Now, create a website called 04_LabelControl and delete the default.aspx. After this, create a new default.aspx file. Now follow the steps below:

1) In the solution explorer, expand the arrow button of the Project name.
2) Double click to open the default.aspx file. This will open the file and the tab will be in the source view.
3) Click on the Design Tab. This will switch the view from the source to design. The design view helps in designing the web form with controls.

2: Add ASP.Net 4.0 Label Control

In this step, we will add the Label Control to the default.aspx webpage. Follow the sub-steps and refer to the picture:

1) Expand standard set of controls from the Toolbox. Hold-down the mouse left cursor on the Label control.
2) Drag the control to the Web-Form and notice the (+) icon when you are dragging.
3) Drop the control within the body marker as shown in the marker 3. This will place the Label Control on the web page.
4) Right click on the Label to display the content menu.
5) Choose Properties from the displayed context menu. This will bring up the properties window for the Label control.
6) Set the ID Property of the control. Here, we set the ID of the control as FirstLabel. At runtime, we can access the control using this ID property.
7) Set Text Property for the control as “My Label Control”. The text we set here will be displayed on the label control.
8) In the design view, you can see the Label displaying the text given in the Text Property.

3: Add ASP.Net 4.0 Label with Color

In this step, we will add one more label and set foreground color for it. We will also use this Label and assign text at runtime. Steps are below:

1) Drag and Drop second Asp.Net 4.0 Label to the web form. Then access its properties, as explained in the previous step.
2) ForeColor property will assign a text color to the Label control. To pick a color, click on the ‘…’ button.
3) From the displayed Color Picking dialog, click on the ‘Custom…’ button. Note, you can pick the color from the displayed color hexagon as well.
4) Pick a blue color from the Basic Color area. In this area, all the standard and most frequently used colors are present.
5) After picking the color, click on the OK button. Note, here you can create a variety of color by mixing red, blue, and green component values.
6) Once you go back to the Hexagon color wheel, you can look at the name of the color picked on the previous dialog.
7) Click OK here
8) The property window displays the picked color. Since it is standard color, you can also directly type blue here in the text area.
9) The Label in the design area shows the label in blue color.

4: Assign ASP.Net 4.0 Label at Runtime

Now, we have two labels in the web form. Let us assign the Text property of the second Label at runtime.

1) Double click to open the Default.aspx.cs code-behind file.
2) Here, we add code to display the Label text at runtime. The Web Server fires the Load Event when the page loads on the server. Inside the handler for it, we access Text Property of the ASP 4.0 Label Control and assign a text string. The label control will display this string when the page renders on the web browser.
3) Click on the Debug menu.
4) From the displayed menu items, pick ‘Start Without Debugging’. This will open the default web browser and render the web page.
5) This one is the Label in which we assigned the Text property at design time (Refer 2:7).
6) For this Label we changed text color to blue and assigned the text property at runtime during the Page Load event handler.

In this example, we learned about the ASP.Net 4.0 Label control and how to assign the display text at runtime.

Code Reference

1. Default.aspx

2. Default.aspx.cs

• ASP 4.0 – Understanding Page Events | Lab #003
• JavaScript 007 – Switch-Case Structure

Categories: ASP 4.0

Tags: ForeColor Property, ID Property, Label Control, PageLoad, Text Property

This site uses Akismet to reduce spam. Learn how your comment data is processed.