Wednesday, April 17, 2013

Web Server Control Lable

As what we known, label is one of heavily used control in ASP.NET web application. And you may easily find a label control somewhere of every pages. Therefore, Matering this control is a key to build successfully web application. Although Label control is simple and straightforward to be get involved, I still want to share my own experience how to use it wisely. Hopefully, you will enjoy this topic and find some useful staff.

Web Server Control: Label
NameSpace: System.Web.UI.WebControls

Tip #1: AssociatedControlID is a property by which a Lable can be associated to an input control, like TextBox. And it does provide a way binding two associated controls together. Whenever users click on a label that has an AssociatedControlID, cursor will move to the associated control automatically. To explore the behaviour you may expect, you can click on the demo Amount Financed Lable below.

Code Snippet:
<asp:Label ID="lblAmountFinanced" runat="server" Text="Amount Financed" AssociatedControlID="txtAmountFinanced"></asp:Label>
<asp:TextBox ID="txtAmountFinanced" runat="server"></asp:TextBox>

Demo:

 

There is no surprise that most of C#/VB progrmmers don’t pay much attention on this property. However, using AssociatedControlID with Lable control will definitely improve the users' experience.


Tip #2: Normally, while using Javascript, we use command document.getElementById(“ControlID”).value to retrieve and assign value to a control. However, this command will not work at Lable control. In order to manipulate Lable value, you have to use command document.getElementById(“lblAmountFinanced”).innerHTML instead of document.getElementById(“lblAmountFinanced”).value. Otherwise, you will get undefined value. To compare the diffrence between two command, you can click on the demo buttons below.

Demo:

        


Tip #3: Literal control is similar to Lable control. In most of cases, we can swap these two controls each other. However, in centain particular situation, only either Lable control or Literal control can be applied. For instance, Literal control does not allow you to apply a style to the displayed text; thus, Lable control has be chosen if style will be applied. On the other hand, Literal control will be only choice when we're dynamically creating <title> tags, or <link type="text/javascript"> tags, or <meta name="keywords"> tags, ets....

Code Snippet:
<head>
      <title><asp:Literal id="litTitle" text="Michael Kong's Blog" runat="server" /></title>
      <title><asp:Lable id="lblTitle" text="Michael Kong's Blog" runat="server" /></title>
</head>

Demo:

Literal control will render as:  <title>Michael Kong's Blog</title>
Lable control will render as (invalid HTML):   <title><span>Michael Kong's Blog</span></title>

No comments:

Post a Comment