How to find the id within UserControls once rendered as HTML

First, why would we need to find the Id of a UserControl element? When the html is built dynamically .Net will build the ids of a control that is in a UserControl and render the html ids dynamically. So if you wanted to refer to an item that was build in a user control and do something with it in JavaScript for example it wouldn't work as each time the page is rendered client side it could have different ids for that element.

Here is an example of how to get a handle on the correct id.

First lets create a simple UserControl.

Create a web project and add a web user control, calling it Results. On the Results.ascx page at a TextBox control so it looks something like below.

Set the Id of the TextBox to tbResults.

Now drop the control onto your default.aspx and preview in browser.

View the source code that has been rendered to the client. You should see something like this:

<textarea name="Results1$tbResults" rows="2" cols="20" id="Results1_tbResults" style="height:84px;"></textarea>

As you can see, rather than the id being as you set it 'tbResults' it has changed; in this case to include the name of the actual control. (obviously in this case every time you run this code it will produce the same, but in more complex controls perhaps using datagrids and multiple controls, it wouldn't quite be as simple).

So how can we gain access to the id when they are built dynamically so that we can programmatically do something with them.

Well lets go to your Results.ascx.cs page and add a bit more code.

We are going to create a property in the component so that we can get the name of the ClientID. We do this through the property available on each control called ClientID (simple really)

Your code should look something like this:

public partial class Results : System.Web.UI.UserControl
{
    // a private string to hold the Client id
    private string _tbResultsId;

    // a string so that we can get the value of the client id
    public string tbResultsId
    {
        get
        {
            // set the private string to the Client id
            _tbResultsId = tbResults.ClientID;

            // return the client id
            return _tbResultsId;

        }
    }


    protected void Page_Load(object sender, EventArgs e)
    {

    }

}

We should now be able to get a handle on the ClientID via the tbResultsId property of the control.

We can check if this is working by adding a bit of html to the default.aspx page.

Add the following code under the texbox and then view the default page in a browser.

<br />The actual name of the tbResults is: <%= Results1.tbResultsId %><br />

You should see the in your browser something like this:

by outputting the property tbResultsId we were able to render the actual name of the id. So now you have a way of accessing the ids even when built dynamically. This is ideal when you are using JavaScript on rendered controls. Simple output the name in JavaScript using <%= Results1.tbResultsId %> everytime you need to write the name of the id.