How to name HTML elements in User Controls?

I recently designed my own user control.

My control consists of an ASP:Tree control and a plain HTML text input with copious Javascript, jQuery, and .net code to bring them to life together.

I have two issues.

1) I can only have one instance of this control on a page at a time. The text input is named txtUserControl, so putting a second instance on the page causes a name collision. I have the same issue with the ASP:Tree.

2) If I put my user control inside an ASP:UpdatePanel, it does not work at all. I get errors all over the page when I try to refresh it. Incidently, I have this same issue with a user control created by one of my co-workers.

I have some ideas for controls that I would like to be able to use again and again in开发者_运维知识库 my projects. I would like them to be rock-solid.

What are the best practices for sorting these issues out?

If you use runat="server" on your HTML controls, they will be auto-assigned a unique ID across instances of user controls. You would need to reference your control using the ClientID property on the server-side, like this:

// javascript code
function doStuff() {
    var myUserControl = $get('<% =MyUserControl.ClientID %>');
};

Your issues will be eliminated if you convert your User Control into a Composite Control.

Sometimes getting it to work the first time is a little tricky, however, it is worth the investment of time to learn how to create these and use them.