Pages

Wednesday, March 31, 2010

Manipulate your ClientID in ASP.NET 4.0

Hi Guys,
While working with ASP.NET, it is a very common issue with the ClientID of each control which is rendered. ASP.NET has its unique logic to generate clientids. It is very hard to predict what client id the page is going to render when it is put in the client side. ASP.NET has an unique naming system, which generates the client ids and sends to the browser based on certain logic. With the introduction of ASP.NET 4.0, the work become very easier. Handling with the client ids are now very easy.


ASP.NET 4.0 comes with a new feature that allows you to specify the mode of the client id for each control. So you will get full control of what id to be rendered in the client side


Every Control of ASP.NET 4.0 comes with a new property called ClientIDMode. It determines how the ClientID will be rendered. Let us discuss about the different modes of ClientID rendering and see how you can use it :

ClientIDMode.Static


In this mode, the control will render the ID of the client side as it is defined in the server side. It comes handy when you dont want to change the id of the client side html controls. In this case, as ASP.NET doesn't takes care of the uniqueness of the control id rendered in the client side, it will be the responsibility of the programmer to uniquely identify each control it defines.

In the above example, I can use

<asp:label id="lblName" runat="server" text="Select Name : ">
<asp:textbox clientidmode="Static" id="txtName" runat="server">
</asp:textbox>
<asp:button onclick="Submit_Click" onclientclick="javascript:return validateName();" 
runat="server" text="PostPage"></asp:button>
In this case the client html will be as :
<input name="ctl00$MainContent$txtName" type="text" id="txtName" /><br/>
 <input type="submit" name="ctl00$MainContent$ctl00" value="PostPage" 
onclick="javascript:return validateName();" />

So I can now easily refer to the control in javascript only using txtName even from external javascript files. Ahh... The problem solved.
READ THE FULL ARTICLE

1 comment:

Please make sure that the question you ask is somehow related to the post you choose. Otherwise you post your general question in Forum section.