Software Architecture – Difference between id, name and clientid – For WPF/Silverlight/Window Forms/ASP .Net?

August 14, 2010

Lets focus on id and name first.

For WPF/Silverlight/Window Forms:
There is no concept of “id” in WPF, Silverlight and Windows Forms. But “name” is used to identify a control uniquely. So if you create a Textbox with “name” as “myTextBox”, then a variable will be created in code behind to access its properties.

For ASP .Net
In ASP .Net, “id” is used to uniquely identify a control in a page.

In ASP .Net, if you create a TextBox control as:

<asp:TextBox  ID="TextBox1" runat="server"></asp:TextBox>

Then in code behind file, a variable will be created as “TextBox1”, so in ASP .Net “ID” is used to uniquely identify a control.

So if you create a ASP .Net page with controls as:

<asp:TextBox  ID="TextBox1" runat="server"></asp:TextBox>
<asp:TextBox  ID="TextBox1" runat="server"></asp:TextBox>

It will give a compile time error that two controls with same “ID” can’t co-exist in the same ASP .Net form.

If you will put control as below:

<asp:TextBox  name="TextBox1Name" ID="TextBox1" runat="server"></asp:TextBox>

A message will be shown as below:

Validation (ASP.Net): Attribute 'name' is not a valid attribute of element 'TextBox'.	

So in Asp .Net “name” is not allowed in server side control.

In ASP .Net, against following ASP .Net control

<asp:TextBox   ID="TextBox1" runat="server"></asp:TextBox>

Will transform in html as:

<input name="ctl00$MainContent$TextBox1" type="text" id="MainContent_TextBox1" />

Means that a “name” attribute is automatically created by concatenating the control hierarchy with “$” character and ” ID” values modified by concatenating with “_” character.
It is because in HTML ID and Name co-exist side by side.

id attribute was introduced only in DOM .ID supposed to be unique for the given document, while name can be the same for many elements (think of radio buttons group for instance).

According to http://solidlystated.com, best comparison can be done as:

Id Attribute
• Valid on any element
• Each Id should be unique
• Can be used as anchor reference in URL
• Is referenced in CSS or URL with # sign
• Is referenced in JS with getElementById()
• Shares same name space as name attribute
• Must begin with a letter
• Is case sensitive

Name Attribute
• Valid only on a, form, iframe, img, map, input, select, textarea
• Name does not have to be unique
• Can not be referenced in CSS or URL
• Is referenced in JS with getElementsByName()
• Shares same name space as id attribute
• Must begin with a letter
• Is case sensitive
• Used on form elements to submit information

Reference:
http://solidlystated.com/scripting/html-difference-between-id-and-name/

According to w3, following are main usage of ID attribute in HTML:

• As a style sheet selector.
• As a target anchor for hypertext links.
• As a means to reference a particular element from a script.
• As the name of a declared OBJECT element.
• For general purpose processing by user agents (e.g. for identifying fields when extracting data from HTML pages into a database, translating HTML documents into other formats, etc.).

What is clientid?
There is no concept of ClientID in Windows forms, Silverlight and WPF. It is only related to ASP .Net.
Clientid is used to give a systemically created id attribute to HTML control generated by running a ASP .Net control.

<script type="text/javascript">
    function DoSomething(){
        alert('<%= TextBox1.ClientID %>');
    }
</script>

The above code will give “MainContent_TextBox1” showing the id of control.