ASP.NET: HyperLink and Label without Id attribute
Written by jf on August 4, 2008Today, I’ll talk a bit about how ASP.NET handles HTML rendering of controls such as <asp:HyperLink> and <asp:Label>. If you have developed using ASP.NET you must have noticed that when an <asp:Hyperlink> or <asp:Label> is rendered you will find something like that:
<html> <a id="ctl00_ContentPlaceHolder1_rptShoppingCart_ctl00_lnkGotoCheckout" href="#" class="someCss">delete</a> </html>
From an ASP.NET point of view, this is fine, since all object rendered should be identified uniquely on the client side. But many a time these are useless, since these hyperlinks are not used to trigger any server side events. Thus the id attributes just takes up a lot of space on your HTML and Page Size when you have many links like that. If you don’t want to have those, here is a solution I came up with, you can create custom server controls that inherits from the control that you want to remove the id attribute tag from.
Here is sample of the code that i used to remove the id attribute from the Hyperlink Control, without basically removing all the features provided by the Hyperlink control such as being able to handle Resource files for globalization.
[ToolboxData("<{0}:HyperLinkEx runat=server></{0}:HyperLinkEx>")]
public class HyperLinkEx: System.Web.UI.WebControls.HyperLink
{
private string rel;
/// <summary>
/// Gets or sets the rel.
/// </summary>
/// <value>The rel.</value>
public string Rel
{
get { return rel; }
set { rel = value; }
}
/// <summary>
/// Renders the control to the specified HTML writer.
/// </summary>
/// <param name="writer">The <see cref="T:System.Web.UI.HtmlTextWriter"></see> object that receives the control content.</param>
protected override void Render(HtmlTextWriter writer)
{
StringBuilder sb = new StringBuilder();
sb.Append("<a");
if (this.NavigateUrl.StartsWith("~"))
this.NavigateUrl = ResolveClientUrl(this.NavigateUrl);
sb.Append(" href=\"" + this.NavigateUrl + "\"");
if (!string.IsNullOrEmpty(rel)) sb.Append(" rel=\"" + rel + "\"");
if (!string.IsNullOrEmpty(this.CssClass)) sb.Append(" class=\"" + this.CssClass + "\"");
if (!string.IsNullOrEmpty(this.Target)) sb.Append(" target=\"" + this.Target + "\"");
if (this.Attributes["onclick"] != null) sb.Append(" onclick=\"" + this.Attributes["onclick"] + "\"");
sb.Append(">");
if (!string.IsNullOrEmpty(this.ImageUrl)) //Some image were found
{
if (this.ImageUrl.StartsWith("~"))
this.ImageUrl = ResolveClientUrl(this.ImageUrl);
sb.Append("<img src=\"" + this.ImageUrl + "\" alt=\"" + this.Text + "\" title=\"" + this.Text + "\" border=\"0\" />");
}
else
{
sb.Append(this.Text);
}
sb.Append("</a>");
writer.Write(sb.ToString());
}
}
In this source code, i have overridden the render method of the control and outputted a cleaner HTML anchor with no Id attributes. I have also added support for ImageURL attribute of the hyperlink server control, thus maintaining the most of the asp:Hyperlink features.
I have also created a tiny library with some controls: <asp:HyperLink>, <asp:Label>, <asp:Image> which i think are the controls that need not have the id attribute in every scenario.
You can find it for download under GNU Public Licence here.
Shout Box RSS Feed
