Finding a control in JavaScript when it is programmatically created in asp.net webforms [duplicate]

Question

I have created several controls programmatically in the code-behind of one of my pages. Can someone give me an idea of the best way to access them without setting ClientIDMode to Static.

When I do not create my controls programmatically I simply access them with server tags like this using jQuery:

$('#<%=Label1.ClientID%>')

Note: Using ClientIDMode = Static is not an option here.

Here is an example of how I am creating my control programmatically:

TextBox TextBox1 = new TextBox();
TextBox1.ID = "TextBox1";

Like @kaushalparik27 gave example how to create them (in Page_Init), just set some id for each control and do classic document.getElementById — nelek
– nelek, Commented Sep 2, 2015 at 18:29
Not sure why you would downvote this post. It doesn't need to be explained any further. You either create a control in the aspx page or programmatically in the code behind. In this case I said I am creating my controls programmatically in the code behind. Doesn't matter where, doesn't matter how. I updated my post with what you were asking for... — Matthew Peterson
– Matthew Peterson, Commented Sep 3, 2015 at 2:57

kaushalparik27 · Accepted Answer · 2015-09-02 17:36:08Z

1

There are approaches you can use with Jquery Selectors. One of alternative is to use css selector. When you create dynamic controls; assign unique value to CssClass property of the control and use it at the jQuery side to access the controls. Below is some what very small example:

Created some sample controls in Page_Init event:

protected void Page_Init(object sender, EventArgs e)
{
    TextBox txtBox = new TextBox();
    txtBox.CssClass = "txtBox";
    phControls.Controls.Add(txtBox);

    CheckBox chktBox = new CheckBox();
    chktBox.CssClass = "chktBox";
    phControls.Controls.Add(chktBox);

    DropDownList drpBox = new DropDownList();
    drpBox.CssClass = "drpBox";
    phControls.Controls.Add(drpBox);
}

And on design side, placed a button control. A function is alerting the controls on OnClientClick event as:

    <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
        function getValues() {
            alert($(".txtBox"));
            alert($(".chktBox"));
            alert($(".drpBox"));

            alert($(".txtBox").val());
            return false;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:PlaceHolder runat="server" ID="phControls" />
        <asp:Button Text="Get Value" runat="server" OnClientClick="return getValues();" />
    </form>
</body>
</html>

hope it helps./.

answered Sep 2, 2015 at 17:36

kaushalparik27

8042 gold badges9 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

nelek Over a year ago

good, but not good approach if there is more controls with same css. Sometime can be 5 checkboxes, sometime 8, and so on...

kaushalparik27 Over a year ago

This is true and I agree with it, that is why I said this can be an alternative. Other approach is for example, to use jQuery Starts with or Ends with (Id or attribute) selectors.

Matthew Peterson Over a year ago

Thank you for giving me a way to do it.

Collectives™ on Stack Overflow

Finding a control in JavaScript when it is programmatically created in asp.net webforms [duplicate]

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related