ASP.Net: ClientID not correct in code-behind of a user control

Question

The following code does not work. The markup is in a User Control and I suppose that's why ClientID returns the wrong prefix for the TextBox id.

Markup:

<INPUT id="txtName" runat="server" maxlength="50" style="WIDTH:100px">
<INPUT type="button" value="Find Your Doctor" id="btnFind" runat="server"
      style="MARGIN-LEFT:10px;WIDTH:130px">

Code-Behind:

btnFind.Attributes.Add("onClick",string.Format("DoctorLink
        ('{0}',document.getElementById('{1}').value,{2});",
        row["ZipCode"],
        txtName.ClientID));

Results in browser:

<input name="DoctorsMainArea1$ctl01$txtName" type="text"
   id="DoctorsMainArea1_ctl01_txtName" maxlength="50" style="WIDTH:100px" />

<input name="DoctorsMainArea1$ctl01$btnFind" type="button" 
   id="DoctorsMainArea1_ctl01_btnFind" value="Find Your Doctor" style="MARGIN-
   LEFT:10px;WIDTH:130px" onClick="PrepareDoctorLink('90210',
   document.getElementById('DoctorsMainArea1_ctl00_txtName').value);" />

As you can see, the parameter for the JavaScript call is DoctorsMainArea1_ctl00_txtName, but the actual id of the input element is DoctorsMainArea1_ctl01_txtName.

Any idea how to fix this? jQuery? I am not so much interested in an explanation of what's going on (maybe there is another control on this page that is interfering), but a more robust way to solve the problem.

Answer 1

I don't know which asp.net version you are using but in 4.0 you can declare inside any server control ClientIDMode="static" and it will give you the exact id in browser.

Example:

<asp:Textbox id="txtName" runat="server" ClientIdMode="static"/>

Others are predictable, inherit and it can be used with ClientIdRowsuffix.Can be used at page level and even on master pages and even in web.config file.

Example on web.config file:

<system.web>
<Pages clientIDMode="predictable"/>
other system web properties
</system.web>

Watched Craig shoemaker's Video at tekpub, you can also read more about it at Rick's bloglink text. It's pretty cool tho.

Answer 2

You should try moving the code that adds the onclick attribute to the button in the PreRender event (or OnPreRender override) in your page or user-control. That should probably get the ClientID right.