Asp.net web form user control with ClientIdMode = "static" cannot be accessed in javascript

Question

I have a user control that is used inside an ASP.Net web form page. In the user control I have set the ClientIdMode = "static" e.g

<%@ Control Language="C#" AutoEventWireup="true"
CodeBehind="QuestionUserControl.ascx.cs"
Inherits="Kids.Math.Presentation.UserControls.QuestionUserControl"     ClientIDMode="Static" %>

In the form that I am using it I also set Id as:

 <uc2:QuestionUserControl runat="server" ID="QuestionUserControl1" ClientIDMode="Static" />

However, when run the page I am trying to access this user control in javascript either by getElementById("QuestionUserControl1") or using JQuery $("#QuestionUserControl1") ... it doesn't work. Actually, the user control doesn't seem to be appear in the source ... when checking the source i cannot find "QuestionUserControl1" however I can find the controls inside it e.g ctl00$MainContent$QuestionUserControl1$txtQuestion ...

Not sure why the user control Id is not appearing?

Any comments will be appreciated ...

Update: user control mark up (Please forgive the inline markup styles as it is only a test version ...)

    <%@ Control Language="C#" AutoEventWireup="true"
    CodeBehind="QuestionUserControl.ascx.cs"
    Inherits="Kids.Math.Presentation.UserControls.QuestionUserControl" ClientIDMode="Static" %>

<style type="text/css">
    .auto-style1 {
        width: 100%;
    }
</style>

<div runat="server" style="Width:100%; Height:100%;" class="panel-body panel-question" ClientIDMode="Static" id="pnlQuestion">

    <div runat="server" style="Width:100%; Height:100%;" ClientIDMode="Static" ID="pnlTextbox">
        <asp:TextBox ID="lblTimer" runat="server" BackColor="Black" BorderColor="Black" BorderStyle="None" BorderWidth="0px" ClientIDMode="Static" ForeColor="White" Visible="False" Width="100%" Font-Bold="True" Font-Size="Large" ReadOnly="True"></asp:TextBox>
        <asp:TextBox CssClass="textarea" TextMode="MultiLine"
            Height="100%" ID="txtQuestion" runat="server"
            BackColor="Black" ReadOnly="True" Width="100%"
            Font-Size="X-Large" ForeColor="White"></asp:TextBox>
    </div>
    <div style="Width:100%; Height:30%;">

        <table class="auto-style1">
            <tr>
                <td>
                    <asp:Button ID="Answer1" runat="server" BorderStyle="Dashed"
                        CommandName="Answer1" Width="100%" OnCommand="Question_Answered" Enabled="False" BackColor="Black" Font-Size="X-Large" ForeColor="White" />
                </td>
                <td>
                    <asp:Button ID="Answer2" runat="server" BorderStyle="Dashed"
                        CommandName="Answer2" Width="100%" OnCommand="Question_Answered" Enabled="False" BackColor="Black" Font-Size="X-Large" ForeColor="White" />
                </td>
                <td>
                    <asp:Button ID="Answer3" runat="server" BorderStyle="Dashed"
                        CommandName="Answer3" Width="100%" OnCommand="Question_Answered" Enabled="False" BackColor="Black" Font-Size="X-Large" ForeColor="White" />`enter code here`
                </td>
            </tr>
        </table>

    </div>

    <asp:HiddenField ID="HiddenField1" runat="server" />
</div>

UserControl won't create dom. I'm curious what you want to do with **QuestionUserControl1**. — Win, May 20 '15 at 15:36
Ok, this is very good questions. Let is see if there is a workaround. This user control has a countdown timer which is running in javascript (i had problem keeping the timer in code behind as postback were stopping timer) now once the timer is zero it is calling back the ASPX code behind [WebMethod]. There I need to call the user control to Finalise things. Since the webmethod is shared, I cannot access the user control inside it. I was thinking to pass the user control as a parameter to web method so i can access its methods etc. — user1829319, May 20 '15 at 20:49
I also attempted to access the user control from inside the code behinde like: var page = (Page)HttpContext.Current.Handler; var userControl = (QuestionUserControl)page.FindControl("QuestionUserControl1"); But this does not work either. — user1829319, May 20 '15 at 20:50
To find control at server side, you can look at [this](http://stackoverflow.com/a/15708885/296861) answer. **Usage:** `(QuestionUserControl)FindControlRecursive(page, "QuestionUserControl1"); ` — Win, May 20 '15 at 21:03
Hi Win, thanks for the reply, but as you mentioned usercontrol is not creating DOM element ... so maybe that is why I can't find it in the page object. I used your recursive function but it doesn't return anyting. Is this the way to get the page -> var page = (Page)HttpContext.Current.Handler; ?? — user1829319, May 20 '15 at 23:52
Where are you accessing Page? **Page** is always available if you access it inside Page or UserControl. — Win, May 21 '15 at 13:50
From inside the WebMethod in code behind. Obviously I cannot use "this" inside the static method. How else I can use it? — user1829319, May 21 '15 at 22:39
**WebMethod** is totally different from original question. ***Answer is No.*** You cannot access **Server Controls** inside **WebMethod**. Please ask a new question if you have question about WebMethod. — Win, May 22 '15 at 13:22

score 0 · Answer 1 · answered May 20 '15 at 15:14

ctl00$MainContent$QuestionUserControl1$txtQuestion is from a asp tag having id txtQuestion or something similar.

This is not an answer, because poor markup was shared in question I will suggest to do this:

Wrap you usercontrol

<%@ Control Language="C#" AutoEventWireup="true"
CodeBehind="QuestionUserControl.ascx.cs"
Inherits="Kids.Math.Presentation.UserControls.QuestionUserControl"%>
<asp:Placeholder id="uniqueID" runat="server" ClientIDMode="static">
<!-- your asp tags inside user control -->
</asp:Placeholder>

Now check your html if you find a div with id="uniqueID" -> that's your first tag created by user control.

Tremor, appologies for the poor mark up ... I will update the question. Though I already have the user control wrapped inside a Div ... — user1829319, May 20 '15 at 20:52

score 0 · Accepted Answer · answered May 24 '15 at 04:32

I finally ended up with this word around: - Added a new button to the user control called it incorrect answer - In javascript once the countdown timer is over - I did a postback for this new button i.e __doPostBack("InCorrectAnswer", "");

And then inside the user control I decided on what to be done when InCorrectAnswer is clicked ... which basically meant finalise the process.

This worked for me Fine.

Asp.net web form user control with ClientIdMode = "static" cannot be accessed in javascript

2 Answers2