Question

Today I got an interview question as titled.

For example, a Update Panel contains a Panel, the Panel contains a TextBox.

How can I get the TextBox ClientID?

The only I could think of that is:

1. We can predict the TextBox ClientID depends on the ClientID mode and use getElementByID.

   i.e. getElementByID('ct100$MasterPageBody$ct100$UpdatePanelID$ct100$PanelID$ct100$TextBoxID')

2. We can use JavaScript to parse the HTML, parse the input controls into arrays.

   i.e Assume we know we want to find the first UpdatePanel’s first Panel’s first TextBox.
   We can find it from myUpdatePanel[0] then get its children using JavaScript? (I am only guessing here)

3. getElementByID('<%=MyTextBox.ClientID%>')

But assuming the TextBox is added dynamic, but what’s the proper way of doing it?

Answer 1

You can access the control from a jQuery selector based on the end of the id like the example here:

<asp:CheckBox ID="chkEnable" Text="My Checkbox" runat="server" />
<script type="text/javascript">
    $(function() {
        var checked = $("input[id$=chkEnable]").attr("checked");

    });
</script>

Here’s an article for the exact thing:
http://weblogs.asp.net/joelvarty/archive/2009/02/09/jquery-get-a-handle-on-a-server-element-in-javascript-without-using-lt-elem-clientid-gt.aspx