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

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.

Advertisements

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: