Custom Web Control ID includes child ID

Question

My Custom Web Control (ascx)

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="CustomAutoCompleteTextBox.ascx.cs" Inherits="UserControls_CustomAutoCompleteTextBox" ClientIDMode="Static" %>

<asp:TextBox ID="AutoCompleteTextBox" runat="server" />

Implementation on webpage EquipmentMove

<%@ Page Language="C#" MasterPageFile="~/SiteMasterPage.master" AutoEventWireup="true" CodeFile="EquipmentMove.aspx.cs" Inherits="Equipment_EquipmentMove" %>

 <Custom:AutoCompleteTextBox runat="server" ID="HardwareSNTextBox1"
            OnCloseFunction="TestOnClosefunction"
            OnFocusFunction="testme"
            OnKeyUpFunction="EquipmentSearchCheckHardwareSNLength"
            PostbackURL="EquipmentMove.aspx/HardwareSNAutoComplete"
            SpellCheck="false" />

At runtime the Custom:AutoCompleteTextBox control's client ID becomes "HardwareSNTextBox1_AutoCompleteTextBox". Resulting markup:

<input name="ctl00$cpBody$HardwareSNTextBox1$AutoCompleteTextBox" type="text" id="ctl00_cpBody_HardwareSNTextBox1_AutoCompleteTextBox" class="ui-autocomplete-input" autocomplete="off">

If I want to write a javascript called "TestOnClosefunction" on the EquipmentMove webpage and I want access this control but using it's originally entered ID of "HardwareSNTextBox1" and not "HardwareSNTextBox1_AutoCompleteTextBox" is this even possible?

Edit: I suppose if the developer using this custom web control examines the markup for the actual ID while writing their js, then that could work. Not very intuitive though.

Yes, it's possible. You need the right selector: https://www.w3schools.com/jquery/jquery_ref_selectors.asp — JohnPete22, Oct 25 '19 at 17:20

dpant · Answer 1 · 2019-10-27T08:14:22.073

1

A very nice way is to use the server control's ClientID property, for example in your EquipmentMove ASPX page:

<form id="form1" runat="server">
    <div>
        <Custom:AutoCompleteTextBox runat="server" ID="HardwareSNTextBox1" />
        <input type="button" value="Test" onclick="javascript:TestOnClosefunction()" />
    </div>
</form>
<script type="text/javascript">
    function TestOnClosefunction() {
        var textBox = document.getElementById('<%= HardwareSNTextBox1.FindControl("AutoCompleteTextBox").ClientID %>');
        console.log(textBox.value);
    }
</script>

To verify it works just click the Test button to print the value of the TextBox in the browser's console.

Explanation

Embedding the line of server-side code and using the ClientID property in JavaScript makes sure your server control will always be discovered no matter what its generated ID is.

UPDATE: Maybe what I should have emphasized is that this line:

var textBox = document.getElementById('<%= HardwareSNTextBox1.FindControl("AutoCompleteTextBox").ClientID %>');

becomes:

var textBox = document.getElementById('HardwareSNTextBox1_AutoCompleteTextBox');

when the page is run. The advantage compared to hard-coding the ID in JavaScript is that it works independent of what value the Control's ClientIDMode property is set to.

edited Oct 27 '19 at 08:14

answered Oct 25 '19 at 17:58

dpant

1,622
19
30

This won't work. I should have shown the resulting markup when it ran. The custom web control simply becomes an input tag with the id of HardwareSNTextBox1_AutoCompleteTextBox. There are no other tags created. – user3140169 Oct 25 '19 at 21:28
@user3140169 Did you try it? I've used the same IDs as yours so you can just copy and paste it in your page. As is, the answer assumes the ID of the input tag is `HardwareSNTextBox1_AutoCompleteTextBox`. Please, give it a try and let me know. – dpant Oct 26 '19 at 10:00
This will only work if the developer examines the custom web control to know that they have to include "_AutoCompleteTextBox" in the name. I was looking for a cleaner solution or hoping for one. – user3140169 Oct 28 '19 at 15:02
@user3140169 Answers are based on your question. If you require further assistance please either update your original post with more details and/or requirements or ask a new question. Do not make us guess. – dpant Oct 28 '19 at 16:39

Custom Web Control ID includes child ID

1 Answers1