ASP.NET Tip - Use The Label Control Correctly
Scott Watermasysk has a great set of Quick Tips for ASP.NET on his blog. And this is only part one! I’m Looking forward to seeing the subsequent posts of this series.
However, I disagree slightly with his tip to Never use the ASP.NET
Label
control. I would rephrase it to:
Never use the ASP.NET Label
control when a Literal
would do.
The problem is not the Label
control. The problem is treating the
Label
control as if it was merely a Literal
control.
The Label
control has a specific usage, to be a label for a form
input. For example, check out this screenshot of a text label and
textbox.
Let’s look at one way to create this simple form using a Literal
control (Notice I’m getting the value from a Resource file because we
all want to be internationally friendly, right? But it also points out
why I use an actual control rather than just typing the label
directly).
<asp:Literal id="label" Text="<%$ Resources:UserName %>" runat="server" /> <asp:TextBox id="textbox" runat="server"/>
When you click on the word Username what happens? Nothing. Wouldn’t it be nice if the Textbox next to the literal was given focus? Here’s how:
<asp:Label id="label" AssociatedControlId="textbox" Text="Username" runat="server" /> <asp:TextBox id="textbox" runat="server" />
Now, we’ve associated the label to the control. The underlying HTML looks something like (simplified for the sake of discussion):
<label for="textbox">Username</label> <input type="textbox" name="textbox" value="" />
This associates the label Username with the textbox control, so when you click on label, the textbox gets focus.
So why use the Label
server control here? Why not just use the
<label /> html tag directly?
Because you might not know at compile time what the client id of the TextBox will actually end up as. What if these two controls were inside a UserControl inside a page? The ID might get a bit funky as its nested in a control within a control.
Comments
0 responses