自定义 Web 控件 ID 包括子 ID

Question

我的自定义 Web 控件 (ascx)

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

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

网页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" />

在运行时，Custom:AutoCompleteTextBox 控件的客户端 ID 变为“HardwareSNTextBox1_AutoCompleteTextBox”。结果标记：

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

如果我想在 EquipmentMove 网页上在上编写一个名为“TestOnClosefunction”的 javascript，并且我想访问此控件，但使用它最初输入的 ID 为“HardwareSNTextBox1”而不是“HardwareSNTextBox1_AutoCompleteTextBox”，这是否可行?

编辑： 我想如果使用此自定义 Web 控件的开发人员在编写他们的 js 时检查实际 ID 的标记，那么这可能会起作用。不过不是很直观。

Answer 1

一个非常好的方法是使用服务器控件的ClientID 属性，例如在您的EquipmentMove ASPX 页面中：

<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>

要验证它是否有效，只需单击 Test 按钮以在浏览器控制台中打印 TextBox 的值。

说明

嵌入服务器端代码行并在 JavaScript 中使用 ClientID 属性可确保始终发现您的服务器控件，无论其生成的 ID 是什么。

更新：也许我应该强调的是这一行：

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

变成：

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

当页面运行时。与在 JavaScript 中对 ID 进行硬编码相比的优势在于，它的工作方式与 Control 的 ClientIDMode 属性设置的值无关。